This article provides an overview of how to design and implement custom CSS for your Brightidea.
Before we begin, please note that some options should only be used with knowledge of HTML, CSS, and/or Javascript. The Design tab in Enterprise and Initiative Setup screens allows Admins to fully implement any custom design and gives great flexibility to your Brightidea.
To access the Design section, navigate to Enterprise or Site Setup > Site > Design
Banner
The banner design is broken down into three options.
- Hide: No banner will display
- Image: Upload an Image from a file on your computer to use as the banner.
- HTML: This option will support custom code written in HTML format.
Footer HTML
Designers have an easy way to apply footers to the bottom of pages in Brightidea. By using some basic HTML code, the footer can be customized and designed as needed. Input any Text/HTML to display in the footer and save changes to take affect.
Remember this will show up on every page above the Initiative logo, including the login page.
Favicon Icon
A Favicon is an Icon that represents your Initiative. This icon will display in the tab of your browser, typically as a company logo.
Note: The Favicon feature has been updated to a new version. However, affiliates that were created before June 2019 may not have this feature enabled by default.
Contact your Customer Success Manager or our Support department and one of our team members can quickly enable this for you. Please see our support article here for more information
- The Favicon file should be an .ICO file.
- Recommended size should be 16x16 pixels.
Stylesheets/Pre‐sets/Color Picker
Preset color-palette templates with allow Admins to quickly select different color schemes. The Color picker will populate to the set colors. You can change colors accordingly in the picker if desired.
Admins are also able to enter any HEX code and are not limited to the colors in the “picker” input field.
Note: At the Initiative Level, headers are controlled from each individual level. Headers will not be inherited by your Enterprise CSS.
Custom CSS
The goal of the Design tab is to be able to work with your Custom CSS directly in the browser making your changes in this text field without needing to upload CSS files.
Admins are able to enter custom-styled CSS code that will apply to your Brightidea.
Example of applying CSS: Below is an example of applying CSS to update text colors on your Brightidea site.
- Using a web browser with developer tools (ex. Google Chrome), visit the page for which you would like to update CSS styles.
- Use the inspector to identify a specific element you want to change. Each element will have designated "selector(s)" (i.e. the ID or Class of the element), which can be found in the underlying HTML. Copy this ID or Class to your clipboard.
- In the site setup menu, visit the site > design tab and locate the "Custom CSS" input box. In the input box, insert a new CSS style declaration using the selector in your clipboard. (example: #container_ent_home_1 { background-color: #fff;}) Hint: If an existing style exists for the same element, your new style may not apply. To override an existing style, apply an !important statement. (example: #container_ent_home_1 { background-color: #fff !important;})
IMPORTANT
It is very important to understand the formatting hierarchy in order to comprehend how the CSS is generated on your Brightidea site:
First - Barebones default styling that is already in place (Brightidea core CSS code)
Second - Color picker values are selected
Third - Custom CSS entered into the text box, then any external CSS files uploads.
Make sure to always “Save” any changes in the Design tab before navigating away from the page!
can you share more css templates?
Hi Anthony,
If any custom design changes are needed, we would recommend reaching out to your Brightidea Account Manager, who can scope an engagement with our Professional Services team.
They will be able to implement custom design in your site according to your specific requirements.
Best,
Daniel