Bootstrap [responsive, mobile-ready]

[Kyttias]

Bootstrap
* / / / / / / / Version Notice *
I'm running this on Mysidia v1.3.4 - however, I can't think of too many reasons why it wouldn't be backwards compatible with older versions, so it's worth a shot?
* End Notice / / / / / / / *

Features: Brings you Bootstrap (http://getbootstrap.com/).
No editting of php files. (It's done with jQuery!)
CDN hosted CSS and jQuery, for faster cache load times.
Bootswatch.com (http://Bootswatch.com/) theme changer (thirteen themes)!
http://fc08.deviantart.net/fs71/f/2014/031/3/b/gif_by_kyttias-d74jv5i.gif
Create your own theme easily at StyleBootstrap.info (http://StyleBootstrap.info/).
Responsive, mobile-friendly design. ( Click here to check that out! (http://fc06.deviantart.net/fs71/f/2014/031/d/3/mobilefriendly_by_kyttias-d74jv4m.png) )
Fully commented code.
Open source and license free - all of it. No credit necessary.


Download: http://sta.sh/0ny9dwq3t9o


* / / / / / / / Update *
FEB.04.2014:
- 99% of css related things moved from js-kyt to style-kyt
- sidebar login inputs no longer clip out of the sidebar
- all form input fields are now fully mobile ready
- available adoptables table narrower on desktops
- all table cells are now vertically aligned
- added first optional mod
FEB.02.2014:
- profile tab bug fix and prettification
- classes added to input, textarea, and selection form elements
- classes added to table elements
- page flicker fix added
JAN.31.2014:
- launch

* / / / / / / / To Do *
- swap out icons in Manage Adopts, Trade Center, Members List, etc
- swap out social networking icons in the Profile
- remove MSN from contact info in the Profile, add Tumblr?
- remove carets entirely, at least until I can place them only on drop downs
- wrap Search form elements in .form-groups divs

* / / / / / / / Known Bugs *
n/a


Bugs will be fixed in the next major release. Until then, check back here and attempt replacing your js-kyt.js with the above before reporting a bug. But please do report bugs!


Installation
To install this theme, all you need to do is upload one folder inside your templates folder. No edits to Mysidia's PHP class files are required, this is done for you client-side via jQuery.

The theme folder is called 'Bootstrap' and it belongs in templates/. So, for example, the path to your template.tpl will be templates/Bootstrap/template.tpl.

Admin side:
Once you have the files in place, go to Admin CP and down to Themes and install the theme there. Enter the theme name (Bootstrap) and folder (Bootstrap). Leave the header, body and style part all blank. (In Mysidia v1.3.4 you must click on the checkbox beside 'The style has been uploaded to the site, and is pending for installation' at the very bottom of the theme creation form. Not doing so will wipe the template files you just put in place.) Submit!

It can now be found in your list of themes that members can choose from. (http://YOURSITEHERE/changestyle/)

Please note:
You will NEED to go into Links > Edit Links and make sure your top-level categories are pointing to pages other than index, as the drop down menus have been removed for devices smaller than tablets! Make pages for your top-level categories that include all relevant links, so users on smaller screens can navigate all parts of your site. You can safely remove the link to 'Home' as it is redundant and will inaccurately display a drop down caret even though it has no drop down children.

Setting it as the default Mysidia template:
If you would like to set it as your main theme later, in the Admin CP go down to Settings > Basic Settings and this will open up a page for Global Site Settings. Write 'Bootstrap' in the Default Theme input box and hit 'Change Global Settings' to save it. If you'd like to remove people's ability to select other Mysidia themes, in the Admin CP go to Links > Edit Links and it will open up the Site Links Manager. All you have to do is remove the link that would take visitors to changestyle.

Setting default Bootswatch theme:
The theme changer remembers what the user's preference is, but if YOU have a preference for the initial look of the site, read the commentary in the header.tpl.

Disabling the Bootswatch theme switcher:
Don't want your users to be able to change the theme on their own? Remove the link to themeswitcher-kyt.js at the bottom of the template.tpl - and/or if you're sure you'll never need it again, just delete themeswitcher-kyt.js. Consider only removing themes just the themes you hate from the list (the list must remain all in one line, sorry). (Said list is also populated within the themeswitcher-kyt.js - if you need help, don't be afraid to contact me.)

Adding your custom StyleBootstrap.info (http://StyleBootstrap.info/) theme:
If you want it as your site default, again, view the the header.tpl for instructions. (( If you want to add it to the Bootstrap theme switcher, open up themeswitcher-kyt.js and read the commentary there for instructions. edit: I AM NO LONGER SUPPORTING THE THEME SWITCHER WHATSOEVER, DELETE IT IF IT CONFUSES YOU. ))

Further Implentating Bootstrap
Visit the official Bootstrap site for documentation on other cool features you can add to your page's content.

Read up on Bootstrap's:
CSS classes and helpers (including a grid system): link (http://getbootstrap.com/css/)
Components (wells, panels, thumbnails, etc): link (http://getbootstrap.com/components/)
and Javascript (tooltips, modal boxes, dismissable notices): link (http://getbootstrap.com/javascript)

[squiggler]

This is amazing! Thanks!

[Hall of Famer]

Ditto to what Squiggler said, its amazing and thats no doubt about it. This must be the first responsive theme/template we've ever had on this community. ^^

[Abronsyth]

This is absolutely brilliant! I'll be testing it out (been needing a new theme anyways). I've been dying for a responsive theme lately XD

Thank you so much for sharing this with us!


Edit;

Installed and I must say it does look good! I love the clean design of Bootstrap! However, there is a problem where the buttons on a users' profile become disabled. I'm assuming there's some interference in there...

[Kesstryl]

Me too me too!

[Kyttias]

Installed and I must say it does look good! I love the clean design of Bootstrap! However, there is a problem where the buttons on a users' profile become disabled. I'm assuming there's some interference in there...

I've not gotten to the profile page yet, it's still using whatever came standard with Mysidia. Upon closer inspection, it appears as though the profile page is using a class that Bootstrap uses: the ul has a class of 'nav'. I can remove it with jQuery, but the tabs still may not work. I'll dynamically rewrite the entire tab system to use Bootstrap's. Sorry about this!

I'll immediately work on the profile page, thanks for the bug report!

edit: Manually fixing this bug is unnecessary now, just download the newest release!

[Kyttias]

* / / / / / / / Update *
FEB.02.2014:
- profile tab bug fix and prettification
- classes added to input, textarea, and selection form elements
- classes added to table elements
- page flicker fix added

edit: newer version released

[LucasA33]

This is absolutely amazing! I've wanted bootstrap for this for a while and after many attempts just gave up.

Thank you very much!

[Abronsyth]

Awesome! All is working well now :)

It's such an excellent theme, I love the clean, easy to use look. My sister tested it on her iPhone as well, and it functions great on there as well!

Love responsive themes~

[Kyttias]

This is absolutely amazing! I've wanted bootstrap for this for a while and after many attempts just gave up.

Thank you very much!

Sure, sure, no problem. No credits are necessary so go ahead and take it and build on it. At the core, all I want to do is provide a framework that meshes Bootstrap with the Mysidia defaults. It'll recognize any table or input and automatically add a class to it. At that point, you won't even have to look up Bootstrap's classes even on custom pages (at least not for things like tables, inputs, and buttons). Obviously there's still a lot more cool stuff Bootstrap has to offer.

People should definitely build themes on TOP of this, and then distribute them here, if they like. I want this to be partner to any theme builder who wants Bootstrap as part of their theme. By itself, Bootstrap will make any site look at least 30% cooler, but there's a lot of room to expand on that. I don't want to impose any features someone may not want to use. It's very easy to overwrite Mysidia's core code with jQuery, perhaps even too much. I don't want to overstep and assume what features people want, so eventually progress will halt on my Bootstrap theme, and I'll start a specialized version.

And while I'm working on the specialized version, I should be able to create mods specifically meant for a Bootstrap theme. So if someone wants, say, a 150px image underneath their navbar (won't scroll with it, of course), I'd be to go "here just add in this code right over there" and then, voila, people can pick and choose.

[IntoRain]

Oh wow, nice job with this! Thank you!!

[Kyttias]

* / / / / / / / Update *
FEB.04.2014:
- 99% of css related things moved from js-kyt to style-kyt
- sidebar login inputs no longer clip out of the sidebar
- all form input fields are now fully mobile ready
- available adoptables table narrower on desktops
- all table cells are now vertically aligned
- added first optional mod*

* / / / / / / / To Do *
- swap out icons in Manage Adopts, Trade Center, Members List, etc
- swap out social networking icons in the Profile
- remove MSN from contact info in the Profile, add Tumblr?
- remove carets entirely, at least until I can place them only on drop downs
- wrap Search form elements in .form-groups divs

* / / / / / / / Known Bugs *
n/a

* / / / / / / / Mods *
*There is now an AVAILABLE MODS file where I will be placing some optional additions specific to this Bootstrap template. All you have to do is copy over the ones you want to the new mods-kyt.js file.

The first one is a mod that will make Adoptables on the Stats page (top 10 and random 5) smaller. No smaller than 50% of the table cell on any device, however. Because some of you have small adoptables already, you may have absolutely no interest in resizing them, especially if they're pixels. For anyone who has large adoptables, they might be interested in this to save space. (If asked I will release this as a general Mysidia mod, as well.)

[Hall of Famer]

Looks like you are making a good deal of progress lately, congratulations. I wonder what do you mean by swapping out icons for manage adopts, trade center, members-list and social networking. You have better and more suitable icons to replace these? Or are you just removing them for some reasons?

[Kyttias]

Looks like you are making a good deal of progress lately, congratulations. I wonder what do you mean by swapping out icons for manage adopts, trade center, members-list and social networking. You have better and more suitable icons to replace these? Or are you just removing them for some reasons?

Cleaner ones. Some of them don't look so hot on darker backgrounds (loose pixels around the edges). If I have to replace one or two, I might as well put in a whole new matching set.

[Hall of Famer]

I see, sounds interesting. Maybe I will include 'bootstrap' in Mys v1.4.0 as one of the default themes for user to pick(like 'elements' and 'green' in Mys v1.3.x, although the official default is 'main').

[LucasA33]

Yeah, it'd be good to implement it officially IMO, since Bootstrap is really an amazing thing.
Seriously, good job OP.

[Kesstryl]

*thumbs up* to officially including this in 1.4.0! Responsive templates are necessary in today's online world as more people are using smartphones and tablets. This will keep Mysidia modern for a long time.

[Pear]

It looks nice! c: I really love how simple it is<3 c:

[pachoofoosh]

Absolutely amazing, thank you so much for this! :happycbig:

[Infernette]

I was wondering if anyone knew how to get the current time to show up in the right corner of the navbar (and possibly an image that changes with this time?).

This template appreciated- I've been testing this on my site all day and I love it :3

[Kyttias]

Both of these tasks can be done with a bit of Javascript. ^w^~

html - This goes just after the list of links ends, but before the end of the navbar.
<span class="navbar-right timeboth"></span>

javascript/jquery - This can be included near the bottom, just before the end of the body INSIDE <script> </script> tags.
var now = new Date();
var hrs = now.getHours();
var img = "";
var a_p = "";

if (hrs < 12) { a_p = "AM"; }
else { a_p = "PM"; }
if (hrs === 0) { hrs = 12; }
if (hrs > 12) { hrs = hrs - 12; }

var min = now.getMinutes();
if (min < 10) { var min = "0"+min; }
var time = hrs + ":" + min + " " + a_p +" ";

if (hrs > 0) img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if (hrs > 6) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if (hrs > 12) img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if (hrs > 17) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if (hrs > 22) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

// If you want to use the time + a small image, use a class of "timeboth":
$(".timeboth").html(time+"<img src="+img+">").css({"color": "#fff", "padding": "15px 0 15px 0"});

// Any element with a class of "time" will be filled with the time:
$(".time").html(time);

// Any element with a class of "timeimg" will get its image:
$(".timeimg").html("<img src="+img+">");



I think you can get the jist of what's going on if you stare at it enough. ovo/ Right now it's got the same image displaying for everything, of course, but you can see where to change it from the examples above (as you can probably guess, the basis is military time, yet I've hacked the date to read as AM/PM).

A css fix has been added to the class of "timeboth" with a bit of jQuery to align it with the links of the Bootstrap header, but this fix has not been applied to "time" and "timeimg" in case you want to use those elsewhere. Feel free to copy that fix to the other two, imitate the format, or make css amends in an actual stylesheet. (I wasn't sure whether you wanted to use these separately or not. For all I know, you may want to change your entire header to a sunrise/sun/sunset/moon based on the time of day!)

Check out this jsbin (http://jsbin.com/xunedelu/1/edit?html,js,output) I've made for a working example.

Keep in mind that this code is a mix of both Javascript and jQuery (for convenience). The Bootstrap theme comes bundled with jQuery already, anyone who doesn't have it will have to include a link to prior to inserting a script that requires it.

To anyone staring at this and going "wow that's neat" - yes, getMonth(); and getDate(); exist as well (and for full homework, see how the entire Date(); object in Javascript is constructed (http://www.w3schools.com/jsref/jsref_obj_date.asp)).

On a final note, the data received is only as current as the page load. So it will display information based on the time the page was loaded, and pulls it's time directly from the user's computer, and not the server. It will be up to the script creators to make something accurate to server time that a user cannot change simply by messing their computer clock. It's good for visual effects, but I wouldn't rely on it to do much more than that. And unlike server side code, anyone can view the source of the page and view its Javascript - so if you're hiding promo codes in images, someone could easily find them all.

It's also theoretically possible to pull data on the moon phase...... but I don't really feel like going into that. >_o

[IntoRain]

If you want the php version to keep doing it like what you have in Creche: http://stackoverflow.com/questions/6621572/how-to-get-date-and-time-from-server

After getting the server time, do a smarty assign like $mysidia->template->assign("time",$variableYouCreated), this makes it possible to use the variable {$time} in the template.tpl (just like {$sidebar} or {$menu}!) inside the tags Kyttias has mentioned.
Or like this http://www.smarty.net/docs/en/language.modifier.date.format.tpl#idp6286592

[Kyttias]

It's definitely smarter to do it with PHP if for any reason it has to do with promo codes, for obvious security reasons! The best designed sites flawlessly integrate beauty with purpose. It's nice to know Smarty has a built in function for server time! Definitely would have saved me half the effort last night.

- On what file does the smarty assign need to be made?
- To get an image to appear a specific time of day, but not display the time, I would still need at least this in Javascript:
var now = new Date();
var hrs = now.getHours();
var img = "";

if (hrs > 0) img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if (hrs > 6) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if (hrs > 12) img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if (hrs > 17) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if (hrs > 22) img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

// Any element with a class of "timeimg" will get its image:
$(".timeimg").html("<img src="+img+">");
- I'd love a quick lesson on how to format PHP for this instead. ovo~ It should be nearly the same? (There's a bit of shortcutting above as far as format goes, but I don't know how chill PHP is with forgoing conventional brackets.) So, safely, this would be the basic start, right? What would the next steps be, to make showing an image be as convenient showing the time like the Smarty assign?


$t = date("H");

if ($t>"0") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After midnight
if ($t>"6") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 6am
if ($t>"12") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After noon
if ($t>"17") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 5pm
if ($t>"22") { echo "<img src='http://static.jsbin.com/images/jsbin_16.png'>"; } // After 10pm


I'd like the end result to be as easy as going {$timeimg}? (I'm learning, I like this!) I think it needs to go in function (object?) that the smarty variable will be assigned to read the outcome of??

[Infernette]

It works extremely perfect *_* Thank you so much, I even got it to display the server time by modifiying the script just a little.

This theme is awesome, btw, thanks for all the hard work :D

[IntoRain]

- It can be used on any file through $mysidia->template->assign(), as long as you declare mysidia ($mysidia = Registry::get("mysidia")). I've been using most assigns in class_template though, in assignTemplateVars() function, or in class_frame, but that's personal choice I guess. I chose those two since they are always loaded for every page

- You can also do an assign for the image link and then in the template use it wherever you want, like:

//in class_template

//you can use any other date function you wish xD
$now = new DateTime();
$hrs = $now->format('G');
$img = "";

if ($hrs > 0) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After midnight
if ($hrs > 6) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After 6am
if ($hrs > 12) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After noon
if ($hrs > 17) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After 5pm
if ($hrs > 22) $img = "http://static.jsbin.com/images/jsbin_16.png"; // After 10pm

$this->assign("timeimg",$img);


//in template.tpl or header.tpl, wherever you want it
<img src={$timeimg}>

You can assign both the time and the image at once like this if you wish. Of course, it will only refresh with a page refresh xD

- PHP is pretty much normal with brackets, if the IF condition only has one line, you need no backets, like in Javascript ^^

[Kyttias]

Thankyou, that makes so much more sense. I hadn't had breakfast yet, my brain was in a fog. ^^

I added the code above into inside of the function assignTemplateVars(), which exists inside class_template.php, and it worked perfectly. My life suddenly got worlds easier.

[Missy Master]

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!

[Missy Master]

Utterly brilliant. WOW. Thank you so much, I just installed this and it's incredible!!

[coolgem923]

As many many people before me have said.. THIS THEME IS AMAZING! I love Bootstrap and having it made into a theme for Mysidia Adoptables is just awesome!

[coolgem923]

This is amazing! :BIGO:

I found a bug though, on mobile devices submenus aren't present.

[Kyttias]

No, they're not present. On the first post I explained you'll need to make pages for each top level category and link to them. You'll have to make these pages yourself, and they should contain the same content as the submenus. It's only as mobile friendly as you make it.

[MikiHeart]

I couldn't get the style resource you posted to work properly, it didn't give the entire css.
I did however, find this website which I thought was useful.

http://www.lavishbootstrap.com/

My website is set on an island, so after searching around for the right image that gave a good palette, I ended up with a pretty nice style for the bootstrap theme.

[Abronsyth]

Hey, Kyttias, I know you're busy, but when/if you have the chance I could use some suggestions!

For some reason every now and then my theme will sort of glitch and the button arrows for the drop down will, well, drop down below the link title. Not a major issue, but it doesn't look great- screenshot (http://i.imgur.com/iFgVCrS.png)

Any ideas?

[Kyttias]

Definitely something that can be fixed with css, but I wonder why it only happens 'once in a while'? If I had a direct link I would just right click on the area when it's happening and hit 'inspect element' on the browser's context menu and examine what's going on there -- with the css. It looks as though the minimum width for those areas need to be wider.

[parayna]

I have a question about editing the bootstrap that you provided in the file! XD I made a fresh install of the bootstrap theme and haven't actually edited anything yet (well, I have, but I undid everything after because I didn't like it, etc. XD). I need help with making everything line up properly though... on the shop page that you helped me with originally Bootstrap kind of breaks it XD I'm not sure where to go to edit it so that everything fits better. I have spent the past few hours tinkering with the code in the Bootstrap file and the class_itemshop file but can't fix it. >.< Also, the tooltips don't work properly.

It looks like this:

http://i1346.photobucket.com/albums/p696/parayna/screenie_zpsujaextlp.png

I'm also wondering if there are any good Bootstrap tutorials that I can use to change the layout. I checked out the ones on the first post but I'm not sure how to use the info XD (That's also why I'm asking here about the layout and tooltips as I didn't understand what was on the links about them XD)

[Kyttias]

Bootstrap is a css theme but not really a layout. Yes, I made a layout, and you can change it. I'd advise you to use the information in the links, because the only thing I can do is tell you to do is read how to use Bootstrap (http://getbootstrap.com/css/) from the original site. All the example code is there - html elements and the exact classes they need on them. Most of the other links I gave you are just ways to create themes - which are just arrangements of color and different sized borders, radius amounts, fonts choices, etc.

As for the tooltips not working, the thread you got them from (http://www.mysidiaadoptables.com/forum/showthread.php?t=4741) informs you:
You now have all the necessary components for tooltips. You now also have jQuery, for future reference. If you already had jQuery, say, at the end of your </body> in your template.tpl (and if you have Bootstrap, you do), move the scripts there instead (but go ahead and leave the css in the header). These scripts must always come after your jQuery installation.

That is to say, if you have Bootstrap you must have jQuery in the header file and not the end of the template file. You also cannot have two. Neglecting to have it at the top or having more than one would cause issue. I don't know what your exact problem is. That said, Bootstrap also comes with built in tooltips, so if you'd rather rewrite the html completely, look into that (http://getbootstrap.com/javascript/#tooltips).

On a final note, be careful when rewriting the shop files. I advise getting a text editor meant for code that has syntax highlighting, so you can visually see that the code is being closed correctly. Double quotes " , single quotes ' , and commented out quotes \" will all need to be used at different times and locations and they're the bane of even an advanced coder's day. Knowing what to use where and when is difficult, so I wish you luck.

I wish I had more time to offer help. Good luck! :happyc:

[parayna]

OK, thanks a lot! ^_^ I started college today and I went into the library and oh my lord the amount of coding books I found o.o There were so many........ o.o I got out one on CSS and HTML (even though I'm actually not bad at them because I had lessons at Secondary school before we chose what subjects to do) and I saw there were also AJAX ones, PHP ones, JQUERY ones, Javascript... and quite a few with multiple topics in them (like PHP, MySQL, and Ajax together). I'm definitely going to make use of those resources over the next, like, 2 years... although I have started reading the CSS one (it's CSS: The Definitive Guide 3rd Edition by Eric A. Meyer) and I actually already know all the info I've read so far XD I can't wait to start the HTML one after, as well. But I will also check out the PHP ones later on.. so I now have greater resources at my disposal!

It's going to be a huge help! XD And if I can't get Bootstrap to work to my liking, I have a solid idea for what I want to achieve with the normal CSS styling (that is for the first time an actual image in my head of what I wish it to look like). Now that I have a plan, I can hopefully do some of these things myself instead of always asking for help at all hours of the night when I am struck with an idea... >.> Which is what happened last night because my brain wouldn't shut off when I was supposed to be sleeping because all I could think about was coding sequences for CSS and a few basic PHP lines I remembered... not helpful when I had to have my first day at college today D: But anyway... thank you! XD

(If you can't tell I'm really excited right now lol OwO)

[SapphirePhoenix]

This is totally awesome!

[SapphirePhoenix]

Please note:
You will NEED to go into Links > Edit Links and make sure your top-level categories are pointing to pages other than index, as the drop down menus have been removed for devices smaller than tablets! Make pages for your top-level categories that include all relevant links, so users on smaller screens can navigate all parts of your site. You can safely remove the link to 'Home' as it is redundant and will inaccurately display a drop down caret even though it has no drop down children.

I have changed the 'link text' of the top level categories to different links of the site. Does the links are still supposed collapse? They didn't show up for mobile...

[Kyttias]

No, unfortunately, the idea is to create a 'homepage' for each top level category that will contain all the necessary links therein, and people on mobile will navigate the site that way. It's not the best in the world. Sorry!

[SapphirePhoenix]

That's fine! Thanks Kyttias!

[Ittermat]

Kyttias, is there a way to create Subfolders in the Theme "dropdown?" So that we can have say...

themes
-->Default themes
----->The list of default bootstrap themes
-->Theme list 2
------>Themes within list 2.

And so on?

[Kyttias]

A Google search says yes, since it pointed me to this: http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

The theme changer dropdown is dynamically appended to the end of the navigation menu with javascript in themeswitcher-kyt.js. You would need to add the css from the link above to your stylesheet and then manually modify line 12, which won't be easy, for three reasons:

1) It has to stay on one line or the read out of it will break.
2) Slashes in closing tags must be backslashed.
3) Quotes must be backslashed.

Then you need to follow the instructions in the commented out are half way through the file. Basically, the links to themes are not true links, since javascript needs to be used to swap out the css files. Add a custom class to the theme you added to the list, then copy and paste out the code provided in the commented section of the file to below it so it's no longer in the comment zone, and make sure the class name from the list and the snippet of code that will swap out the css when clicked are the same.

-

disclaimer: This is really something only meant for developers who know what they're doing and the theme changer should honestly be removed from any active, published website. If you just want to see what a different set of colors look like, I really recommend just changing what file you're linking to in your theme's header.

[Ittermat]

Thank you! ^__^;; I guess I wont do that then

[lasher666]

how to solve this error? https://659c2828-a-62cb3a1a-s-sites.googlegroups.com/site/swfjeffe/counter/Clipboard01.png

[Kyttias]

Make sure you follow all the installation steps carefully. It's very easy to accidentally tell the AdminCP to overwrite the theme files with blank contents. I think that may be what's happening. Otherwise, I think the url looks wrong. I don't believe 'index' should be in there??? That, and, this is important: Make sure the theme name is the same everywhere. Capitalization is important. I suggest NOT capitalizing any of it. Not the folder name, not the theme name, not during installing, not at all. That could also be the cause of the problem. It might be looking for "Bootstrap" but you don't have "Bootstrap" you have "bootstrap".

[aiiree]

This is wonderful! Your tutorial explains things very well! Bravo!

[Suzanne]

Thank you so much for taking the time to offer this. It works perfectly!

[bolivianbluetail424]

Wow Amazing.

Thanks

[Storyteller]

This is amazing, I am loving it! Thank you so very very much!!

I am having a little trouble with my custom theme made on StyleBootstrap.info, though.... I'm wondering if I messed up somewhere. It shows the link in the theme changer, but when I click my custom theme, all the styling goes poof.

Here is my edited themeswitcher kyt:

/* =============== Need help with this? *
You can contact me (Kyttias) on AIM, GoogleTalk, Skype, Tumblr,
DeviantART or @gmail.com. I prefer chatting over AIM, and email
is your best bet if I've not been recently active on Tumblr or
DeviantART. I can use GoogleTalk or Skype if it is of preference
to you. */



/* =============== Theme Changer */
/* Add theme drop down to top navigation. */
$(".navbar-nav").append("<li class="dropdown" id="theme-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cogs icon-large"><\/i> Theme<\/a> <ul class="dropdown-menu"> <li><a href="#" class="change-style-menu-item" rel="wubbie"><i class="icon-fixed-width icon-pencil"><\/i> Wubbie Forest &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="amelia"><i class="icon-fixed-width icon-pencil"><\/i> Amelia &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cerulean"><i class="icon-fixed-width icon-pencil"><\/i> Cerulean &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cosmo"><i class="icon-fixed-width icon-pencil"><\/i> Cosmo &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cyborg"><i class="icon-fixed-width icon-pencil"><\/i> Cyborg &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="flatly"><i class="icon-fixed-width icon-pencil"><\/i> Flatly &nbsp; &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="journal"><i class="icon-fixed-width icon-pencil"><\/i> Journal<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="readable"><i class="icon-fixed-width icon-pencil"><\/i> Readable<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="simplex"><i class="icon-fixed-width icon-pencil"><\/i> Simplex &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="slate"><i class="icon-fixed-width icon-pencil"><\/i> Slate &nbsp; &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="spacelab"><i class="icon-fixed-width icon-pencil"><\/i> Spacelab<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="united"><i class="icon-fixed-width icon-pencil"><\/i> United &nbsp; &nbsp; &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="yeti"><i class="icon-fixed-width icon-pencil"><\/i> Yeti &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-back"><i class="icon-fixed-width icon-pencil"><\/i> Blank (Default) &nbsp;<\/a><\/li> <\/ul><\/li>");

/* Change the theme by clicking on it. */
$('body').on('click', '.change-style-menu-item', function() { /*standard themes*/
var theme_name = $(this).attr('rel') + "/";
var theme = "//netdna.bootstrapcdn.com/bootswatch/3.0.3/" + theme_name + "bootstrap.min.css";
set_theme(theme);
});
$('body').on('click', '.change-style-menu-back', function() { /*blank theme*/
var theme = "//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css";
set_theme(theme);
});

/* ADD CUSTOM THEME: UNCOMMENT TO USE */
/*Make a custom theme at StyleBootstrap.info!
You'll need to find the list of themes above, copy one, and it must be pasted inline with the rest.
Give it a custom class, and then change that class below!
Then all you have to do is provide a direct path to your custom css file. */

$('body').on('click', '.wubbie', function() {
var theme = "http://wubbiepets.com/templates/Bootstrap/wubbie.css";
set_theme(theme);
});


/* Does their browser support saving the theme to local storage? */
function supports_html5_storage() {
try { return 'localStorage' in window && window['localStorage'] !== null; }
catch (e) { return false; }
}
var supports_storage = supports_html5_storage();

/* Remember user theme! */
function set_theme(theme) {
$('link[title="bootstrap"]').attr('href', theme);
if (supports_storage) { localStorage.theme = theme; }
}

/* On load, grab user's preferred theme from local storage. */
if (supports_storage) {
var theme = localStorage.theme;
if (theme) { set_theme(theme); }
}
else { /* Don't annoy user with options that don't persist. */
$('#theme-dropdown').hide();
}
/* End Theme Changer =============== */

And this is my header:

<!-- / / / / / / / / / / Need help with this template?
You can contact me (Kyttias) on AIM, GoogleTalk, Skype, Tumblr,
DeviantART or @gmail.com. I prefer chatting over AIM, and email
is your best bet if I've not been recently active on Tumblr or
DeviantART. I can use GoogleTalk or Skype if it is of preference
to you. -->

<!DOCTYPE html>
<html lang="en"><head>
<script src="{$home}{$temp}{$theme}/flickerfix-kyt.js""></script>
<title>{$browser_title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- / / / / / / / / / FULL CSS RESET -->
<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet">
<!-- / / / / / / / / / BOOTSTRAP 3 -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" title="bootstrap">
<!--
If you picked out a theme from BootSwatch, find it on BootstrapCDN.com and replace the link above.
If using themeswitcher.js, make sure the line above always includes title="bootstrap" as an attribute!
If you make a custom Bootstrap theme at StyleBootstrap.info, observe the lines below as a hint on how to include it.
Replace the href above if you prefer to use a custom theme with the theme changer, or, delete the line above,
and include in the same manner as the stylesheet is below. {$home}{$temp}{$theme} is this template folder!
-->
{$header->loadFavicon("{$home}favicon.ico")}
{$header->loadStyle("{$home}{$temp}{$theme}/style-kyt.css")}
{$header->loadAdditionalStyle("{$home}{$temp}{$theme}/wubbie.css")}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>


Those are the only two files I edited... it's pretty late and my brain is mush so I'm probably missing something ^^;;

Also, I've noticed that with the built-in styles, it always loads the page without the style for a split second before loading the style. Is there any way to fix that?

[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 (https://www.bootstrapcdn.com/bootswatch/) 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 (http://stylebootstrap.info/), 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:

{$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:
{$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>

[SilverDragonTears]

the download is no longer working.....

[Kyttias]

This one??? https://sta.sh/0ny9dwq3t9o It is for me????

edit: Stash is hosted through deviantArt and, tbh, their service has been buggy all month. I think they're having hosting issues. My best answer right now is to try later, unfortunately.

[TyraNoah]

WOW, very responsive.
and well detailed instructions.
thanks

[LUC1G07CH1]

https://sanakanwalfashion.com/dr-egy--/
https://advocatesnairobi.com/-----/
https://advocatesnairobi.com/----/
https://enjazalkhaleej.com/---2022/
http://marebradio.com/---/

[LUC1G07CH1]

https://advocatesnairobi.com/--/
https://enjazalkhaleej.com/-----/
https://advocatesnairobi.com/---/
https://advocatesnairobi.com/-----/
https://advocatesnairobi.com/---/