Jump to content


Photo

Site only shows league banner


3 replies to this topic

#1 mays66

mays66

    Veteran

  • Members
  • PipPipPip
  • 107 posts
  • Gender:Male

Posted 13 October 2020 - 02:30 PM

I put the SVG ICONS AND NAV MENU Icon Bar Example HTML in a HPM and put it as a header message but now my site https://www70.myfant...20/home/42851#0 just shows the league banner. When I click on Commissioners>Setup to delete that HPM nothing happens.



#2 theeohiostate

theeohiostate

    Veteran

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

Posted 13 October 2020 - 03:55 PM

https://www.mflscripts.com/mfl-svg/

 

 

installing the SVG icons requires 3 different things

 

Install the javascript in footer and header , then install the SVG html in a header or homepage message you want to display it

 

must have your site setup properly following the video tutorial

 

you also have scripts on your page running from http and you site is secured using https , go through every homepage message and search for http or www , any links you find that are not https , change them

 

 

if you get your site locked because of bad coding you can use the printer friendly pages to access what you did wrong , manually type in the example URL for what homepage message you messed up and uncheck header or footer and re read the SVG page for installation

 

https://www70.myfantasyleague.com/2020/csetup?L=42851&C=HMPGMSG&PRINTER=1

 

 

The SVG nav menu

 

Install this in header marked message

<script>
jQuery.get("https://www.mflscripts.com/mfl-svg/images/sprites.svg", function(data) {
  var div = document.createElement("div");
  div.innerHTML = new XMLSerializer().serializeToString(data.documentElement);
  document.body.insertBefore(div, document.body.childNodes[0]);
});
</script>

<!- CSS STYLE FOR IMAGE ICON BAR ->
<style>
/*IMAGE ICONS LINKS COLORING*/
.svg-iconlink:active,.svg-iconlink:link,.svg-iconlink:visited{color:#ccc;text-shadow:2px 2px 5px #000;}
.svg-iconlink:active:hover,.svg-iconlink:link:hover,.svg-iconlink:visited:hover{color:#da3636}
.svg-icon{fill:#e63143;color:#ddd;-webkit-filter:drop-shadow(2px 2px 5px #000);filter:drop-shadow(2px 2px 5px #000)} 
.svg-icon:hover,.svg-iconlink:hover .svg-icon{fill:#ddd;color:#e63143}

/*IMAGE ICONS LINKS FORMATTING*/
.icon-bar{white-space:nowrap;vertical-align:middle;}
.svg-iconlink{display:inline-block;text-decoration:none;margin-right:8px;text-align:center}
.svg-iconlink:last-of-type{margin-right:0}
.svg-icon{width:48px;height:48px;}
.svg-icon:hover,.svg-iconlink:hover .svg-icon{cursor:pointer}
.svg-text{text-align:center;padding:5px;text-transform:uppercase;font-size:11px}

/*CSS FOR ICON BAR*/
.bannerlinkicons{text-align:center;overflow:auto;-webkit-overflow-scrolling:touch}

@media only screen and (max-width:38.000em){
.svg-icon{width:36px;height:36px;}
}
</style>

<!- ICON BAR EXAMPLE HTML ->

<div class="bannerlinkicons">
  <div class="icon-bar">
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-lineup" viewBox="0 0 126.32 122.5">
        <use xlink:href="#icon-lineup-v2"></use>
      </svg>
      <div class="svg-text">Submit Lineup</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-adddrop" viewBox="0 0 224.23 208.32">
        <use xlink:href="#icon-adddrop"></use>
      </svg>
      <div class="svg-text">Add/Drop</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-trade" viewBox="0 0 234.61 242.39">
        <use xlink:href="#icon-trade"></use>
      </svg>
      <div class="svg-text">Trades</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-roster" viewBox="0 0 129.66 125.25">
        <use xlink:href="#icon-roster-v2"></use>
      </svg>
      <div class="svg-text">Roster</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-scoreboard" viewBox="0 0 254.49 236.32">
        <use xlink:href="#icon-scoreboard-v2" />
      </svg>
      <div class="svg-text">Scoreboard</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-calendar" viewBox="0 0 156 172.38">
        <use xlink:href="#icon-calendar"></use>
      </svg>
      <div class="svg-text">Calendar</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-history" viewBox="0 0 100 87">
        <use xlink:href="#icon-history"></use>
      </svg>
      <div class="svg-text">History</div>
    </a>
    <a class="svg-iconlink" href="INSERT URL">
      <svg class="svg-icon icon-rules" viewBox="0 0 135.12 194.78">
        <use xlink:href="#icon-rules"></use>
      </svg>
      <div class="svg-text">Rules</div>
    </a>
  </div>
</div>

 

 

install this in footer marked message

<script>
!function(e,n,t,o){o&&e.addEventListener("DOMContentLoaded",function(){[].forEach.call(e.querySelectorAll("use"),function(n){var o=n.parentNode,r=n.getAttribute("xlink:href").split("#"),a=r[0],l=r[1],s=t[a]=t[a]||new XMLHttpRequest;s.s||(s.s=[],s.open("GET",a),s.onload=function(){var n=e.createElement("x"),t=s.s;n.innerHTML=s.responseText,s.onload=function(){t.splice(0).map(function(e){var t=n.querySelector("#"+e[2]);t&&e[0].replaceChild(t.cloneNode(!0),e[1])})},s.onload()},s.send()),s.s.push([o,n,l]),s.responseText&&s.onload()})})}(document,navigator,{},/Trident\/[567]\b/.test(navigator.userAgent));
</script>

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


#3 mays66

mays66

    Veteran

  • Members
  • PipPipPip
  • 107 posts
  • Gender:Male

Posted 13 October 2020 - 05:21 PM

Worked perfect, thanks for your help



#4 theeohiostate

theeohiostate

    Veteran

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

Posted 13 October 2020 - 05:41 PM

Worked perfect, thanks for your help

 

 

now just change the style to match your site like so

 

<!- CSS STYLE FOR IMAGE ICON BAR ->
<style>
/*IMAGE ICONS LINKS COLORING*/
.svg-iconlink:active,.svg-iconlink:link,.svg-iconlink:visited{color:#081f20;text-shadow:2px 2px 5px #666;}
.svg-iconlink:active:hover,.svg-iconlink:link:hover,.svg-iconlink:visited:hover{color:#081f20}
.svg-icon{fill:#081f20;color:#5a9292;-webkit-filter:drop-shadow(2px 2px 5px #000);filter:drop-shadow(2px 2px 5px #666)} 
.svg-icon:hover,.svg-iconlink:hover .svg-icon{fill:#5a9292;color:#081f20}

/*IMAGE ICONS LINKS FORMATTING*/
.icon-bar{white-space:nowrap;vertical-align:middle;}
.svg-iconlink{display:inline-block;text-decoration:none;margin-right:8px;text-align:center}
.svg-iconlink:last-of-type{margin-right:0}
.svg-icon{width:48px;height:48px;}
.svg-icon:hover,.svg-iconlink:hover .svg-icon{cursor:pointer}
.svg-text{text-align:center;padding:5px;text-transform:uppercase;font-size:11px}

/*CSS FOR ICON BAR*/
.bannerlinkicons{text-align:center;overflow:auto;-webkit-overflow-scrolling:touch}

@media only screen and (max-width:38.000em){
.svg-icon{width:36px;height:36px;}
}
</style>

 

 

then add URLs to where you want each icon to link to


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