Jump to content


Photo

Code to switch between two CSS files?


14 replies to this topic

#1 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 81 posts

Posted 27 September 2019 - 08:53 AM

Is it possible to set up code in MFL to switch between two custom CSS files? 

 

I am thinking something like the skin selector, except with custom skins or similar the "fixed width" button to go back and forth between a light and dark skin, but even a simple link that does it would work.



#2 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 29 September 2019 - 07:59 AM

Grooves,

 

Here is example for theme switcher on MFL site

 

I have jQuery loaded and also FontAwesome in a head message

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//use.fontawesome.com/6ccd97559b.js"></script>

 

In header under files above , place this script which stores the theme of each skin to browsers local storage for each user. Also to toggle the selection icon open and close

<script>
function setTheme(themeName) {
	localStorage.setItem('theme_'+year+'_'+league_id, themeName);
	document.documentElement.className = themeName;
}
(function() {
	if(localStorage.hasOwnProperty('theme_'+year+'_'+league_id)) setTheme(localStorage.getItem('theme_'+year+'_'+league_id));
})();
jQuery(".MFLSkinSelectionbtn").click(function(){
   $("#myMFLSkinSelection").toggle();
});
jQuery("#myMFLSkinSelection a").click(function(){
   $("#myMFLSkinSelection").css("display","none");
});
</script>

 

Next add the HTML under the above script

<div class="MFLSkinSelection">
<i class="fa fa-paint-brush MFLSkinSelectionbtn" aria-hidden="true"></i>
<div id="myMFLSkinSelection" class="MFLSkinSelection-content" style="display:none">
<a onclick="setTheme('theme-one')" style="color:#2073D6;cursor:pointer"><i class="fa fa-circle" aria-hidden="true" title="Theme 1"></i>Theme 1</a>
<a onclick="setTheme('theme-two')" style="color:#080e25;cursor:pointer"><i class="fa fa-circle" aria-hidden="true" title="Theme 2"></i>Theme 2</a>
<a onclick="setTheme('theme-three')" style="color:#004e8c;cursor:pointer"><i class="fa fa-circle" aria-hidden="true" title="Theme 3"></i>Theme 3</a>
</div>
</div>

 

Now for CSS - add this to your css file - for the drop down selection icon

<style>
.MFLSkinSelection i {
  padding-right: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer
}

.MFLSkinSelectionbtn {
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer
}

.MFLSkinSelection {
  position: fixed;
  z-index: 99999;
  top: 0
}

.MFLSkinSelection-content {
  display: none;
  position: absolute;
  background-color: #f8f8f8;
  min-width: 130px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top:5px;
  height: 300px;
  overflow: auto;
}

.MFLSkinSelection-content a {
  color: black;
  padding: 6px 4px;
  text-decoration: none;
  display: block
}

.MFLSkinSelection-content a:hover {
  background-color: #ddd
}

.show {
  display: block
}
</style>

 

Lastly , make changes in your css to target specific themes to change the colors

 

Example

.theme-one body{background:red;color:blue}
.theme-one report{border:2px solid red}

.theme-two body{background:blue;color:red}
.theme-one report{border:2px solid blue}

.theme-three body{background:green;color:white}
.theme-one report{border:2px solid green}

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#3 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 81 posts

Posted 29 September 2019 - 09:58 AM

Thanks. That helps.

 

I'm assuming I will need CSS in both skins to hide the equivalent of your "full-dmd" and "blank" respectively to make it function properly?



#4 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 07 October 2019 - 04:09 PM

grooves , check my post , i edited it for a simpler way to allow users to swap skins


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#5 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 81 posts

Posted 08 October 2019 - 09:21 AM

TOS,

 

Thanks. Works perfect. 

 

What would I need to change if I wanted it to be a dropdown list instead of text links?



#6 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 08 October 2019 - 09:48 AM

TOS,

 

Thanks. Works perfect. 

 

What would I need to change if I wanted it to be a dropdown list instead of text links?

 

 

 

post updated for drop down menu , view on my demo site


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#7 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 08 October 2019 - 10:41 AM

