Advertisement:

Author Topic: Different stylesheets in one theme  (Read 44768 times)

Offline Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,317
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Different stylesheets in one theme
« on: July 30, 2006, 10:26:20 PM »
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

Offline Wolfenrook

  • Jr. Member
  • **
  • Posts: 297
  • Gender: Male
    • The Cottage
Re: Different stylesheets in one theme
« Reply #1 on: July 31, 2006, 07:34:36 AM »
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

  • Guest
Re: Different stylesheets in one theme
« Reply #2 on: July 31, 2006, 07:38:29 AM »
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?

Offline Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,317
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: Different stylesheets in one theme
« Reply #3 on: July 31, 2006, 08:55:57 AM »
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:
Code: [Select]
var smf_images_url = "', $settings['images_url'], '/',$settings[theme_color],'"; or something to that effect?

Though any guidance is of course appreciated. :)

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

Offline Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,317
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: Different stylesheets in one theme
« Reply #4 on: July 31, 2006, 03:30:30 PM »
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

bloc

  • Guest
Re: Different stylesheets in one theme
« Reply #5 on: August 05, 2006, 03:52:24 PM »
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:
Code: [Select]
function template_settings()
{
global $context, $settings, $options, $scripturl, $txt;

        $context['theme_settings'] = array(

- add under that this:
Code: [Select]
                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:
Code: [Select]
function template_init()
{
        global $context, $settings, $options, $txt;


- insert after:
Code: [Select]
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 :
Code: [Select]
// The main sub template above the content.
function template_main_above()
{
        global $context, $settings, $options, $scripturl, $txt, $modSettings;

- ...and insert after:
Code: [Select]
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:
Code: [Select]
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?rc2" />

- and replace with this:
Code: [Select]
<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:
Code: [Select]
    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.
« Last Edit: August 06, 2006, 03:45:24 AM by Bloc »

Offline Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,317
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: Different stylesheets in one theme
« Reply #6 on: August 05, 2006, 04:38:04 PM »
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.

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

bloc

  • Guest
Re: Different stylesheets in one theme
« Reply #7 on: August 06, 2006, 03:44:21 AM »
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):
Code: [Select]
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:
Code: [Select]
  $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.

Offline Wolfenrook

  • Jr. Member
  • **
  • Posts: 297
  • Gender: Male
    • The Cottage
Re: Different stylesheets in one theme
« Reply #8 on: August 06, 2006, 06:33:27 AM »
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.

Offline Gary

  • Lead Customizer
  • SMF Super Hero
  • *
  • Posts: 17,317
  • Gender: Male
  • So this is the luck of the draw...
    • Gazmanafc on Facebook
    • garygadsdon on LinkedIn
    • @Gazmanafc on Twitter
    • The Bongo Comics Fan Forum
Re: Different stylesheets in one theme
« Reply #9 on: August 06, 2006, 07:50:31 AM »
Yeah, its working.

Thanks a lot Bloc!

-AwwLilMaggie

Offline farhaddad

  • Jr. Member
  • **
  • Posts: 126
  • Gender: Male
    • Website and Logo Design
Re: Different stylesheets in one theme
« Reply #10 on: August 12, 2006, 09:29:18 AM »
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

  • Guest
Re: Different stylesheets in one theme
« Reply #11 on: August 12, 2006, 11:27:12 AM »
Use a input button rather than a dropdown box. Like I do in helios:
Code: [Select]
         <input type="submit" value="brown" name="options[theme_color]">

Offline farhaddad

  • Jr. Member
  • **
  • Posts: 126
  • Gender: Male
    • Website and Logo Design
Re: Different stylesheets in one theme
« Reply #12 on: August 12, 2006, 06:41:15 PM »
Use a input button rather than a dropdown box. Like I do in helios:
Code: [Select]
         <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

  • Guest
Re: Different stylesheets in one theme
« Reply #13 on: August 12, 2006, 07:34:42 PM »
Its possible without javascript. Simply render one button, but check first the color, then change the button accordingly. Like:
Code: [Select]
if($mycolor == 'brown')
  echo ' <input type="submit" value="blue" name="options[theme_color]">';
else
  echo ' <input type="submit" value="brown" name="options[theme_color]">';

Offline farhaddad

  • Jr. Member
  • **
  • Posts: 126
  • Gender: Male
    • Website and Logo Design
Re: Different stylesheets in one theme
« Reply #14 on: August 12, 2006, 08:19:56 PM »
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

  • Guest
Re: Different stylesheets in one theme
« Reply #15 on: August 13, 2006, 03:35:59 AM »
It can be done..though not sure it works in every setup. Just replace:
Code: [Select]
     <form action="', $scripturl, '" style="margin: 0px; margin-top: 10px;" method="post" class="smalltext">
with
Code: [Select]
     <form action="', $scripturl, '?'.$_SERVER['QUERY_STRING'].'" style="margin: 0px; margin-top: 10px;" method="post" class="smalltext">

Offline farhaddad

  • Jr. Member
  • **
  • Posts: 126
  • Gender: Male
    • Website and Logo Design
Re: Different stylesheets in one theme
« Reply #16 on: August 13, 2006, 01:55:28 PM »
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,

Offline Red-Omni

  • Jr. Member
  • **
  • Posts: 129
  • Gender: Male
Re: Different stylesheets in one theme
« Reply #17 on: August 15, 2006, 12:00:25 AM »
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 .

Code: [Select]
Parse error: syntax error, unexpected $end in .../Themes/default/index.template.php on line 709
yet there isnt any code on line 709

bloc

  • Guest
Re: Different stylesheets in one theme
« Reply #18 on: August 15, 2006, 02:11:04 AM »
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.

Offline Red-Omni

  • Jr. Member
  • **
  • Posts: 129
  • Gender: Male
Re: Different stylesheets in one theme
« Reply #19 on: August 15, 2006, 02:13:37 AM »
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 ?