The Theme Designer is exactly what it sounds like - it lets you customize the theme of your website, allowing you to brand your website properly.
Quickly brand your ShoutCMS website
To help you easily adjust the colours and elements of your site to match your branding, we recommend using the Theme Designer. This is a tool that's accessible to you whenever you're logged into your website, and lets you make changes to the styling on your site.
You can adjust colours, fonts, buttons, spacing, alignment, backgrounds, and more from the Theme Designer.
While being logged in, visit the front-end of your website - and click on the Theme Designer button in the top left of your screen.
This article will explain some of the basics of using the Theme Designer, and how you can get the most out of this tool.
You can use the Theme Designer to quickly modify the colours, fonts, and buttons on your website.
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.
Themes can be easily loaded or adjusted
New ShoutCMS installs start with one of the available themes
Browse between Themes without needing to publish changes
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.
The Theme Designer is easy to use for non-developers
You can always switch to using the Override CSS & JS area
Access lots of elements to style in the Theme Designer
Font choice plays a big role in the success of your website, so make sure your typography is easy to read by your site visitors.
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.
View and select other Themes
Add CSS to your Theme
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.
Make changes and hit 'Save' when you're finished
Navigate by category while you make changes
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.
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!
The Theme Designer is a fun, visual tool to style your website however you want! You can also create new Themes and switch between at any point.
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.
Create and modify new Themes
Save them with easy-to-understand names
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.
Adjust visibility and access by group for different Blocks
Offer unique deals and promotions to different groups
Rewards planning and time investment
Add as much, or as little colour as you want with the Theme Designer. You can easily adjust colours, font sizes, buttons, and more within this tool.
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.
Use the Theme Designer for basic elements
Advanced CSS for more custom, theme-specific styling
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.