Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Aiheen aloitti: sp3ctre - tammikuu 13, 2012, 02:50:49 AP

Otsikko: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 02:50:49 AP
Hi,

I have a theme that is great and works both fixed width or fluid based on what I set the container width to in CSS.

I would like to have a method where I could allow the user to have an option to choose between the two in their profile. Is there a mod for this? I have searched and I couldn't find one. The closest I got was a "snow" mod that allowed the user to toggle snow on or off. I guess this is really close to what I want (basically an extra CSS file that overrides the first, that the user can toggle on or off), but the mod didn't seen to work in v2 SMF.

Any thought on this? Seems like it would be a mod that makes sense, no?

Thanks
Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 13, 2012, 03:17:40 AP
You could do it really easily using the built-in theme variant system in 2.0. You'd just need to make extra css files (which would be really small if it's just a width change) and call them as a variant.

So, in index.template.php find this:

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = false;
}


Replace with:

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = false;
/* Theme variant array. */
$settings['theme_variants'] = array('fixed', 'fluid');
}


Then you'd need to make two css files with the following names and content:

index_fixed.css

#wrapper {width: 960px;}

index_fluid.css

#wrapper {width: 90%;}

That should work, assuming your theme has a div with an ID of wrapper controlling the width. If it's called something else, change the name to suit. This should create a select to choose the variants on the theme settings page in admin, and on the theme selection page in profile.

Mind you, it's been a while since I played with variants so I may have forgotten something. If I have, it'll be easy to fix. :D

ETA: Oh yeah and to save confusion, remove the line for width in the basic index.css.
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 03:20:15 AP
That's great, I will try that and report back... much appreciated :)
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 03:23:23 AP
I just looked and the bit you say to replace:

Lainaa$settings['require_theme_strings'] = false;

is actually set to 'true'... do I still replace it or add your code after it?
Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 13, 2012, 03:25:33 AP
Add after it. If it says true then it means your theme comes with custom language strings.

So you'd want:

/* Set the following variable to true if this theme requires the optional theme strings file to be loaded. */
$settings['require_theme_strings'] = true;
/* Theme variant array. */
$settings['theme_variants'] = array('fixed', 'fluid');
}


I acutally made a mistake earlier. Fixed now.
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 04:43:08 AP
Cool, it works... well sort of...

Couple of questions though... I initially tried just putting the wrapper CSS in the two new CSS files but when I did this all the CSS formatting seemed to disappear. The way I got around it was to copy the main index.css file into each of the new files and edit the fluid one. That's not how it's supposed to work though, right?

Second issue is it seems to look for some of theinmage files in a "_fluid" directory now. Is that right? Any way I can avoid that, as the only difference between styles will be the width, I don't need an entire new set of images (or a copy). No big deal if not though, this is not too important I guess.

Thanks for your help though, seems like this forum sortware is really quite flexible :)
Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 13, 2012, 04:57:56 AP
Lainaus käyttäjältä: sp3ctre - tammikuu 13, 2012, 04:43:08 AP
Cool, it works... well sort of...

Couple of questions though... I initially tried just putting the wrapper CSS in the two new CSS files but when I did this all the CSS formatting seemed to disappear. The way I got around it was to copy the main index.css file into each of the new files and edit the fluid one. That's not how it's supposed to work though, right?

Sounds odd, because I usually do multi themes this way: one main index.css file for all the stuff that doesn't change between variants, with the variant css files only containing the stuff that does change. That has always worked for me.

LainaaSecond issue is it seems to look for some of theinmage files in a "_fluid" directory now. Is that right? Any way I can avoid that, as the only difference between styles will be the width, I don't need an entire new set of images (or a copy). No big deal if not though, this is not too important I guess.

Thanks for your help though, seems like this forum sortware is really quite flexible :)

Yes it would do that, because of the way the images are called. Ok, try this: go back to one main index.css and the two little ones (wrapper stuff only) but change the code in index.template.php as follows:

// The ?fin20 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'], '/css/index', $context['theme_variant'], '.css?fin20" />';


Change to:

// The ?fin20 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'], '/css/index.css?fin20" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/index', $context['theme_variant'], '.css?fin20" />';


