Sleek Theme Tips and Tricks

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 Sleek 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 BOTTOM NAVIGATION BUTTONS

To remove the navigation buttons that appear at the bottom of each screen 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:
<style type=”text/css”>.lessonNavigation{ display: none; }</style>

Please note that this code removes the navigation buttons on all the screens – it can’t be done for selective screens only. Here’s an example of what this change would look like at the bottom of a screen:

BEFORE:

AFTER:


TRICK #2: CHANGING TITLE IN UPPER RIGHT HAND CORNER DROPDOWN MENU

To change a title in the navigation menu in the upper right corner of 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 “Footer Script” box add the following CSS code (changing the bolded title phrase to the new title you’d like to use), then hit “Save” in the lower right corner:

<script>(function($){ $.fn.disableSelection = function() { return this .attr(‘unselectable’, ‘on’) .css(‘user-select’, ‘none’) .on(‘selectstart’, false); }; $(‘body’).disableSelection(); $(“body”).bind(“contextmenu”,function(e){ return false; }); $(‘.header-primary a.dropdown-toggle’).html(‘My Programs <b class=”caret”></b>’);
})(jQuery);</script></style>

BEFORE:

AFTER:


TRICK #3: REMOVING PAGE TITLE FROM DISPLAY

To remove the page title that appears near the top of the screen on 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:
<style type=”text/css”>.docs-content h2.page-header{ display: none; }</style>

BEFORE:

AFTER:

TRICK #4: 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>

Here’s an example of an image that is enclosed in a circular frame:


TRICK #5: 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 left navigation menu, select “Content”, then “Pages”
  • In the left 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:

<p><a href=”LINK TO DOC” class=”CSS CLASS NAME” target=”_blank”>Access PDF #1</a><br></p>

TRICK #6: CHANGING TOP NAVIGATION FONTS

As part of your course in Summit Evergreen, you may want to customize fonts throughout your site. While most of the themes allow you to customize fonts for things like text, headers, your syllabus, etc., in the Sleek theme you can also customize the fonts for your top navigation menus. To customize these fonts, do the following:

  • 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 the following CSS code (replacing the word “FONT” with the font you’d like to use), then hit “Save” in the lower right corner:

<style>

p, h1, h2, h3, h4, h5, h6{ font-family: FONT !important; }

navbar-nav li { font-family: FONT !important; }

li { font-family: FONT !important; }

</style>

Was this article helpful?

Related Articles