LHSLaxWebAdmin Posted September 30, 2017 Share Posted September 30, 2017 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 Link to comment Share on other sites More sharing options...
SportsEngine Staffer Posted October 2, 2017 Share Posted October 2, 2017 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 More sharing options...
tmurrayjr Posted October 3, 2017 Share Posted October 3, 2017 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 More sharing options...
LHSLaxWebAdmin Posted October 3, 2017 Author Share Posted October 3, 2017 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 Link to comment Share on other sites More sharing options...
tmurrayjr Posted October 3, 2017 Share Posted October 3, 2017 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 More sharing options...
LHSLaxWebAdmin Posted October 3, 2017 Author Share Posted October 3, 2017 I got it Tom. Take a look. Thanks! 1 Link to comment Share on other sites More sharing options...
tmurrayjr Posted October 3, 2017 Share Posted October 3, 2017 Outstanding!!! Glad it worked out If I ever figure out the spacing issue I’ll let you know - Tom Link to comment Share on other sites More sharing options...
n5456377 Posted November 22, 2017 Share Posted November 22, 2017 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 Link to comment Share on other sites More sharing options...
tmurrayjr Posted November 22, 2017 Share Posted November 22, 2017 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 More sharing options...
SportsEngine Staffer Posted November 22, 2017 Share Posted November 22, 2017 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> 1 Link to comment Share on other sites More sharing options...
tmurrayjr Posted November 22, 2017 Share Posted November 22, 2017 Loren/Nick Burggraf . . . You Rock! Thanks! Link to comment Share on other sites More sharing options...
n5456377 Posted November 24, 2017 Share Posted November 24, 2017 It works perfectly! Thanks so much for the assist! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now