Jump to content


Photo

Code to switch between two CSS files?


9 replies to this topic

#1 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 64 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,426 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

 

Quick Example site , top left of site has some skins to pick from

https://www57.myfant...19/home/10065#0

 

 

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
  • 64 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,426 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
  • 64 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,426 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,426 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,426 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
  • 72 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,426 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/




Reply to this topic



  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users