skip navigation
Website Builder Coding Tips

Code library is popular hangout

By Loren Nelson, 04/20/17, 4:15PM CDT

Share

CSS, HTML and Javascript. Oh my!!

With a little know-how, non-developers have ability to make basic style changes to their site

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 Community 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:

  1. How to find the Edit Head Code page
  2. Add code using the Code Element
  3. 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, viola!, 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.

Loren Nelson Headshot

About Loren Nelson

Loren Nelson is Community Manager at SportsEngine. He is also the National Media Editor and has served in a variety of other customer facing and media roles since 2009.

Loren's Social Media Contacts