Mysidia Adoptables Support Forum  

Home Community Mys-Script Creative Off-Topic
Go Back   Mysidia Adoptables Support Forum > Mysidia Adoptables > Templates and Themes

Notices

Reply
 
Thread Tools Display Modes
  #41  
Old 12-17-2015, 07:14 PM
SapphirePhoenix's Avatar
SapphirePhoenix SapphirePhoenix is offline
Adoptable Site Owner
 
Join Date: Nov 2015
Location: Australia
Posts: 81
Gender: Female
Credits: 9,154
SapphirePhoenix is on a distinguished road
Default

That's fine! Thanks Kyttias!
Reply With Quote
  #42  
Old 02-04-2016, 10:07 PM
Ittermat's Avatar
Ittermat Ittermat is offline
The awesomesauce
 
Join Date: Feb 2016
Location: in front of my laptop
Posts: 272
Gender: Female
Credits: 38,343
Ittermat is on a distinguished road
Default

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?
Reply With Quote
  #43  
Old 02-04-2016, 10:55 PM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 857
Gender: Unknown/Other
Credits: 109,645
Kyttias is on a distinguished road
Default

A Google search says yes, since it pointed me to this: http://bootsnipp.com/snippets/featur...pdown-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.
__________________
Please do not contact me directly outside of Mysidia.
I also cannot troubleshoot code more than two years old - I legit don't remember it.
Reply With Quote
  #44  
Old 02-04-2016, 11:25 PM
Ittermat's Avatar
Ittermat Ittermat is offline
The awesomesauce
 
Join Date: Feb 2016
Location: in front of my laptop
Posts: 272
Gender: Female
Credits: 38,343
Ittermat is on a distinguished road
Default

Thank you! ^__^;; I guess I wont do that then
Reply With Quote
  #45  
Old 02-05-2016, 09:02 AM
lasher666 lasher666 is offline
Member
 
Join Date: Feb 2016
Posts: 8
Gender: Male
Credits: 1,173
lasher666 is on a distinguished road
Default

how to solve this error?
Reply With Quote
  #46  
Old 02-05-2016, 09:38 AM
Kyttias's Avatar
Kyttias Kyttias is offline
Premium Member
 
Join Date: Jan 2014
Posts: 857
Gender: Unknown/Other
Credits: 109,645
Kyttias is on a distinguished road
Default

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".
__________________
Please do not contact me directly outside of Mysidia.
I also cannot troubleshoot code more than two years old - I legit don't remember it.

Last edited by Kyttias; 02-05-2016 at 09:41 AM.
Reply With Quote
  #47  
Old 03-23-2016, 02:52 PM
aiiree aiiree is offline
Member
 
Join Date: Mar 2016
Posts: 17
Gender: Male
Credits: 2,523
aiiree is on a distinguished road
Default

This is wonderful! Your tutorial explains things very well! Bravo!
Reply With Quote
  #48  
Old 06-13-2016, 01:42 PM
Suzanne Suzanne is offline
Member
 
Join Date: Jun 2016
Posts: 11
Gender: Female
Credits: 1,535
Suzanne is on a distinguished road
Default THANK YOU!

Thank you so much for taking the time to offer this. It works perfectly!
Reply With Quote
  #49  
Old 07-15-2016, 08:46 AM
bolivianbluetail424 bolivianbluetail424 is offline
Member
 
Join Date: Jul 2016
Posts: 1
Gender: Male
Credits: 826
bolivianbluetail424 is on a distinguished road
Default

Wow Amazing.

Thanks

Last edited by bolivianbluetail424; 08-02-2016 at 05:36 AM.
Reply With Quote
  #50  
Old 08-10-2016, 03:15 AM
Storyteller Storyteller is offline
Member
 
Join Date: Aug 2016
Posts: 15
Gender: Female
Credits: 3,344
Storyteller is on a distinguished road
Default

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 &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:

Quote:
<!-- / / / / / / / / / / 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?

Last edited by Storyteller; 08-10-2016 at 03:32 AM.
Reply With Quote
Reply

Tags
bootstrap, jquery, mobile-first, responsive


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Bootstrap [AdminCP version] Kyttias Templates and Themes 15 03-12-2021 06:07 PM
Basic Browser Game Tutorial using Smarty and Bootstrap Kesstryl Programming and Game Development 3 10-29-2014 10:15 PM
I created a responsive template audition Questions and Supports 0 02-01-2014 05:02 PM
Request - Responsive Themes Kesstryl Templates and Themes 4 01-29-2014 10:21 PM
Responsive design Kesstryl Suggestions and Feature Requests 5 03-06-2013 02:34 PM


All times are GMT -5. The time now is 08:22 AM.

Currently Active Users: 781 (0 members and 781 guests)
Threads: 4,081, Posts: 32,029, Members: 2,016
Welcome to our newest members, jolob.
BETA





What's New?

What's Hot?

What's Popular?


Powered by vBulletin® Version 3.8.11
Copyright ©2000 - 2024, vBulletin Solutions Inc.
vBCommerce I v2.0.0 Gold ©2010, PixelFX Studios
vBCredits I v2.0.0 Gold ©2010, PixelFX Studios
Emoticons by darkmoon3636