Theme Designer

Introduction to the Theme Designer

Within ShoutCMS, are the front-end styling tools that are accessible from the Theme Designer. These adjust the aesthetic and look of your website, and allow you to make, see, and publish your changes.

The Theme Designer essentially makes it easier to do CSS changes to your website, and allows you to load in different Themes. Each of these Themes is a package of styling adjustments, which you can switch between at any time.

New ShoutCMS websites

When you go to install your ShoutCMS website, you'll be asked to select which Variant you'd like - these are the Themes that you can find within the Theme Designer.

1. Themes can be easily loaded or adjusted
2. New ShoutCMS installs start with one of the available themes
3. Browse between Themes without needing to publish changes

For Developers

The Theme Designer is a useful tool to speed up your CSS styling, but you can always rely on the traditional Override CSS & JS area of any ShoutCMS site (located in Settings) if you prefer.

Our developer community typically uses the Theme Designer to speed up projects, and makes it easy for their clients to make tweaks when needed.

How you use the Theme Designer is up to you, but we recommend taking a look and experimenting with it if you're new to ShoutCMS.

1. The Theme Designer is easy to use for non-developers
2. You can always switch to using the Override CSS & JS area
3. Access lots of elements to style in the Theme Designer

Using the Theme Designer

Having logged in, gone to the front-end of your site, and opened the Theme Designer - you'll now be able to start styling your ShoutCMS site! The following information will help you get familiar with the different areas in the Theme Designer.

1. Theme Selection

This is the first area of the Theme Designer you'll see when you open it, and is where you can select other Themes, add CSS to your Theme, and begin modifying your selected Theme.

1. View and select other Themes
2. Add CSS to your Theme
3. Begin modifying your selected Theme
   

To view and select other Themes, simply use the 'Select another Theme' button to browse through other available or previously created Themes. You get to see how the Theme will look before you publish your changes, so feel free to take your time while you select a new Theme.

The Additional CSS area is great if you want to organize your CSS by Theme (if you're actively switching between Themes on your ShoutCMS site).

2. Modifying your Theme

Using the 'Customize' button, you can begin modifying your selected Theme. You can safely make changes without your site visitors seeing them, clicking 'Save' when you're ready to publish your modifications.

You'll notice that the different areas of your site is grouped into an accordion, which is how you can navigate through the different categories to find what you're looking to style.

1. Make changes and hit 'Save' when you're finished
2. Navigate by category while you make changes
3. See changes in real-time while you use the Theme Designer

Making changes is as simple as selecting a new colour, changing a spacing value, or even selected a different font.

Summary

If the Theme Designer seems simple, it's because it is! We developed it as a tool to help our users who aren't as familiar with CSS as more-experienced designers and developers.

We recommend experimenting with the Theme Designer, using it as much as possible to style your website. If you run into issues, or think it's missing a feature - let us know using the form at the bottom of this page!

Tips and Tricks

To help you get even more value out of the Theme Designer, we've prepared some additional tips and tricks.

1. Seasonal Themes

If you're looking to quickly adjust the styling of your site to match seasonal changes, whether it's from the weather or a product line you're promoting - the Theme Designer is your go-to tool.

Create and save new Themes in the Theme Designer, and publish them upon entering a new season. This will allow you to change the styling on your entire site with just a few clicks.

1. Create and modify new Themes
2. Save them with easy-to-understand names
3. Switch between Themes with a few clicks

2. Organizing your CSS by Theme

Within each Theme, is an Advanced CSS area for developers to use when organizing their CSS. This is especially useful if you're switching between Themes regularly, or by season, and want to help keep your styling organized.

Because this area stores your CSS by Theme, you can add any theme-specific CSS to this area, instead of the Override CSS & JS area.

1. Adjust visibility and access by group for different Blocks
2. Offer unique deals and promotions to different groups
3. Rewards planning and time investment

Going beyond the Theme Designer

If you're an experienced designer or developer, you'll likely encounter an eventual limit to the Theme Designer. Because it is an evolving tool, it's constantly receiving new features and allowing for new areas to be styled.

If you need to style elements on your ShoutCMS site that you can't within the Theme Designer, we recommend using either the Advanced CSS area in the Theme Designer - or to use the Override CSS & JS area.

1. Use the Theme Designer for basic elements
2. Advanced CSS for more custom, theme-specific styling
3. Override CSS for global changes that are not theme-specific

If you follow the above recommendations, you should encounter minimal issues with styling, and a more relaxed editing experience.