We've streamlined our approach by offering one powerful and flexible template, designed with new components and enhanced styling options. This unified system makes it easier than ever to build a site that reflects your department's unique identity.
Explore this page to see how you can customize layouts, colors, and more to create a website that stands out and serves your audience.
CSS Classes enable the styling of content on a webpage by changing the font colors, spacing, and even fonts themselves.
Because certain items are set based on your template, CSS Classes are a way to provide additional styling options for your website. This section will show you the available CSS Classes, how to use them, examples of what they do, and what they will look like on your site.
Classes are always lowercase, with dashes in-between words. Multiple classes may be used in a component by separating each class with a space.
Example: "one-lead mb-5"
Following are examples of the CSS Classes available in the CMS.
CSS classes are always lowercase, with dashes in-between words. Multiple classes can be used in the same component by separating each class with a space.
Example: "my-3 one-lead card bg-primary p-4"
If used with a Text component, this chain of CSS classes will apply the following styling:
Run a manual sweep of anomalous airborne or electromagnetic readings. Radiation levels in our atmosphere have increased by 3,000 percent.
This class creates additional space around the outside of a component. To use margins, add "m" to the CSS Class field, along with a "-" followed by a number between 1 and 5. One (1) is the smallest amount of space, while five (5) is the largest.
For example, "m-5" will add a margin of 5 around the entire component, which is the largest amount of space that can be added. The following example shows the difference between a text component with no margins and a text component with margins of 5 (m-5) on every side of the component.
Run a manual sweep of anomalous airborne or electromagnetic readings. Radiation levels in our atmosphere have increased by 3,000 percent. Electromagnetic and subspace wave fronts approaching synchronization. What is the strength of the ship's deflector shields at maximum output? The wormhole's size and short period would make this a local phenomenon. Do you have sufficient data to compile a holographic simulation?
Run a manual sweep of anomalous airborne or electromagnetic readings. Radiation levels in our atmosphere have increased by 3,000 percent. Electromagnetic and subspace wave fronts approaching synchronization. What is the strength of the ship's deflector shields at maximum output? The wormhole's size and short period would make this a local phenomenon. Do you have sufficient data to compile a holographic simulation?
This class creates additional space inside of a component. Padding works very well with section components because it extends the background color of a section, while margins just add white space. To use padding, add "p" to the CSS Class field, along with a "-" followed by a number between 1 and 5. One (1) is the smallest amount of space, while five (5) is the largest.
For example, "p-5" will add a padding of 5 inside the component on all sides. The following example shows the difference between a text component with no padding and a text component with padding of 5 (p-5) on every side of the component.
Run a manual sweep of anomalous airborne or electromagnetic readings. Radiation levels in our atmosphere have increased by 3,000 percent. Electromagnetic and subspace wave fronts approaching synchronization. What is the strength of the ship's deflector shields at maximum output? The wormhole's size and short period would make this a local phenomenon. Do you have sufficient data to compile a holographic simulation?
Run a manual sweep of anomalous airborne or electromagnetic readings. Radiation levels in our atmosphere have increased by 3,000 percent. Electromagnetic and subspace wave fronts approaching synchronization. What is the strength of the ship's deflector shields at maximum output? The wormhole's size and short period would make this a local phenomenon. Do you have sufficient data to compile a holographic simulation?
The thickness of the divider can be adjusted to five different sizes. This is accomplished by using the padding (p) CSS class on the y-axis (py). The y-axis extends the divider at both the top and bottom of the line to increase the thickness.
Sizes:
For example, to change the divider's thickness to the largest size, the CSS class "py-5" is used.
*Note that this option is not available on the default divider. A section background color must also be applied using the CSS class "section-bg" followed by the desired color.
Padding on the y-axis of one:
CSS Classes:
Padding on the y-axis of two:
CSS Classes:
Padding of the y-axis of three:
CSS Classes:
Padding on the y-axis of four:
CSS Classes:
Padding on the y-axis of five:
CSS Classes:
If your site is migrating from the current templates (A, B, and C) to the new (Material) template, the following table shows which CSS classes will no longer work after migration.
Templates A, B, and C | Material Template |
|---|---|
| "break-after" (space after a component) | "pb-3" |
| "break-before" (space before a component) | "pt-3" |
| "emphasis" (make text stand out) | "one-lead" |
| "image-margin-left" | No longer used |
| "image-margin-right" | No longer used |
| "profile" | Profile Card Component |
| "well" | "card" |
This class modifies a table to have alternating light grey and white rows. Although the colors can't be changed, this class makes reading rows in tables much easier.
| Name | Breed | Color |
|---|---|---|
| Gambit | Black Labrador | Black |
| Honey | Labradoodle | Blonde |
| Jack | Husky | Black, brown, and white |
| Kaylee | Husky | Red and white |
| Molly | Australian Shepherd | Brown and white |
| Scout | Australian Shepherd | Black, brown, and white |
| Sulley | Miniature Schnauzer | Grey and white |
| Tilly | Australian Shepherd | Brown, grey, and white |
| Name | Breed | Color |
|---|---|---|
| Gambit | Black Labrador | Black |
| Honey | Labradoodle | Blonde |
| Jack | Husky | Black, brown, and white |
| Kaylee | Husky | Red and white |
| Molly | Australian Shepherd | Brown and white |
| Scout | Australian Shepherd | Black, brown, and white |
| Sully | Miniature Schnauzer | Grey and white |
| Tilly | Australian Shepherd | Brown, grey, and white |
Icons are small images that represent a topic, action, or resource. They can be utilized when photographs are unavailable, or to draw attention to specific content.
We use Font Awesome, an online directory of icons, to add icons to content in the CMS.
Note: We are limited to using only the free Font Awesome icons
Can't find what you're looking for? Please visit link.ou.edu/cmsticket to contact the Web Team for additional assistance.
