Close

custom CSS after plugin's CSS

shayt
6 years ago
#2731 Quote
Avatar
  • 46
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
Boyko
6 years ago
#2732 Quote
Avatar
  • Moderator
  • 1439
shayt wrote:
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!
Regards,
Boyko Stanev
Nop-Templates.com
shayt
6 years ago
#2733 Quote
Avatar
  • 46
working great !

Thanks,
Shay


ehubcap
3 years ago
#10658 Quote
Avatar
  • 42
Boyko wrote:
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!


I'm implemented this method for my custom themes and plugins CSS and it work perfect. When I activate the Nopcommerce bundling, these files are left "unbundled" which is not desirably.
How can I get these Css files included in the bundling?.
As an aside note, also i want to use Grunt for rewrite a rule to route them to a Blob Storage
any advise on feasibility?
Help please
Thank you
Jose Plunkett
ehubcap 
hristian.dimov
3 years ago
#10664 Quote
Avatar
  • Moderator
  • 386
ehubcap wrote:

I'm implemented this method for my custom themes and plugins CSS and it work perfect. When I activate the Nopcommerce bundling, these files are left "unbundled" which is not desirably.
How can I get these Css files included in the bundling?.
As an aside note, also i want to use Grunt for rewrite a rule to route them to a Blob Storage
any advise on feasibility?
Help please
Thank you
Jose Plunkett
ehubcap 


Hi,

If you want to benefit from the bundling, you need to change a little bit the provided solution.

Change this:

@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)


To be this:

    @{
        Html.AddCssFileParts("~/Themes/DefaultClean/Content/styles.custom.plugins.css");
        
    }
    @Html.NopCssFiles(this.Url, ResourceLocation.Head)
    @Html.NopScripts(this.Url, ResourceLocation.Head)


Hope this helps!
Regards,
Hristian Dimov
Nop-Templates.com
ehubcap
3 years ago
#10673 Quote
Avatar
  • 42
Excellent, it works!
Thank you Hristian