Intro to Branding Tools
Localist offers three branding tools (SILK Wrapper, Custom CSS, and the HTML Theme Editor) that work together to achieve anything from a basic theming to extensive customization.
In this article:
- SILK Wrapper
- Custom CSS
- HTML Theme Editor
- Appearance Interface
- Related Articles
As your main branding tool, the SILK Wrapper allows your Localist platform to adopt your main website’s header, footer, and base CSS. For organizations looking to achieve a slick, but simple level of customization, implementing a wrapper is the first and only step toward achieving 100% brand adoption.
CSS allows you to make surface level changes to elements that are already built, whether by the customer or provided out-of-the-box by Localist. You can add Custom CSS to the stylesheet within your wrapper or directly into Localist.
To access the stylesheet in Localist, from the Admin Dashboard:
1. Navigate to Settings > Appearance
2. On the right side, select the paintbrush icon (Fonts, Colors & CSS) next to the Active theme
With Custom CSS, you’re able to make changes to:
- Background, shadows and borders
- Border Radius
- Text decoration
HTML Theme Editor
You can use Localist’s Theme Editor to access your platform’s HTML to customize how your event data is presented.
In the Theme Editor you can:
- Add a link to a platform page
- Move elements
- Add Custom Guidelines to the event submission form
- Change what photo size is referenced
– Note –
Modifying a Theme Editor file will cut it off from receiving any future Localist updates. If a file has not been modified, then it will continue to receive updates. To ensure that you receive as many updates as possible, all changes that can be applied via the wrapper or with custom CSS should not be made in the Theme Editor. For example, while it’s possible to change colors/fonts/sizes/etc with HTML, it can be done just as easily with CSS and will not cause a disconnect from updates.
– Best Practice –
A great way to ensure that you don’t miss out on updates is to create a new Theme based off of the default and leave it inactive. This way you can compare your edited Theme Files to the unedited Theme and copy bits of code into your edited files!
- SILK Wrapper URL: Place the link to the page that is hosting your wrapper in this field.
- Include Localist Styles: Unchecking this will remove all styles that Localist provides by default.
- Colors, Fonts & CSS: Select Customize to use Localist’s built in editor to modify these styles.
- Satellite Map: Checking this will display Google’s Satellite-view map instead of the default street-view map.
- Custom Logo:This will be displayed in the top left corner of your calendar. If you are using a SILK wrapper this is not necessary to add.
- Responsive Design: This is selected by default and it will optimize your platform’s display for tablets and smartphones. If using a SILK wrapper, it must support responsive design.
- Themes: This is where you access Localist’s HTML editor.