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.
We'll show how to add custom code to your site by using the Edit <HEAD> Code link:
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.
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 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.