Jump to content


Photo

Code to switch between two CSS files?


8 replies to this topic

#1 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 56 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,385 posts
  • Gender:Male
  • Location:O-H-I-O

Posted 29 September 2019 - 07:59 AM

Grooves,

 

Updated this reply with an easier way for you to add as many skins as you want and allow user to choose

 

 

Add this to a header message , make sure jQuery loaded on your site. Change the url for the stylesheets you want to load. Make sure in the MFL setup , that you are not loading in stylesheets. The default css file and all alternative css files will be loaded in your HPM's

 

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

https://www60.myfant...2019/home/37577

 

 

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>

 

 

<link rel="stylesheet" class="UploadedCSS" href="#" type="text/css"/>
<div class="MFLSkinSelection">
<i onclick="MFLSkinSelection()" class="fa fa-paint-brush MFLSkinSelectionbtn" aria-hidden="true"></i>
<div id="myMFLSkinSelection" class="MFLSkinSelection-content" style="display:none">
<a href="#" style="color:#080e25!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-blue-orange.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Blue-Orange"></i>Blue-Orange</a>
<a href="#" style="color:#004e8c!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-dark-blue.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Dark Blue"></i>Dark Blue</a>
<a href="#" style="color:#01a9f2!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-light-blue.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Light Blue"></i>Light Blue</a>
<a href="#" style="color:#61553c!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-brown.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Brown"></i>Brown</a>
<a href="#" style="color:#100e09!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-brown-gold.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Brown-Gold"></i>Brown-Gold</a>
<a href="#" style="color:#c18210!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-gold.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Gold"></i>Gold</a>
<a href="#" style="color:#00864b!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-green.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Green"></i>Green</a>
<a href="#" style="color:#888!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-grey.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Grey"></i>Grey</a>
<a href="#" style="color:#B82601!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-orange.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Orange"></i>Orange</a>
<a href="#" style="color:#592f93!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-purple.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Purple"></i>Purple</a>
<a href="#" style="color:#bb302d!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-red.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Red"></i>Red</a>
<a href="#" style="color:#028887!important" rel="//www.nitrografixx.com/MFL-2017/light-V2-teal.css?v=1.1.0"><i class="fa fa-circle" aria-hidden="true" title="Teal"></i>Teal</a>
</div>
</div>

<script>
!function(a){"function"===typeof define&&define.amd?define(["jquery"],a):a("object"===typeof exports?require("jquery"):jQuery)}(function(a){function c(a){return h.raw?a:encodeURIComponent(a)}function d(a){return h.raw?a:decodeURIComponent(a)}function e(a){return c(h.json?JSON.stringify(a):String(a))}function f(a){0===a.indexOf('"')&&(a=a.slice(1,-1).replace(/\\"/g,'"').replace(/\\\\/g,"\\"));try{return a=decodeURIComponent(a.replace(b," ")),h.json?JSON.parse(a):a}catch(c){}}function g(b,c){var d=h.raw?b:f(b);return a.isFunction(c)?c(d):d}var b=/\+/g,h=a.cookie=function(b,f,i){if(void 0!==f&&!a.isFunction(f)){if(i=a.extend({},h.defaults,i),"number"===typeof i.expires){var j=i.expires,k=i.expires=new Date;k.setTime(+k+864e5*j)}return document.cookie=[c(b),"=",e(f),i.expires?"; expires="+i.expires.toUTCString():"",i.path?"; path="+i.path:"",i.domain?"; domain="+i.domain:"",i.secure?"; secure":""].join("")}for(var l=b?void 0:{},m=document.cookie?document.cookie.split("; "):[],n=0,o=m.length;n<o;n++){var p=m[n].split("="),q=d(p.shift()),r=p.join("=");if(b&&b===q){l=g(r,f);break}b||void 0===(r=g(r))||(l[q]=r)}return l};h.defaults={},a.removeCookie=function(b,c){return void 0===a.cookie(b)?!1:(a.cookie(b,"",a.extend({},c,{expires:-1})),!a.cookie(b))}});
function MFLSkinSelection(){var a=document.getElementById("myMFLSkinSelection");a.style.display="none"===a.style.display?"block":"none"}$.cookie("css")&&$("link.UploadedCSS").attr("href",$.cookie("css")),$(document).ready(function(){$("#myMFLSkinSelection a").click(function(){return $("link.UploadedCSS").attr("href",$(this).attr("rel")),$.cookie("css",$(this).attr("rel"),{expires:365,path:"/"}),!1})}),$(function(){$("#myMFLSkinSelection a").click(function(){$("#myMFLSkinSelection").css("display","none")})});
</script>

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


#3 grooves12

grooves12

    Veteran

  • Members
  • PipPipPip
  • 56 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,385 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
  • 56 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,385 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,385 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,385 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
  • 71 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.





Reply to this topic



  


1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users