if your going to do this , i'd recommend making a stylesheet containing all the formatting and upload that to the MFL url and images settings

 

Then create your colors for each skin in separate stylesheets and load them using script above 


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#8 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 14 October 2019 - 09:55 AM

Grooves,

 

I went ahead and applied this stylesheet switcher to one of my personal leagues and everyone likes it and no issues reported.

 

https://www57.myfant...2019/home/10065

 

If doing this from the start , i'd recommend creating a css file that has all the formatting/structure of the site. Then start creating new style-sheets that only contain colors, background colors , box shadow color , border color etc ......... that way on page load , all the structure is in place as it will be uploaded on the MFL site and load quickly. Then the color style-sheets that are loaded and user specified are loaded in the header and the page doesn't jump or do anything wild while that is loaded after initial site load. 


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#9 Moon

Moon

    Veteran

  • Members
  • PipPipPip
  • 82 posts
  • Gender:Male
  • Location:CT

Posted 14 October 2019 - 05:46 PM

Grooves,

 

I went ahead and applied this stylesheet switcher to one of my personal leagues and everyone likes it and no issues reported.

 

https://www57.myfant...2019/home/10065

 

If doing this from the start , i'd recommend creating a css file that has all the formatting/structure of the site. Then start creating new style-sheets that only contain colors, background colors , box shadow color , border color etc ......... that way on page load , all the structure is in place as it will be uploaded on the MFL site and load quickly. Then the color style-sheets that are loaded and user specified are loaded in the header and the page doesn't jump or do anything wild while that is loaded after initial site load. 

 

Very cool feature. Love the clean site.



#10 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 17 January 2020 - 08:05 AM

I added 2 demos with a theme switcher , i did all 32 NFL teams . One demo just switches through all the NFL Team Colors , the other actually puts the NFL Logo in the banner area as well.

 

 

https://www57.myfant...2019/home/23841

 

https://www57.myfant...2019/home/62287

 

 

I'm using css variables , so once main file is converted to use them , it takes less then 1 minute to create a whole new theme color combination.  So if you create your css to use variables, you can change the color of the skin very very quickly year to year , week to week or whatever....


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#11 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 437 posts
  • Gender:Male
  • Location:Green Bay, WI

Posted 12 March 2020 - 09:24 PM

Hey TOS,

 

I created two custom skins, one with a light background (css uploaded to the site) and one with a dark background. I'm hosting the css files on my personal web site.

 

The owners are split on which one they prefer.

 

Is it possible to put a button on the home page or in the MFL skin selector drop down menu where owners can toggle between css files?

 

I did some research and added a script but it didn't work.

 

