In the Backlight Docs, under CSS, it says:
When overriding default styling, it’s good to begin by examining the page template’s generated stylesheet. The best way to avoid conflicts or strange behavior is to use the same selectors that we’ve used to style Backlight.
When I look at the CSS files in Backlight (backlight/custom/css/custom.css), I don’t see much. It seems I should see more selectors. Is there another place to look?
look at the page source code.
In the head section, find a section with several <link rel=… entries. It should be the first <link rel=“stylesheet” entry. It looks like the line I’ve highlighted.
click on the link (after href=“). That will take you to the generated stylesheet. Copy and paste it into a text/code editor. If you’re using a decent editor, save it as a .css file and you should get syntax highlighting.
Thanks Rod. After creating/modifying the CSS file, where should I save it?
That file is just for reference. No need to use it for a custom css file. For any custom css you need, start with a new file. Any css you put in there will override the main css file.
Then upload your file to your backlight/custom/css/ folder and choose the file in your page template as outlined in the docs
Rather than cruising the generated stylesheet, unless you’ve got purposeful reason to do so, I advise getting familiar with the browser’s developer tools, and inspecting just the elements that are of interest to you.
