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
3. Create an Embed Media Widget and add appropriate code in the Web Tab
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.
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.
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
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:
- Create a text link (learn about adding links)
- In the wysiwyg/text editor, view the HTML view by selecting the "Source"
- Copy/paste one of the following:
- class="os-swipe-large”
- class="os-swipe-small”
Displays:
Updated: 17 Sep 2021