Jump to content


Photo

Create your own tabs


This topic has been archived. This means that you cannot reply to this topic.
50 replies to this topic

#46 gobrowns

gobrowns

    Veteran

  • Members
  • PipPipPip
  • 48 posts

Posted 15 September 2015 - 07:43 AM

Hello, I was pointed to this thread to update my MFL History module to get it working again.  I got rid of the script using sprytabs and added the new script from this thread.  I can't get it to work and was wondering if you had an idea on what I did wrong?  http://www5.myfantas...15/home/28425#0

 

Thanks for any help!



#47 theeohiostate

theeohiostate

    Veteran

  • Members
  • PipPipPip
  • 3,428 posts

Posted 15 September 2015 - 10:36 AM

make sure you have script to run the tabs in a footer message , and load css


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


#48 LarryV

LarryV

    Veteran

  • Members
  • PipPipPip
  • 183 posts

Posted 29 June 2016 - 05:42 AM

I was trying to use images for the tabs but clicking on the image doesn't let me select the tab, almost like it's blocking it.  It worked with sprytabs

 

Here's my site : http://www74.myfanta...4&O=247&SEQNO=4

 

Any help would be most appreciated

 

and here's the code on my site:

 

<!-----  ADD  CAPTION AND WRAP TABS AND CONTENT IN TABLE TO MATCH SITE  ------>
<table id="custom-reports" class="report">
 <tbody><tr><td>

<!-----  TABBED REPORT NAVIGATION  ------>
<ul id="rostertabs" class="tabbed-reports">
    <li class="report11 current"><module name="MY_ICON"/></li>
    <li class="report12"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/moose-icon.jpg" /></li>
    <li class="report13"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/money-icon.jpg" /></li>
    <li class="report14"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/reefer-icon.jpg" /></li>
    <li class="report15"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/gorilla-icon.jpg" /></li>
    <li class="report16"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/goblins-icon.jpg" /></li>
    <li class="report17"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/finger-icon.jpg" /></li>
    <li class="report18"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/skins-icon.jpg" /></li>
    <li class="report19"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/muff-icon.jpg" /></li>
    <li class="report20"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/redeye-icon.jpg" /></li>
    <li class="report21"><img src="https://storage.googleapis.com/larryvasta/fantasyff/icons/coldies-icon.jpg" /></li>
   </ul>


<!-----  TABBED REPORTS CONTENT  ------>
   <div class="reports-content">
    <div class="report11"><module name="ROSTER"/> </div>
    <div class="report12" style="display:none;"><module name="ROSTER" FRANCHISE="0001"/></div>
    <div class="report13" style="display:none;"><module name="ROSTER" FRANCHISE="0002"/></div>
    <div class="report14" style="display:none;"><module name="ROSTER" FRANCHISE="0003"/></div>
    <div class="report15" style="display:none;"><module name="ROSTER" FRANCHISE="0004"/></div>
    <div class="report16" style="display:none;"><module name="ROSTER" FRANCHISE="0005"/></div>
    <div class="report17" style="display:none;"><module name="ROSTER" FRANCHISE="0006"/></div>
    <div class="report18" style="display:none;"><module name="ROSTER" FRANCHISE="0007"/></div>
    <div class="report19" style="display:none;"><module name="ROSTER" FRANCHISE="0008"/></div>
    <div class="report20" style="display:none;"><module name="ROSTER" FRANCHISE="0009"/></div>
    <div class="report21" style="display:none;"><module name="ROSTER" FRANCHISE="0010"/></div>
   </div>
 </td></tr></tbody>
</table>

 



#49 edytwinky

edytwinky

    Veteran

  • Members
  • PipPipPip
  • 178 posts

Posted 25 July 2016 - 11:13 AM

Is there an example site of what it is supposed to look like? I'm looking to purchase MFLHistory.com for my first time and would love the integration into my site. 

 

 

To recreate the MFL History Tabs using this method , verse its current sprytabs format , here is the code

.

 

 

Then in the css , you'd add this , to display the captions

#mflhistory .reports-content .report caption {
     display: table-caption
}


#50 Bloodsuckers

Bloodsuckers

    Veteran

  • Members
  • PipPipPip
  • 95 posts

Posted 19 March 2017 - 06:05 AM

Thanks to everyone for sharing this great stuff! Although being away from coding and customizing my MFL site, i've been able to do so just following the steps of the forum.

 

Got a question regarding the tabs, i know is a simple one, but can't get the way to accomplish it: How can i remove the captions of the sub-modules that are inside a tab? In the demo site looks great, just the way i want it to look like, but can't get it on my site. Guess it's just a simple css line on my header, but i'm quite out of shape...

 

Thanks again!


Valencia ProFantasy
Est. 2008

#51 quickolas1

quickolas1

    Veteran

  • Members
  • PipPipPip
  • 958 posts

Posted 19 March 2017 - 06:26 AM

Thanks to everyone for sharing this great stuff! Although being away from coding and customizing my MFL site, i've been able to do so just following the steps of the forum.

 

Got a question regarding the tabs, i know is a simple one, but can't get the way to accomplish it: How can i remove the captions of the sub-modules that are inside a tab? In the demo site looks great, just the way i want it to look like, but can't get it on my site. Guess it's just a simple css line on my header, but i'm quite out of shape...

 

Thanks again!

 

Answer from above:

 

 

You can also pick and choose which captions you want to hide... so in the following example I'm calling out my 30 series (which for me is my_news, hot_news, news_articles) and a shorthand for all the top performers tabs:

 

.report31 caption, .report32 caption, .report33 caption, #home #top_performers caption {display:none; }

 

Obviously I removed this part of the CSS so the other captions I want to show are actually showing:

.reports-content .report caption {display:none; }