Hi,
i am using several plugins (Nop Ultimate Plugin Collection),
and my custom CSS is getting loaded BEFORE the plugin's CSS,
so when i want to overwrite some things, i need to put " !important " in my CSS which is not a very good practice.
can i have my custom CSS loaded after the plugin's CSS ??
i want to be clear, i am NOT talking about nop default "styles.rtl.css",
i am talking about PLUGIN css.
Thanks,
Shay
Hi Shay,
Yes, it is not a good practice to use !important. Basically you want to separate your changes to the css of plugins from the Ultimate Plugin Collection and to do this in the best possible manner.
There are two options here:
1. Have a separate custom.pluginname.css file i.e custom.ajaxcart.css and include this css in the view(.cshtml) file of the plugin. This approach will be working but is not the best one as you will need to go through all the plugins and modify their views and also add new files for each plugin.
2. The better approach here is to have a
styles.custom.plugins.css file that is included
LAST. This way any definitions in it will override the styling in the plugins and all you need to do is to include a single file (for better performance). Here is how to do this:
- Go to your
theme folder i.e
DefaultClean and add a new file in the
Content folder
styles.custom.plugins.css- Include this file to be last by modifying the
_Root.Head.cshtml file as shown below (just add the line in bold).
@Html.NopCssFiles(this.Url, ResourceLocation.Head)
<link type="text/css" rel="Stylesheet" href="@Url.Content("~/Themes/DefaultClean/Content/styles.custom.plugins.css")" />
@Html.NopScripts(this.Url, ResourceLocation.Head)
Now you can easily override any css definitions without the need to add !important and at the same time have all your style changes separated in a file, which will make your future upgrades a breeze.
Hope this helps!
