Feature Announcement: Custom Styles

css-override-featured

We're excited to announce a new feature that has just been released in Herald CMS: Custom CSS Styling!

While our Colors and Fonts controls give you quick access to make your site unique and tailored to your preferences, and Home Blocks enable you to show or hide elements to give a more customized look, some site owners have some web development chops of their own.

Now, with Custom CSS Styling, you can take a deep dive into your site's stylesheets in order to tweak, customize and even restructure to your heart's content (just remember the uncle Ben principle: with great styling power comes great styling responsibility).

From the Website section of Herald CMS, you'll see a new Website Styles section with the familiar Branding link and a new Custom CSS menu item. Clicking that will open up a drawer on the left of the screen where you can update your site's styles. You can also open an editor in a new window for some more elbow room. Clicking the Update button will show your changes in the preview window.

You can also make changes and save them for later publishing by toggling the Activate Override Styles setting to off. Once you're ready to go live with your beautiful customizations, just toggle the setting on. Your style changes will be immediately reflected on your live site.

Hierarchy of Controls

Now with Custom CSS Styles you have even more ways to control the look of your site. But how does this work with other ways of modifying the visual look of the site? For example, you can control the background color of an element on your site using the Colors section of the Branding module. You can update the font of a page title in the Fonts area. You can show or hide an entire block region of your home page in the Blocks drawer of the Home module.

All these controls work together in a hierarchy of control. The foundational layer of each site is the out of the box Design style and Color theme designed by the Church Plant Media team. The next layer of customization are the controls you'll find in the Home and Branding areas of Herald (CMS).

The top level, all powerful, Thanos with a guantlet level of power over the look of your site is Custom CSS. For this reason, we strongly recommend following the Uncle Ben protocol: with much styling power comes much styling responsibility.

Advanced users with development experience, familiarity with Cascading Style Sheets, browser developer tools or who know their way around a text editor may feel right at home updating custom styles. If any of this sounds like a foreign language (it actually is) you may want to get the help of a developer friend before drastically altering your site styles.

But enough caveats and warnings. You want to see the goods, right?

Inspiration

If you need some inspiration, check out the the timelapse video below of changes being made to our Lazarus design. You can see the preview updating as each change is getting saved. 

Timelapse Video

Lazarus: Before and After

Here's the final before and after.

Not only does Lazarus look great before and after but Disciple does too. Check out the before and after images of this great looking design with custom styles:

 

Before and after:

disciple_before disciple_after

This free upgrade has already been released to all websites running the Herald CMS.

Leave a Comment

Do not change this field:
Leave this field untouched:
Leave this field untouched: