When creating and customizing your Summit Evergreen product, you may wish to change certain style elements that are used in various places in your site (e.g., headers, menus, syllabus, content, etc.). In order to do this, you will need to make use of CSS (cascading style sheets) code. This page shares CSS tricks and tips that you can use to make style adjustments if your product uses the Sensibility theme.

Note: When adding and/or adjusting CSS code in the “Header & Footer Scripts” section of the Theme Settings, note that the section utilizes default footer code. This code is programmed using PHP to pull your account name and the date. If this PHP code is changed in any way, it may cause errors in viewing your site.

TRICK #1: REMOVING PAGE TITLES FROM HEADER IMAGES

To remove the page titles that appear in the header images in your site, do the following:

• Login to Summit Evergreen
• In the left navigation menu, select “Appearance”, then “Theme”
• In the left pane, select “My Current Theme”
• This will bring up a “Theme Settings” page in the right pane
• Scroll down to “Header & Footer Scripts” and in the “Header Script” box add the following CSS code, then hit “Save” in the lower right corner:

BEFORE:

AFTER:

TRICK #2: ENCLOSING IMAGE IN CIRCULAR FRAME

To enhance the look of an image by enclosing it in a circular frame, do the following:

• In the left navigation menu, select “Content”, then “Pages”
• In the left pane, select the page in which you want your image displayed
• This will bring up a page content editor in the right pane
• In the content editor menu at the top, select “<>” to access the page’s HTML code
• To add your image displayed in a circle (note: in order to be enclosed in a circular frame, the original image must be square (e.g., 100 px X 100 px, 400 px X 400 px, etc.)), add the following code, then hit “Save” in the lower right corner:

<p style=”text-align: center;”><img style=”border-radius: 50%; width: 150px; height: 150px;” src=”IMAGE URL”></p>

TRICK #3: ADDING BUTTONS TO SITE

As part of your course in Summit Evergreen, you may want to incorporate buttons that allow your students to choose various site and/or course options. To design and add buttons, do the following:

• Go to http://www.cssbuttongenerator.com/ and design your button
• Once you have your button designed, select “Get the Code” on the right hand side of the button generator site screen to access and copy the CSS code that corresponds to your design
• On the left hand side of the button generator site screen, note the “CSS Class Name” you chose (you will need to put this in the code below)
• Login to Summit Evergreen
• In the left navigation menu, select “Appearance”, then “Theme”
• In the left pane, select “My Current Theme”
• This will bring up a “Theme Settings” page in the right pane
• Scroll down to “Header & Footer Scripts” and in the “Header Script” box copy in the button generator site CSS code, then hit “Save” in the lower right corner
• In the dark grey vertical menu bar on the left of the screen, select “Content”, then “Pages”
• In the left hand pane, select the page in which you want to incorporate your button
• This will bring up a page content editor in the right pane
• In the content editor menu at the top, select “<>” to access the page’s HTML code
• To add your button, add the following code, then hit “Save” in the lower right corner:

TRICK #4: CHANGING POP-OUT SIDEBAR COLORS

As part of your site design in Summit Evergreen, you may want to alter the appearance of the pop-out sidebar that is part of the Sensibility theme. You can alter the appearance of the background color of the sidebar, the text color of the section headers in the sidebar, or both. To alter the appearance of the sidebar’s background color, do the following:

• Login to Summit Evergreen
• In the left navigation menu, select “Appearance”, then “Theme”
• In the left pane, select “My Current Theme”
• This will bring up a “Theme Settings” page in the right pane
• Scroll down to “Header & Footer Scripts” and in the “Header Script” box add the following CSS code, then hit “Save” in the lower right corner:

.sidebar{ background: white; }

This will appear as follows:

To alter the appearance of the sidebar’s section header text color, do the following:

• Login to Summit Evergreen
• In the left navigation menu, select “Appearance”, then “Theme”
• In the left pane, select “My Current Theme”
• This will bring up a “Theme Settings” page in the right pane
• Scroll down to “Header & Footer Scripts” and in the “Header Script” box add the following CSS code, then hit “Save” in the lower right corner:

.sidebar > .sidebar-inner > ul > li > span{ color: #646464; }

This will appear as follows: