Mysidia Adoptables Support Forum - View Single Post - Bootstrap [responsive, mobile-ready]

Storyteller · #50 08-10-2016, 04:15 AM

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:

Quote:

/* =============== 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  <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="amelia"><i class="icon-fixed-width icon-pencil"><\/i> Amelia  <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cerulean"><i class="icon-fixed-width icon-pencil"><\/i> Cerulean  <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cosmo"><i class="icon-fixed-width icon-pencil"><\/i> Cosmo  <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cyborg"><i class="icon-fixed-width icon-pencil"><\/i> Cyborg  <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="flatly"><i class="icon-fixed-width icon-pencil"><\/i> Flatly    <\/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  <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="slate"><i class="icon-fixed-width icon-pencil"><\/i> Slate    <\/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      <\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="yeti"><i class="icon-fixed-width icon-pencil"><\/i> Yeti  <\/a><\/li> <li><a href="#" class="change-style-menu-back"><i class="icon-fixed-width icon-pencil"><\/i> Blank (Default)  <\/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:

Quote:

<!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">

<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet">

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

{$header->loadFavicon("{$home}favicon.ico")}
{$header->loadStyle("{$home}{$temp}{$theme}/style-kyt.css")}
{$header->loadAdditionalStyle("{$home}{$temp}{$theme}/wubbie.css")}



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