Our themes come with a built-in local.css file, which is aimed particularly for style edits. It’s safe to edit anything in the theme, by adding new or overriding existing style choices, without fear of breaking anything, since you can always revert back to the original theme style, by removing those from local.css.
As an example, to test how this works, feel welcome to add the following rule to the local.css file of a live installation, which is powered by one of our themes, to see the effect:
body {
color: red;
}
Save the local.css file, then refresh your site, in your browser. You should see that the text color has been switched to red.
Now try removing it again (always remember to save the local.css file), and see how you’ve rolled back to the previous state.
To maintain compatibility with theme updates, we strongly recommend that you do not edit the core CSS files that drive the theme style and you do any edits only to the local.css file.
Differences in our Drupal 8 themes:
Our Drupal 8 themes instead of a single local.css file come with 3 separate files that override the specific css category.
Each of these CSS files is located under the corresponding folder inside the theme folder:
- css/base/local-base.css
- css/components/local-components.css
- css/theme/local-theme.css
You can read more regarding these categories and the logic behind those in the url below.
https://www.drupal.org/node/1887922
In general if you do not have the time to research and understand all this architecture we suggest that you use the css/theme/local-theme.css file for your CSS rules as this file will be loaded at the end of all other CSS files thus overriding any existing rules with your own.
Q. How can I know which selectors to use?
Please note, this requires some knowledge of HTML and CSS. Assuming you have a bit of expertise on this, to identify the selectors to use for carrying out styling edits, you can use the built-in development tools of your preferred web browser – every single one of the major browsers comes with built-in tools to help you with this.
Depending on the browser you prefer to use, here are some links to get you started:
- Chrome: https://developer.chrome.com/devtools
- Firefox: https://developer.mozilla.org/en-US/docs/Tools (Firebug is also famous and commonly used)
- Safari: https://developer.apple.com/safari/tools/
- Internet Explorer: https://msdn.microsoft.com/en-us/library/gg589512(v=vs.85).aspx
Q: What if I want to make more major edits?
To implement more major edits to the theme – which may not be possible by using CSS alone – while maintaining compatibility with future theme updates, it’s a good idea to Create a Sub-theme.
