News:

Wondering if this will always be free?  See why free is better.

Main Menu

Different stylesheets in one theme

Started by Gary, July 30, 2006, 10:26:20 PM

Previous topic - Next topic

Gary

Hey Guys,

I'm working on a Multi-Colour Variant of my theme vSMFB.

And I'm wondering, how do you make it so that a theme can have various style sheets like yellow.css, red.css etc... and also have its own images folder. I know the Sitra theme does it, but I couldnt figure out how.

Oh, and the thing with the drop downs in Settings.template.php where you can select the defualt colour,  (and a drop down for Index.template.php)

Thanks,
-AwwLilMaggie
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

Wolfenrook

Try a google search bud, there are quite a few sites with very detailed instructions on how to do this, including setting a cookie so that the chosen style sheet stays selected.  Good luck though as I've yet to get one of the methods to work. lol.

Other than that, you might want to try entering into a dialog with Bloc, Koni or Mystica as they have all successfully used color changers in themes.

Wolfenrook
Thoughts are free, it's their consequences that often have a cost.

bloc

if you study Helios theme of mine, thats the one approach i used the most, but Simplicity theme also has one.

I can guide you trough..but depending a bit on what you need: a color-changer for all members or just for admin?

Gary

Thanks Bloc.

I've taken a look at the Simplicity theme and it doesn't include a separate images directory for each colour, I'd assume that it'd simple like:
var smf_images_url = "', $settings['images_url'], '/',$settings[theme_color],'"; or something to that effect?

Though any guidance is of course appreciated. :)

Quote from: Bloc on July 31, 2006, 07:38:29 AM
I can guide you trough..but depending a bit on what you need: a color-changer for all members or just for admin?
We'd like it for all members (but not guests).

-AwwLilMaggie
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

Gary

Thanks Bloc & Wolfenrook.

I've managed to get the changer for Admins working in Settings.template.php, but when I used the base code that was included in the Sitra theme for index.template.php it didnt work (even though I used the Sitra for the drop down in Settings.template.php).

Any suggestions?

-AwwLilMaggie
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

bloc

#5
I almost forgot this one. :)

The way you can do this - Sitra theme used a variation of it I think - is the following:

