skip navigation

Learn how to get your site up to code

By Loren Nelson, 04/20/16, 1:45AM CDT

Share

Make adjustments to your site's styles by adding code to the page head

This week’s Pro Tip comes with an all-caps caution: PROCEED AT YOUR OWN RISK!

Advanced webmasters no doubt are already intimately familiar with the Code page element, using it to embed handy items such as Google maps, video, social media widgets and dozens of other popular pieces of content.

We created a Code Library section in our Community Forum to share code snippets that have been used effectively over the years. Lately, we’ve dialed up the degree of difficulty, and potential danger, by sharing pieces of code that can be placed in the head code. 

The danger here is that placing code in the header overrides site styles and can cause unintended changes. Also, code based on existing site styles can “break” as Sitebuilder templates are universally updated. Hence, the proceed at your own risk warning.

Our Code Library includes entries that make a site container background transparent, that hide the white background behind the logo in Nokomis and Itasca themes and, most recently, that hide the tabs in the Tab Element, allowing for more flexibility in the number of columns in a layout container.


HOW IT WORKS

We'll show how to add custom code to your site by using the Edit <HEAD> Code link:

  1. Navigate to the Edit <HEAD> Code section
  2. Choose where to add your code

Navigate to the Edit <HEAD> Code section

Log in with your Sport Ngin account. Toggle into Edit Mode. Decide which on page or pages you want to edit the head code, then chose the Options tab at the top of the page. Click the Edit <HEAD> Code link. Note: The location and look of the Admin Control Panel link varies depending on the Sitebuilder template.

Choose where to add your code

Code added to the Single Page <HEAD> Code field, as the title indicates, will only apply to that specific page. Code added to the Cascading <HEAD> Code page is applied to that specific page and all of its subpages. For code to work throughout the site, it needs to be added to the top level page of each of the site's main sections.

The finished product

The examples to the right, from top to bottom, show the standard white background removed from the logo, a transparent background applied to a home page and the removal of the tabs from a Tab Element page element. Remember to go to the Code Library in the Community Forum to get the code used in each of those examples.


Click on image to go to page


Click on image to go to page

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