ScreenSteps

CSS and Javascript Customizations for the 2015 (Old) Template

Updated on

These customizations apply to the ScreenSteps 2015 template. If you are using the 2011 template then the CSS selectors may not apply to your site design. The 2019 template does not support CSS and JavaScript customizations.

View this article to see where to add CSS and Javascript to your site template:

Adding custom CSS and Javascript to your template

CSS Customizations

Javascript Customizations

10 Comments

Matthew Fisher

Can you please add how to make the header logo larger?

Greg DeVore

@Matthew -

Right now you can't make the logo larger. That is on our list of improvements to add.

Nicole Biesenbender

Hey is there an eta on this? I see comment is from 2015.

Greg DeVore

@Nicole -

We don't have an ETA at this time.

Damian Stalls

Two questions:
1. Can the sidebar area color be changed to help distinguish between it and the article?
2. Can the search box be moved to the header?

Damian Stalls

Is this list current as of today. Most of these CSS settings do not appear to have any effect.

Trevor DeVore

@Damian - Some of the CSS wasn't working properly for our new 2018 site template that is being used on new sites. The CSS has now been updated so that it will work. Thanks for pointing that out.

Trevor DeVore

@Damian - I've added a recipe for setting the sidebar background color. The search box may be able to be moved above the header using jQuery. jQuery can be used in the JavaScript section of a site template and can move elements around the page.

Louise

How is it possible to change the icon when I "Add a manual tile that links to an external web page"?

Trevor DeVore

@Louise - yes it is. Look for the `fa-play` string in the recipe. That determines what the icon is. For example, `fa-globe` will show a globe. If inspect the CSS associated with an existing icon on your site table of contents then you can find the name of the icon being displayed.

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Previous Article Adding custom CSS and Javascript to your template in the 2015 (Old) Template
Next Article Use a custom Google font in the 2015 (Old) Template
Still Need Help? Contact Us