- open Settings.template and find:
function template_settings()
{
global $context, $settings, $options, $scripturl, $txt;

        $context['theme_settings'] = array(


- add under that this:
                array(
                        'id' => 'default_theme_color',
                        'label' => 'This is the default color if member haven\'t chosen anything',
                        'options' => array(
                                'blue' => 'Blue',
                                'red' => 'Red',
                                'green' => 'Green',
                        ),
                ),


That code will set a default color choice/styesheet if the member hasn't chosen one.


Next up:
- open index.template.php of your theme and find:
function template_init()
{
        global $context, $settings, $options, $txt;



- insert after:
if(!$context['user']['is_guest'] && isset($_POST['options']['theme_color']))
{
   include_once($GLOBALS['sourcedir'] . '/Profile.php');
   makeThemeChanges($context['user']['id'], $settings['theme_id']);
   $options['theme_color'] = $_POST['options']['theme_color'];
}


- then search for :
// The main sub template above the content.
function template_main_above()
{
        global $context, $settings, $options, $scripturl, $txt, $modSettings;


- ...and insert after:
if (isset($options['theme_color']))
   $mycolor = $options['theme_color'];
else{
   // Defaults.
   $options['theme_color'] = isset($settings['default_theme_color']) ? $settings['default_theme_color'] : 'red';
   $mycolor=$options['theme_color'];
}


That will read the deafult color you set and use that if the member hasn't chosen yet. It also sets a hardcoded default if you as admin haven't chosen anything yet. :) Next up:

- find this code:
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc2" />


- and replace with this:
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/'.$mycolor.'_style.css?rc2" />


Remember to name all you stylesheets on the form xxxx_style.css where xxx is color or name you choose.

Next up is finally to add the actual chooser code. it can be anywhere you like and it looks like this:
    if($context['user']['is_logged'])
      echo '
      <form action="', $scripturl, '" style="margin: 0px; margin-top: 10px;" method="post" class="smalltext"><select name="options[theme_color]" onchange="this.form.submit();">
        <option selected="selected" value="', $options['theme_color'], '">Use default</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        </select><br /><input alt="submit" type="submit" value="Change" /></form>';


And there you go. It should now switch stylesheets when you choose another color/name and it remembers that for members. Guests only see what you have set as "default" color, and do not see the chooser at all.

If you also want to change buttons thats quite possible, however a little more work is needed. Let me know if you need that too.

Gary

Thanks Bloc!

I put that batch of code in though in the code for settings.template.php you forgot to put a \ before the apostraphe causing Parse errors. But I fixed that anyway.

Quote from: Bloc on August 05, 2006, 03:52:24 PM
If you also want to change buttons thats quite possible, however a little more work is needed. Let me know if you need that too.
Yeah. Our buttons are all purple and obviously wouldnt go with other colours like red or green. :P

Actually, we have nearly all the images in purple, so it might be easier to just have an images directory for each colour. ;)

Thanks again.

-AwwLilMaggie
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

bloc

Then its actually very easy. First you create extra image folders like "images_purple", and make sure it has all the files that "images" has, in the right color of course. :)

The open index.template.php and find this code again(which you inserted earlier):
if (isset($options['theme_color']))
   $mycolor = $options['theme_color'];
else{
   // Defaults.
   $options['theme_color'] = isset($settings['default_theme_color']) ? $settings['default_theme_color'] : 'red';
   $mycolor=$options['theme_color'];
}

..just add this line under it:

  $settings['images_url'] = $settings['images_url'] . '_' . $mycolor;


All the images will get replaced this way. You could do just the buttons, but then the code will be more complex and need changing of several templates.

Wolfenrook

Nice one Bloc!  Just what I have been looking for for a while!

Wolfenrook
Thoughts are free, it's their consequences that often have a cost.

Gary

Yeah, its working.

Thanks a lot Bloc!

-AwwLilMaggie
Gary M. Gadsdon
Do NOT PM me unless I say so
War of the Simpsons
Bongo Comics Fan Forum
Youtube Let's Plays

^ YT is changing monetisation policy, help reach 1000 sub threshold.

farhaddad

Hi this is really nice

I only use 2 style sheets, i don't really want the drop down menu to, how can i make it one button just like the shrink/expand button, i mean to have 2 diiferent buttons lets say red and green, by default it's red style sheet and the button is green when i click this green button it should load the green style sheet and the button will change to be red  so i can click it again to get the red style back

thanks

bloc

Use a input button rather than a dropdown box. Like I do in helios:
         <input type="submit" value="brown" name="options[theme_color]">

farhaddad

Quote from: Bloc on August 12, 2006, 11:27:12 AM
Use a input button rather than a dropdown box. Like I do in helios:
         <input type="submit" value="brown" name="options[theme_color]">


thank you i saw this in your theme :-) but is there anyway to use one button rather using one for each i only have 2 css i want to switch between the two maybe java script or something something like the shrink / extend image

bloc

Its possible without javascript. Simply render one button, but check first the color, then change the button accordingly. Like:

if($mycolor == 'brown')
  echo ' <input type="submit" value="blue" name="options[theme_color]">';
else
  echo ' <input type="submit" value="brown" name="options[theme_color]">';

farhaddad

wow you are great  :D thank you very much

i've noticed that the form action is "', $scripturl, '" that means if i was displaying a topic and changed the color the form will take me back to the index page is there anyway i can get back to the same page i was in?

thanks again

bloc

It can be done..though not sure it works in every setup. Just replace:
     <form action="', $scripturl, '" style="margin: 0px; margin-top: 10px;" method="post" class="smalltext">

with
     <form action="', $scripturl, '?'.$_SERVER['QUERY_STRING'].'" style="margin: 0px; margin-top: 10px;" method="post" class="smalltext">

farhaddad

Quote from: Bloc on August 13, 2006, 03:35:59 AM
It can be done..though not sure it works in every setup. Just replace:

I envy SMF for having you, worked for me :-) thank you very much,

Red-Omni

hello ,
i have copied and pasted everything into the settings.templete and the index.templete
here is the error i get ... please help me out .

Parse error: syntax error, unexpected $end in .../Themes/default/index.template.php on line 709

yet there isnt any code on line 709

bloc

Most likely you got different code somewhere, than what I posted. The error is not necessarily in index.template, but show itself there.

Check that you indeed got it all in correct.

Red-Omni

everything seems to be correct ...

i was suppose to exactly copy and paste .. correct ?
i wasnt suppose to edit any of the lines or anything was i ?

Advertisement: