Bootstrap [responsive, mobile-ready]

[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?

[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~

[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]

Originally Posted by 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?

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: