1. Home
  2. Design and Layout
  3. Managing the Look of Your Site
  4. Customizing Theme Elements

Customizing Theme Elements

Altering the Styling of a Page Element

1. Find the element that you'd like to change. Example: an H2 tag ("Quick Links")

2. Use your browsers developer tool panel to inspect the element and find the correct selector
check element with inspector

3. Create an Embed Media Widget and add appropriate code in the Web Tab custom css for H3

4. Add Embed Media Widget to Layout of the page  (any location)

5. Save Layout

After applying the custom css, the H3 headers becomes red in color.
header with custom css - red

 

Add Custom CSS Class to Widget Container

Custom CSS classes can be created and applied to the markup of a widget’s outer container. The class names can then be used as selectors in a custom theme. This feature is available in the following widgets:

 

  • Accordion
  • Column
  • Custom Text/HTML widget
  • Embed Media widget
  • Featured Post
  • List of Files
  • List of Posts
  • Publications: Type
  • Publications: Years
  • Publications: Authors
  • Random widget
  • Slider widget
  • Tabs
  • Taxonomy widget

 

1. The custom class name field appears at the bottom of a widget form. Add css classes in the field. 
add css class to widget's container

2. Define css rules for the custom css class in an Embed Media widget and place the Embed Media widget to the same layout where the widget resides on.  

For example: a rule of css which sets text color to green 

<style>
.custom-class-name {
    color: green;
}
</style>

3. Custom class name(s) in the markup
css class name example

 

 

Creating a "Swipe Button"

A visual feature included in OpenScholar themes is a “swipe button”—mousing over the button generates a slow, left to right color swipe effect.

To create a small or large button:

  1. Create a text link (learn about adding links)
  2. In the wysiwyg/text editor, view the HTML view by selecting the "Source"
    Source link
  3. Copy/paste one of the following:
  • class="os-swipe-large” 
  • class="os-swipe-small”              

Displays:

Updated:  17 Sep 2021

caret