About Styles

Most design elements on the website are governed by a set of rules called a style sheet. Web browsers use a website’s style sheet to format text (color, alignment, text weight, etc.), position elements (align images, text boxes), and even hide and show elements based on user interactions. Some style sheets are hard-coded (typed into a digital file stored on the server) while others (like the style sheets this website uses) are dynamically-generated (built from theme settings saved on the website database). When editing your page, please be aware that the Edit Page screen of the Content Management System (CMS) will reflect some basic formatting, but the final format will only be visible on a Preview Page or the Live Page.

Organizing and Tagging Content

Just as a website is organized in an outline form, so should each page. Proper tagging and organization of information greatly helps with Search Engine Optimization (SEO). When you first start typing into the WYSIWYG (What-You-See-Is-What-You-Get) editor, the default text style is Paragraph. This is what most our your website content will be formatted as. Content can then be organized by using various levels of headers tags in section titles: H1, H2, H3, etc. The title of the page should be displayed as a level 1 header (H1, Header 1). As a general rule, there should only be one Header 1 per page.

Automatically Show Page Title

Example of How Page Title options on Edit Page screenThe content management system will automatically generate an H1 title if “Show Page Title” is selected under the “Page Header Options” on the Edit Page screen. If “Show Page Title” is not selected, than you must manually add the page title into the body of text as an H1.

Header Hierarchy

Example of Outline relative to Header Tags

Colors

In order to maintain consistency across all Rutgers Student Affairs websites, certain color codes should be followed for various elements on a webpage. The elements and the corresponding suggested color codes are as follows:

Standard_Top_Bar

  • Background: #474747
  • Text: #ffffff
  • Social Media Buttons: #ffffff
  • Social Media Hover: #d21034

Header

  • Background: #d21034
  • Site Search Text: #ffffff

Main_Menu

  • Text: #ffffff
  • Text Hover: #e2a36d

Sub_Menu

  • Background: #ffffff
  • Text: #454545
  • Text Hover: #d21034

Standard_Footer

  • Background: #474747
  • Text: #ffffff

Theme elements used on this page


 


 


 

  • Custom style class
  • Rounded rectangle, custom background and header text color

 


 

  • (Above this element) 15px.

 

  • (This element) Style 2.