The Usefullness of Helper Classes
Bits & Bytes Recap

In our recent forum, we discussed how helper classes can be used on web pages, as well as a few examples of how to use them. The following is a recap of our discussion: 

What are Helper Classes?

Helpers classes are styling elements that can be added to snippets and page elements. Helper classes, combined with page styling elements, can help to create a more engaging and user-friendly website. Our team is continuously adding new helper classes based on design and trends and accessibility to help our users become more efficient while building pages. Helper classes allow us to turn pages from plain text to a styled and engaging page with just a few changes. While we have several helper classes that can be added to our various snippets, we’re just going to focus on a few.

Adding Helper Classes

Helper classes can be implemented in a few different ways in Modern Campus. They can be added through table properties, page parameters, link properties, or images properties. Generally, they will all be added under the “Custom Class” section in these various locations. 

Example: Custom Columns

To create the same look as shown above, follow these instructions:

1. Add the Columns - Custom Width snippet to the page.
2. Click the Columns - Custom Width tab so that the entire snippet is selected and the quick links toolbar appears.
3. Click the Table Properties icon in quick links toolbar.
4. Change the Class dropdown from (not set) to (custom).
5. In the Custom Class text field, add your helper classes  (ghost-border, border-shadow, margin-bottom-2x, and margin-top-2x). 
6. Save.

Helper classes can also be added to each table cell to highlight for specific purposes. For instance, if you wanted to showcase three aspects of your website that are part of a general theme, you could add a background color to that cell.

To add a color background to an individual cell, use the following instructions:

1. Place cursor in the cell you want to edit.
2. Select the Table Properties icon located in the WYSIWYG toolbar.
3. Hover over Cell and click on Cell Properties.
4. Add red-rocks and center-content.
5. Save.

As a reminder with custom columns, you also have the option to adjust individual cell widths by percentage. Please note that all cells widths must total to 100% or the snippet will not work correctly.

Panels

To create the same look as shown above, follow these instructions:

1. Add a Panel snippet to your page.
2. Place your cursor in the Panel Colors (located under Panel Instructions) row next to the color text (ex: "white")
3. Click the Image icon in the WYSIWYG toolbar and locate the background photo you wish to use. Then click Save.
   1. Please note: the panel color will need to change depending on the darkness or lightness of the background photo to ensure adequate color contrast for accessibility.
4. Click the Panel tab so that the entire snippet is selected and the quick links toolbar appears.
5. Select the Table Properties icon.
6. Change the Class dropdown from (not set) to (custom).
7. In the Custom Class text field, add your helper classes (ghost-border, extend-width, min-height-300, and center-content).
8. Save.
9. Click into the main panel area, then add another Panel snippet.
10. Click the Panel tab so that the entire snippet is selected and the quick links toolbar appears.
11. Select the Table Properties icon.
12. Change the Class dropdown from (not set) to (custom).
13. In the Custom Class text field, add your helper classes (width-three-quarters, position-center, and center-content).
14. Save.
15. Change the panel color to u-red and save.

---

Q & A

Q: I heard the Bits & Bytes forum is changing. What does this change entail?

A: Based on previous forums, we have decided to shorten them to 30 minutes to best utilized participants time. We also are offering additional forums to enable more participants to attend. We will have a forum four times a month. The first and second forums for the month will cover one topic, with the third and fourth covering a second topic. We hope these changes will provide additional opportunities for editors to attend and interact with this web community. If you would like to voice you opinion on the forums and additional meeting times, please complete our Bits & Bytes Survey.

---

Wrap up

Helper classes provide ways to add color, animations, and different layouts to pages. They can help create a more engaging, intuitive, and pleasing experience for users. We encourage you to experiment on your own pages with the helper classes we have available.

If you have any further questions or suggestions, feel free to reach out to the UIT Web Support & Usability team.

Happy styling!

---

 

Blog Search