Tab Element Style and Default View

[LHSLaxWebAdmin]

I find the tab element to be very useful in organizing content on any given webpage. I'm using a tab element now to reflect a weekly game schedule and results for a fun fall lacrosse league sponsored by our high school.  Using the Sports Engine tournament feature was overkill for our needs.

 

The issue I have is that the tabs 'float' on the page and frankly don't look like tabs.  Wondering if there is a way to connect the tabs and make them look like layered files, sort of like this:

 

Of course, if there are only say 2 tabs in use then the content for each tab should stretch the width of the layout container.

 

Also, would be great to understand how to change the default view to highlight different tabs, rather than always defaulting to the first tab on the far left. In our case, I'd like to show current week game results.

 

I'm no CSS coder but happy to try anything once! Thanks.

 

Peter

 

[SportsEngine Staffer]

Hi Peter,

 

I've found the design of most any page element can be changed. So, yes, you most likely could make your tabs look they way you show in the photo. 

 

However, this is also above my coding skill grade. Hopefully, someone here would have a suggestion on how to make this work or, even better, offer up the code you are looking for and how to install it.

 

As for the default view, couldn't you just slide your current week game results up into the first tab position so it becomes the default view?

 

- Loren

[tmurrayjr]

Hi Peter,

This isn't 100% there, but cut and paste the below code in to a code widget at the top of the page where the tab element is at.

 

I tried to get the main content of the tab to butt up against the actual tabs but you'll see there is a separation between the actual tabs and their content.  There is an indicator for what tab is active/selected.

 

Anyway, hope this get's you part way there.

 

 - Tom

 

<style>

.tab-remote {

border-style: solid;

border-width: 2px;

Border-radius: 10px 10px 0px 0px;

}

.tabContainer {

border-style: solid;

border-width: 2px;

}

.layoutContainerTabs:before {

content: none;

}

.layoutContainerTabs:after {

content: none;

}

.tabContainer:before {

content: none;

}

.tabContainer:after {

content: none;

}

</Style>

 

[LHSLaxWebAdmin]

Thanks both Loren and Tom.

 

Loren - I did add a 'Latest results' tab up front as you suggested.

 

Tom - I don't see where one actually places the code other than adding the code element widget on the page. Can you guide me how to do that?

 

-Peter

[tmurrayjr]

You've got it!  Add the code element to the page with the tab element on it.  Paste the code above in the code element, save the changes, then you need to turn off the editing switch to see the actual code working.

 

Hope this helps

 

Tom

[LHSLaxWebAdmin]

I got it Tom. Take a look. Thanks!

 

 

[tmurrayjr]

Outstanding!!!

Glad it worked out

If I ever figure out the spacing issue I’ll let you know

- Tom

[n5456377]

Do you have code to make tabs that look like the ones on the site linked below?

http://mnba.blizzardelitebaseball.com/page/show/848883-minnesota-blizzard-elite-teams-2017-2018

 

 

[tmurrayjr]

I do not, but it looks great!  Maybe we can get SE to ask them to share the code.

 

I did "inspect" the source code with Chrome and they are using some serious CSS with images to get that look and feel.  I thought I might be able to piece it together, but just don't have the time.

 

So . . . Hey SE!  Can you do us all a solid and ask Blizzard Baseball to hook a guy up?  ;-)

 

  - Tom

[SportsEngine Staffer]

Trying adding this code to your page, either as a code element or by putting it in your head code.

You can make tweaks to this (like changing the hover font color and other hover styles) as you wish.

(Thanks to Nick Burggraf for his work on this).


<style>
.contentTabs li span {
background-repeat: no-repeat;
background-position: bottom left;
text-decoration: none;
display: block;
border-style: solid;
border-width: 1px .5px 0px .5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: linear-gradient(white,#959595);
}

.contentTabs li:hover, .contentTabs li.selected {
background-repeat: no-repeat;
background-position: bottom left;
text-decoration: none;
display: block;
border-style: solid;
border-width: 1px .5px 0px .5px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: linear-gradient(white,#959595);

}

.contentTabs li span a:hover{
color:yellow;
}
</style>

[tmurrayjr]

Loren/Nick Burggraf . . . You Rock!  Thanks!

[n5456377]

It works perfectly! Thanks so much for the assist!