Bootstrap [responsive, mobile-ready]

[Kyttias]

Do not use the theme switcher for a live site.

Do not use the theme switcher on a live site.

Do not use the theme switcher on a live site.

It exists merely as a tool to preview different Bootstrap themes on your website. I shouldn't have to explain why this is a bad idea. Things shouldn't flicker if you don't use it. Things flicker because it loads the default css first, then whatever one is selected on the switcher. On every. Single. Page. Load. Don't use it, it's for preview decisions only!

If you were wanting to use a different Bootstrap color theme, then you'll want to change the link to the Bootstrap css file in header.tpl. It's this line:

 <!-- / / / / / / / / / BOOTSTRAP 3 -->
 <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" title="bootstrap">

And it can be changed to use a different color theme. So once you've chosen a color theme from the theme switcher that you like, I 100% recommend deleting the theme switcher file entirely (themeswitcher-kyt.js), removing the line for it at the bottom of template.tpl, and replacing the Bootstrap css you are linking to in the header.tpl.

Either change it to file hosted on a CDN (this link should have all the ones from the theme switcher and maybe more):

 <!-- / / / / / / / / / BOOTSTRAP 3 USING "SANDSTONE" -->
 <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/sandstone/bootstrap.min.css" rel="stylesheet" title="bootstrap">

Or to your own in the theme folder (you can build one here, but I think you got that covered):

 <!-- / / / / / / / / / BOOTSTRAP 3 USING YOUR OWN BOOTSTRAP-->
 <link href="{$home}{$temp}{$theme}/NAME_OF_YOUR_BOOTSTRAP.css" rel="stylesheet" title="bootstrap">

If you want to edit anything else, such as the TEMPLATE itself, which is in style_kyt.css, then that's beyond the scope of my tech support, so make a separate css file for it, use it last in the header, and leave everything else intact.

It should look like this:

PHP Code:

{$header->loadStyle("{$home}{$temp}{$theme}/style-kyt.css")}
{$header->loadAdditionalStyle()}
<link href="{$home}{$temp}{$theme}/YOUR_CUSTOM_NON_BOOTSTRAP_CSS.css" rel="stylesheet"> 


Or this:

PHP Code:

{$header->loadStyle("{$home}{$temp}{$theme}/style-kyt.css")}
{$header->loadAdditionalStyle()}
<style> /* YOUR CSS HERE IF IT'S SMALL */ </style> 


Please note that {$header->loadAdditionalStyle()} is empty. It is empty in ALL of the templates provided with Mysidia. I don't know what it does. Maybe it works like you think it does, maybe it doesn't, but you absolutely don't have to put anything in it. I recommend not.

And, in the end, I can only say this: DON'T USE THE THEME SWITCHER ON A LIVE SITE. Mostly because of the flickering issue.

--

To be honest, the real reason I'm dropping support for the theme switcher is because the directions just aren't clear for adding custom code. I don't think you're doing anything particularly wrong, just that the code is being told "if the user clicks on an element with a class of wubbie..." but none of the html you added has a class of wubbie. None of the examples have a class name that corresponds with their theme name, but then again, they didn't need one when I made the theme switcher.

I'm not active enough to pinpoint the exact problem, and instead I provided alternatives that don't use the theme switcher. Maybe this could work, but maybe it just won't:

 <li><a href="#" class="wubbie" rel="wubbie"><i class="icon-fixed-width icon-pencil"><\/i> Wubbie Forest &nbsp;<\/a><\/li>