Wondering how to tweak the look of your site? Want to change the wording in a widget? Wish that page element could be centered?
Code warriors (and their apprentices) assemble regularly in the Code Library section of our SportsEngine HQ forum. They ask questions and share code as they tinker with the styles that come standard with their sites.
While none of this bending of the Sitebuilder content management system is actually supported by SportsEngine (add code at your own risk), the Code Library is a great area to sift through ideas to customize your site and, possibly, add a few of your own.
Special thanks goes to Mark Clark, the Chicago-based “Sports-Engineer” who pitched the Code Library idea and makes regular contributions there. Clark recently shared code on how to center a the tab page element, which we'll demonstrate below.
As an added tip, we'll show how to make a style change to a blockquote on an article page.
HOW IT WORKS
We'll show how and where to add code and provide examples of code that changes a few of the basic styles of your site:
- How to find the Edit Head Code page
- Add code using the Code Element
- Use the Custom CSS Class page element option
How to find Edit <HEAD> Code link
Make sure that you are logged in and in Edit mode. Choose the Options tab at the top of the page. You should now see the Edit <HEAD> Code link. Note: If you don't see the Edit <HEAD> Code link, ask your account manager to enable the Custom CSS Class site setting for you. Click on Edit <HEAD> Code and you can now add your code in the Single Page <HEAD> Code text box or in the Cascading <HEAD> Code text box. Single Page code will only affect the code on the page from which you accessed the head code. Cascading <HEAD> Code affects all of the pages beneath the page from which you accessed the head code in the site hierarchy. One way to apply the same code to every page on a site is to add it to the cascading head code section on each of the top navigation pages.
Add code using the Code element
Code can also be placed directly on a page using the Code page element. Click the Add Page Element link on the page, then scroll down the list of page elements and chose the Code option. In this example, we are adding code that removes the vertical blue bar that comes as part of the Blockquote style for this site.
Note: As shown in the photos to the right, both the vertical bar and the text in the code element appear on the site while in Edit mode. Switch to User mode and, voila!, both disappear.
Quick tip: Because we only want to use this piece of code with our Before & After articles, we created an article page template that includes the Blockquote code and other standard elements that are specific to that article type.
Use the Custom CSS Class option
Clark came to the rescue recently in the Community forum when member kwynne71 wanted to create a tabbed element and have the tabs centered across the layout container horizontally. Clark shared the solution in the Code Library (code pictured at right). Let's say, however, that you only wanted to have the tabs centered in one location on the page and have other tabbed elements on the page appear left-justified as normal. With a little tweaking, the code provided by Clark can be used only in specific instances by using the Custom CSS Class option in the tab element. We gave the custom code the name centerTab by adding .centerTab to the first line of the code then added it to the page's cascading head code. Now, when creating a tab element, entering centerTab in the Custom CSS Class field will center only that tab element.
About Rob Bedeaux
Rob Bedeaux is a content contributor for the SportsEngine websites. He is active with many customers and is currently the Communications Director for Minneapolis Youth Lacrosse. Rob is the author of two award-winning children's books, Kids Guide to the Tokyo Olympics & Kids Guide to the Winter Games, both are available for download for free at discover.sportsengineplay.com/olympics/kids-guide
Rob has been involved in publishing and website production since Geocities ruled the roost, and 300 bps modems were blazing fast.
Connect with Rob Bedeaux