Jump to content

Tab Element Style and Default View


LHSLaxWebAdmin

Recommended Posts

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:

2017-09-30_14-22-12.png 

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

 

Tab1.png.507370fe66725ee0b0345255bc712bfb.png

2017-09-30_14-22-12.png.dafd29a9d0f2dbf452f1f35eb98943de.png

2017-09-30_14-22-12.png.a364c327bc4f0fcb2f6b1c1c0f7d96ec.png

2017-09-30_14-22-12.png.09ccd696654391d3ace02e9312b1ba22.png

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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>

 
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • 1 month later...

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

Link to comment
Share on other sites

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>

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...