Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Aiheen aloitti: AK49BWL - heinäkuu 25, 2011, 05:07:45 AP

Otsikko: CSS change without installing/duplicating a theme?
Kirjoitti: AK49BWL - heinäkuu 25, 2011, 05:07:45 AP
SMF 1.1.14, using Babylon as the default theme.

I searched for a while and couldn't come up with what I was looking for, so I'm hoping maybe I can get some help here; I want to create additional CSS pages with different color schemes for my members to select and use, but as far as I can tell, the only way to do this is to duplicate the current theme and change the new CSS page to show the new color scheme. This is not optimal, as I don't want so many duplicated files for what is just an identical theme with different colors.

So is there any mod currently that will allow my users to simply select a different CSS page under the same theme, or am I going to have to dive into the code and make it work my way.... :o
Otsikko: Re: CSS change without installing/duplicating a theme?
Kirjoitti: MrGrumpy - heinäkuu 25, 2011, 11:06:44 AP
There is no mod to make a theme have multiple color options - best suggestion would be to download a multicolor theme avilable on the theme site for your version and see how it works and use that coding to create your own multicolor theme.
Otsikko: Re: CSS change without installing/duplicating a theme?
Kirjoitti: AK49BWL - heinäkuu 25, 2011, 11:14:33 AP
That's what I figured. Okay, thanks :)
Otsikko: Re: CSS change without installing/duplicating a theme?
Kirjoitti: MrGrumpy - heinäkuu 25, 2011, 11:25:55 AP
I do them for 2.0 and they aren't hard just a little time consuming creating the different css files and images.
Otsikko: Re: CSS change without installing/duplicating a theme?
Kirjoitti: AK49BWL - heinäkuu 25, 2011, 11:32:51 AP
Yeah all I'm doing is changing the colors, keeping the same images and layout... I'm good with SMF's CSS page so the creation of the additional color schemes is the easy part. Getting the schemes selectable by members in an easy fashion will be the interesting part :)
Otsikko: Re: CSS change without installing/duplicating a theme?
Kirjoitti: MrGrumpy - heinäkuu 25, 2011, 12:27:22 IP
This theme seems to have a straight forward enough color changer code http://custom.simplemachines.org/themes/index.php?lemma=2226

The code for the color changer is in the index.template.php, some parts being in the upper section of the file


// Any color set by user?
if (isset($options['theme_color']))
$settings['theme_main_color'] = $options['theme_color'];

// If not set, or if not allowed to set
if(!isset($options['theme_color']) || (isset($settings['allow_color_change']) && $settings['allow_color_change'] == 'no'))
{
// Defaults.
$options['theme_color'] = isset($settings['theme_main_color']) ? $settings['theme_main_color'] : '';
$settings['theme_main_color'] = $options['theme_color'];
}




// The ?fin11 part of this link is just here to make sure browsers don't cache it wrongly.
echo '
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?fin11" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style_' , $settings['theme_main_color'] , '.css?fin11" />
<link rel="stylesheet" type="text/css" href="', $settings['default_theme_url'], '/print.css?fin11" media="print" />';



// We'll have to use the cookie to remember the header...
if ($context['user']['is_guest'])
{
$options['collapse_header'] = !empty($_COOKIE['upshrink']);
$options['collapse_header_ic'] = !empty($_COOKIE['upshrinkIC']);
}




The actual buttons for the color changer lower down the file.

// Colors..!!

echo '
<table cellspacing="0" cellpadding="3" border="0" align="center" width="100%">
<tr>
<td width="28%" valign="middle" align="', !$context['right_to_left'] ? 'right' : 'left', '">

                       <form action="" method="post">
<img src="', $settings['images_url'], '/colors/style.gif" border="0" alt="EDIT COLOR STYLE" /><br/>

<input id="default" type="submit" value="" name="options[theme_color]"/>
<input id="style_00" type="submit" value="00" name="options[theme_color]"/>
<input id="style_05" type="submit" value="05" name="options[theme_color]"/>
<input id="style_10" type="submit" value="10" name="options[theme_color]"/>
<input id="style_15" type="submit" value="15" name="options[theme_color]"/>
</form>

</td>
</tr>
</table>';




Then theres just the css files to sort out - that theme is using numbers as the css names, 00, 05, 10, 15 but you can just change them to color names as long as you remember to change them in the index.template.php and on the css file names, make sure you leave the style.css in there as your default color. The css for the actual color changer buttons is at the bottom of style.css, don't forget to add that in your style.css or your buttons will be a little broken  ;)

The actual buttons are images contained in a folder named colors in the images folder, the calls for which is in the style.css code.

I believe this is all the coding/changes you need to do but i am very rusty on the 1.1.x branch of smf as I have been using 2.0 since it's beta versions.

Just to cover my butt here it isn't frowned upon to use code from other themes in your own personal theme but if you was to release a theme with that code in it you would need the theme authors permission.