I think that was the part I  forgot. :D
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 05:08:35 AP
aha, getting there now, it seems to be almost working...

What I still don't quite get is why it is looking for some images called from index.css in the _fluid folder yet other images it is not? I could understand if all the images broke but I am only spotting one or two, and the only thing in the two custom CSS files is the wrapper?

Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 13, 2012, 05:18:41 AP
It's because of things like this in the templates:

// If the board or children is new, show an indicator.
if ($board['new'] || $board['children_new'])
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'on', $board['new'] ? '' : '2', '.png" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" />';


Those sorts of images are usually changed per variant in multi themes. Ok, make two more folders inside the theme's images folder. Name them _fixed and _fluid. For any images that are not being called now, copy them to both of those folders. That should sort it.
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 05:26:13 AP
Lainaus käyttäjältä: Antechinus - tammikuu 13, 2012, 05:18:41 AP
It's because of things like this in the templates:

// If the board or children is new, show an indicator.
if ($board['new'] || $board['children_new'])
echo '
<img src="', $settings['images_url'], '/', $context['theme_variant_url'], 'on', $board['new'] ? '' : '2', '.png" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" />';


Those sorts of images are usually changed per variant in multi themes. Ok, make two more folders inside the theme's images folder. Name them _fixed and _fluid. For any images that are not being called now, copy them to both of those folders. That should sort it.

cool, thanks, I did that and so far it seems like it is onlt the "collapsible section" icon that it is looking for in _fluid... I just wondered why it was just that one.

Thanks for your help, it's working spot on now.... :)
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 13, 2012, 02:23:51 IP
ok, it seemed to be working but I got someone to test and it seems like it is not behaving... Here is what happens:

I have the site working with the "fluid" option
I go into the profile (it says fixed is ticked already) and select "fixed".... save it and it doesn't change.
I go back into profile and select "fluid" then immediately reselect "fixed" and it changes to fixed.

It seems that whatever option I have selected it always thinks I have "fixed" selected, so when I go in and try to change it, nothing happens because it thinks I am already on "fixed". When I manage to get it onto fixed and go to select "fluid" it works fine.

Very odd situation... any ideas?
Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 13, 2012, 03:34:51 IP
Hmm. I'll duplicate this on local host tonight and take a look. :)
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 14, 2012, 06:37:41 AP
Been wrestling with this all morning and can't figure it out. I'm guessing it is a simple issue of the theme switching screen not correctly detecting what theme you are on? I'm not sure how that works though, where is that stored? If the theme switching dropdown had a default option of "choose" then whichever option you selected should actually do something, or I may be on the wrong track there... I guess with there being a tick on the dropdown that my first theory of it simply incorrectly detecting the current theme option is the issue.

Any thoughts?
Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 14, 2012, 04:13:24 IP
Aha. I should read docs to refresh my memory sometimes. ::)

You need this bit added to ThemeStrings.english.php too:

$txt['variant_fixed'] = 'Fixed width';
$txt['variant_fluid'] = 'Fluid width';


Reference: http://wiki.simplemachines.org/smf/Creating_Multi-Style_Themes

Once you have that added, if you go to index.php?action=theme;sa=pick and select the variant you want, then select "Use this theme", it works as it should.

At least, it works fine on the default them on a vanilla installation. If there are still problems with your custom theme, attach the relevant files and I'll take a look.

Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 15, 2012, 09:55:40 AP
Hi, I already added those lines in and it still wrongly detects that I am on the fixed option even when I'm not. Do you know what code it uses to store the option you are on? What files do you want me to send?

Thanks
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 15, 2012, 02:26:50 IP
Looks like it is a bug... in case anyone else is having a similar issue, here is the solution:

http://www.simplemachines.org/community/index.php?topic=458739.0

Thanks for all your help, Antechinus  :)
Otsikko: Re: How to add a CSS toggle
Kirjoitti: Antechinus - tammikuu 15, 2012, 03:17:10 IP
Does that solution work for you?
Otsikko: Re: How to add a CSS toggle
Kirjoitti: sp3ctre - tammikuu 15, 2012, 03:19:12 IP
Lainaus käyttäjältä: Antechinus - tammikuu 15, 2012, 03:17:10 IP
Does that solution work for you?

Yes, worked fine thanks :)