Create your own custom theme and have SharpSpring take on the look and feel of your company. This article will review how to switch your SharpSpring theme across multiple preset templates, or even go as far as to design your own custom them using CSS.
This feature is currently only available in Agency instances of SharpSpring, and requires a User to be an Administrator in the platform. Themes are global, so once an Administrator changes the theme, every User in that instance will immediately see the theme changes on save.
Enabling the Feature
To begin using custom themes or building your own, head into Settings » Agency Tools » White Labeling. Scroll down to the section titled Edit CSS. To turn your custom theme on, simply toggle the "Enable CSS on Login and in Application" button to On. If you ever want to revert back to the standard SharpSpring theme, all you need to do is toggle this button back to the Off position.
Using and Editing the Templates
Now that the feature has been turned on, we can select our theme. Currently there are five preset templates that you can choose from, which are listed below. To select a theme, hover over your choice and click. You'll be prompted with a confirmation window, and once confirmed the new theme will immediately be applied. The active theme will then have a green border and checkmark on it, identifying it as the current theme.
Orange and Blue
Custom Styling with CSS
If you would like to personalize your theme even further, you can customize any of the templates by editing the CSS. To do so, simply click on the "Customize Styles" button and you will be taken to a screen that includes the stylesheet for the active theme.
Here, you can add your own custom CSS to edit the theme however you like. The below covers how to both add or edit the existing CSS.
- Add your own CSS: You can add your own CSS by writing your code block either above the /** White-label Theme - Do not Modify Comment**/ or below /** End of Theme - Do Not Modify Comment **/. If written above, make sure to include !important tags on your CSS t olet the system know to take precedence for that style.
CSS that is added in this method will persist even when you change to another theme. If you ever want to remove the style, simply go into your stylesheet and delete the additional code blocks. In the below example we've made our New Button Vegas Gold with Black text, and it's going to remain in that style even when we switch themes.
- Edit the existing CSS: Here, you'll actually change the pre-written CSS for the desired theme. You'll make your edits in the content area nested within the comments /** White-label Theme - Do not Modify Comment **/ and /** End of Theme - Do Not Modify Comment **/.
Edits made to this section will only apply to the current theme that you edited and will be overwritten if the theme is changed. For example, we can change our header color by editing the below section, and change the background color to whatever we want.
Once you have made your edits, you should copy and paste the CSS into a text editor (Atom, Sublime Text, etc.) and save the stylesheet.