Roles needed:  Content Manager

Please note, the css injector requires a basic understanding of css and html coding. If you don't have previous experience using html, you may find this difficult to use.  There are some free tutorials online through various other websites, but ultimately, if you're not comfortable using html, you may want to avoid using this feature.

It's not necessary, unless you wish to customize some visual feature sof your site, but even then, it can be tricky since the site is designed to have a uniform appearance. If you want a more customized public site look but do not have a technical background, you may want to contact us about purchasing one of our add on packages.

Navigate to the a CSS Injector
Public site area > CSS injector

Your existing rules will be listed here. If there are no rules, you will just see the "create a new rule" link.

Add a rule 
Click the "create a new rule" link.

Give the rule a title you will understand and recognize even a few months from now. This will help if you need to make changes down the line. Length of the title doesn't matter.
Paste or type in your css code into the CSS code area.
You can leave the theme choice blank and it will be used for your current default public theme - however, if you change your theme in the future, this code will automatically be applied, and that could cause your theme to look a little funny until you edit the css or disable the rules you created. It's recommended to add your current default theme here, so it only displays on that theme. You can always edit it if you want to add it to a new theme.

You can control which pages the css rule appears on - in most cases you'll either leave this blank on on the default settings, or you might change it so the css in only used on the listed pages, and set it to <front> (this will only apply the css to the front page). If you need to lis a different page, use the url, but only the portion that comes after your domain name.

In general, leave the Media settings as they are by default.

If you want to save this rule, but not use it right now, you can uncheck "enable rule"

Click save (it will take you back to the the main css injector page) or save and continue editing (this will save the rule, but keep you on this page).

NOTE: After making CSS changes, be sure to flush the site caches. You may also need to flush your browser cache before you can see the changes.

Edit an existing rule by clicking on the rule name and clicking edit.

Test CSS Changes using the "Inspector"
Info on opening the inspector here. (a firefox page, but the same process works in chrome)
Info on CSS rules here.

You can type right into the CSS portion of the inspector to test your new rules - then just copy the relevant sections and past it in the injector.

The css rules are  in the box on the bottom right.