Quick Style Editor (CSS)
This plugin allows you to add your own custom styles (written in CSS) that will be used on every page throughout your site.
This is best used when you need to make small changes to an existing theme or widget, but you do not want to go through the hassle of editing source files or redeploying your site. Instead, you can use this plugin to add extra styles to make your site look how you want.
For example, do you want to make some headings slightly larger? Or change the background colour of some elements in your product pages? Or make some other elements stand out a bit more by having a bigger margin around them? That's easy! You can use the Easy Style Editor plugin to make those changes.
The styles all need to be written using CSS (cascading style sheets), so you will need to have at least a basic understanding of how this looks. There's lots of free resources available online for this but be aware that this plugin will include anything that you provide for these custom styles, so it's important to test that the changes you're making are working as you expect, and work in the major browsers that your users are using.
However, a handy auto-formatter is included, by clicking the 'Format styles' button, which will rearrange your styles to all be neat and tidy.
Features:
- Add your own style changes (in CSS) throughout your site
- Includes an auto-formatter for your styles
- Can choose how to include your styles, either inline or via a file
- Can choose to load your styles asynchronously
Installation instructions:
- Download the plugin archive
- Go to admin area > Configuration > Local plugins
- Upload the plugin archive using the "Upload plugin or theme" plugin
- Find the new plugin in the list, and click the "Install" button
- Once installed, you will need to enable the plugin by clicking the “Edit” button for the plugin, and checking the "Enabled" option
For more information about how to install plugins see here.
Once enabled, you will be able to access the Style editor page (admin area > Configuration > Style editor) and start adding your styles.
How does the plugin work?
The plugin adds a new admin page (admin area > Configuration > Style editor), where you can enter your custom styles. Make the changes that you need and click save. These styles will then be included as part of every page, being placed at the end of the HTML <HEAD> section.
Configuration:
There are a few different options, controlling how the styles are included.
- Disable custom styles - This prevents the custom styles from being included, without the need to uninstall the plugin
- Style loading type - Here you can choose whether the styles are loaded 'inline' or via a 'file'
- Load asynchronously - Chooses whether the file used for the custom styles are loaded asynchronously or not
Style loading types
CSS stylesheets like this can be loaded in two ways – either included within the actual page itself (the 'inline' option) or as a separate file that is requested whilst the main page is being loaded (the 'file' option).
This plugin gives you the option of choosing between the two.
The 'inline' option is good for when you only have a small number of custom styles – it prevents the browser from having to request another file from your site, which is quicker for your visitor, and reduces the load on your servers. However, these styles will increase the size of the page returned to your visitor, so will make the download time slightly longer for every page.
The 'file' option is good when you start to increase the number of custom styles – instead of being included within every page, only a link to the file is included, and the browser will request this file when it is loading the page. This is the typical way that CSS stylesheets are loaded. The good news is that once a browser has requested this file, it doesn't need to request it again for another year – so when your visitor goes to another page on your site, it's already got this file of custom styles, so doesn't need to request it again.
When you're using the 'file' option, you have the additional option of loading this file asynchronously. By default, the file will be loaded synchronously, so the browser will wait for this file to be downloaded before finishing loading the rest of the page. This ensures that the custom styles are available and shown when the page is first loaded, however this might add a slight delay on the time it takes to load the page. An alternative is to load this file asynchronously, so that the browser does not wait for the file to be downloaded and will finish off loading the page first. Whilst this allows the page to be loaded as quick as possible, there might be a slight delay between the page loading and the custom styles being shown (for example, if you change the background colour from red to blue, then you might see the page load with a red background first, then quickly change to blue). This will only happen for visitors who don't have the file cached, so is likely to happen only on the first time a visitor accesses your site. It's best to experiment with each option to see which one works best for your site, and the style changes that you're making.
What happens when I update my custom styles?
If you update your custom styles, then the changes are immediately visible on your site. If you have chosen the 'inline' option, then the latest styles will be included in the page anyway. If you have chosen the 'file' option, then the version of the file is updated, so browsers will know that they need to request the file from your servers again to get the up-to-date styles.
Why isn't my style showing up correctly?
If you make a change, but don't see the change when you look at your site, there are a few things you can check.
Firstly, check that the plugin is enabled correctly, and that you haven't got 'Disable custom styles' selected.
Then, you need to check that your CSS is correct, and that you are referencing your elements correctly. Check that you've spelt classes and ids correctly.
Finally, it may be that your styles are conflicting with the styles set by your theme or a plugin. In this case, you need to make your styles more specific, so that the browser will prioritise your styles over anything else. The easiest way to do this is add '!important' to the end of your style (e.g., h1 { color: red !important; }). There is a good write-up on your options, including this one, here: developer.mozilla.org/en-US/docs/Web/CSS/Specificity
I was struggling to add google fonts and editing the default theme without any progress.
Now it is easer to change what I want, and see it at once.
Thanks:)
After the installation, don't forget to:
admin area > Configuration > local plugins > Style editor > edit > enable