Sorry if you addressed this above (couldn't tell) but any help is much appreciated.



#12 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 12 March 2020 - 10:24 PM

Here is the easiest / most efficient way i do this

 

at the very top of your header message add this script and html (if loading jQuery via HPM , this must come below that), make sure you have font awesome linked in your header as well or imported in via css file.

 

jQuery library would be loaded here - or if using MFL jQuery then no need for it here

<script>
function setTheme(themeName){localStorage.setItem('theme_'+year+'_'+league_id, themeName);document.documentElement.className = themeName;}
(function(){if(localStorage.hasOwnProperty('theme_'+year+'_'+league_id)) setTheme(localStorage.getItem('theme_'+year+'_'+league_id));})();
jQuery(".MFLSkinSelectionbtn").on("click", function (){$("#myMFLSkinSelection").toggle();});
jQuery("#myMFLSkinSelection a").on("click", function (){$("#myMFLSkinSelection").css("display","none");});</script> 

<div class="MFLSkinSelection"> <i class="fa fa-paint-brush MFLSkinSelectionbtn" aria-hidden="true"></i> 
 <div id="myMFLSkinSelection" class="MFLSkinSelection-content" style="display:none"> 
  <a onclick="setTheme('theme-light')" style="color:#000;cursor:pointer"><i class="fa fa-circle" aria-hidden="true" title="Light Skin"></i>Light Skin</a> 
  <a onclick="setTheme('theme-dark')" style="color:#fff;cursor:pointer"><i class="fa fa-circle" aria-hidden="true" title="Dark-Skin"></i>Dark Skin</a> 
 </div>
</div>  

 

 

Link font awesome

<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 

 

Or you can use @ import and import font awesome as the top line in your css file

@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"; 

 

 

Add this to your css , to style the Skin Selection Drop Menu , edit it for location or coloring as desired.

/***************************************/
/* SKIN SELECTION DROP MENU */
/***************************************/
.MFLSkinSelection i {
  padding-right: 6px;
  font-size: 16px;
  border: none;
  cursor: pointer
}
.MFLSkinSelectionbtn {
  color: #fff;
  padding: 10px;
  border: none;
  cursor: pointer
}
.MFLSkinSelection {
  position: fixed;
  z-index: 99999;
  top: 0
}
.MFLSkinSelection-content {
  display: none;
  position: absolute;
  background-color: #f8f8f8;
  min-width: 130px;
  box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  margin-top:5px;
  height: 300px;
  overflow: auto;
}
.MFLSkinSelection-content a {
  color: black;
  padding: 6px 4px;
  text-decoration: none;
  display: block
}
.MFLSkinSelection-content a:hover {
  background-color: #ddd
}
.show {
  display: block
}
.chat_popup .MFLSkinSelection {
  display:none
}

 

 

Now your setup to add some different colors to your skin , you only need 1 stylesheet for both colors light or dark or whatever other colors you want to add.

 

Here is how you do that.

 

In your css file you will utilize a class name for each color set for example.

body{color:red} /* this will be default color for owners that have not chosen a skin color yet */
.theme-dark body{color:red} /* this will be color for owners that have chosen a dark skin */
.theme-light body{color:blue} /* this will be color for owners that have chosen a light skin */

 

The script you put in header , will add a class called .theme-dark or .theme-light to the HTML of your page , when a user initially visits it and has never selected a color theme , it will display the default/base color scheme. When they click light or dark , it will add a class to the HTML of the MFL pages , so when they revisit the site , it shows their personal skin choice.

 

It takes some time to go through and do this , but it is the best way.  I have 20-40 colors on my site for owners to pick from - https://www57.myfant...2020/home/10065

Top left of page , click artbrush icon and select any skin.

 

I utilized css variables , since i had so many color changes. My site uses 1 stylesheet for all the different colors and its a bit of a complicated way to explain here. But for 2 color schemes , i think the best way is the do as i have shown.


FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#13 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 12 March 2020 - 10:47 PM

Using same approach as above but incorporating variables is easier in my opinion if you want to read up on use

https://medium.com/@...da-dd0059d72fa2

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/


#14 UFFLCommish

UFFLCommish

    Veteran

  • Members
  • PipPipPip
  • 437 posts
  • Gender:Male
  • Location:Green Bay, WI

Posted 13 March 2020 - 05:52 AM

I already use your theme switcher script and it works great. I'll try and use your advice above and see what I can do with one stylesheet.

 

Thanks!



#15 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,636 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 13 March 2020 - 06:51 AM

Here is a simple approach if you wanted to keep 2 separate stylesheets and just toggle between them.


Do not load any css via the MFL settings , and place this as first line in header message , change url paths for your dark and light css versions

 

Demo site example - https://www98.myfant...2008/home/29658

 

I personally dont like this method , as it flashes the default skin before loading the dark skin if chosen. To me the only way to do this is using css variables

 

<link id="theme" rel="stylesheet" type="text/css" href="https://mysite/light.css" />

<label>Toggle Light-Dark Skin<input type="checkbox" id="tog"/></label>  

<script>
function toggle(theme) {
  var styleSheet = document.getElementById("theme");
  if (theme != styleSheet.href) styleSheet.href = theme;
  document.getElementById("tog").checked = styleSheet.href === "https://mysite/dark.css";
}
  var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
  toggle(theme);
  document.getElementById("tog").addEventListener("change",function() {
    var theme = this.checked ? "https://mysite/dark.css" : "https://mysite/light.css"
    toggle(theme);  
    localStorage.setItem("theme",theme);
  })
</script>

FREE Player Cuts Collection
https://www.nitrogra...om/player-cuts/




Reply to this topic



  


0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users