Laravel 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 Laravel 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: ADJUSTING NAVIGATION MENU STYLE

To adjust the style of the navigation menu 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 hand corner:
<style>.docs-menu > ul > li > ul > li {padding: 6px 0;border-bottom: 1px dotted silver;}</style>

Here’s an example of what this change would look like in the left side navigation menu:

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>

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

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 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>

 

Was this article helpful?

Yes No

Related Articles