Shopping cart (0)
You have no items in your shopping cart.
Close
Menu

Combine CSS - to one file?

Advanced search
Reply
jakubz
4 years ago
#15875 Quote
Avatar
  • 182
Hi! i don't want use css bundling and start thinking to make one css where i combine all this files:
Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");



If i create file "styles2.css" and overwrite code and write:
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles2.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

This should work? or maybe you need this css also in other places / code? Do you try this?


PS Maybe you can tell me, where plugins have link to css? i check few and can't find place where you place link to css.

Maybe someone from you can help? our gogle insight  is weak, because we have too many files "blocking". After changes we should have 1-3 css…
Boyko
4 years ago
#15878 Quote
Avatar
  • Moderator
  • 1570
jakubz wrote:
Hi! i don't want use css bundling and start thinking to make one css where i combine all this files:
Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");



If i create file "styles2.css" and overwrite code and write:
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles2.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

This should work? or maybe you need this css also in other places / code? Do you try this?


PS Maybe you can tell me, where plugins have link to css? i check few and can't find place where you place link to css.

Maybe someone from you can help? our gogle insight  is weak, because we have too many files "blocking". After changes we should have 1-3 css…


Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).
Regards,
Nop-Templates.com Team
jakubz
4 years ago
#15884 Quote
Avatar
  • 182
Boyko wrote:
Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).



Hi! well we have only 35 points on mobile... so i need to try. Of course we can reduce products on page, and then it's looks better. We have higher sell when we show 48 products on page :/ I was thinking about "something" blocking, and in first loading page "show only 12/24 products", and "load later" (like your infinity scroll)… and in second load show 48 products, when all other information are download… But it's hard to do i think ;)

I decide to combine some plugins (which show on the same page). Ribbons / filters, and resign from combine ROPC, quick tabs, store lockator etc.

Still don't know what to do with this 480px / 720px css…

But thanks for your answer.  
jakubz
4 years ago
#15891 Quote
Avatar
  • 182
Boyko wrote:
Hi! i don't want use css bundling and start thinking to make one css where i combine all this files:
Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");



If i create file "styles2.css" and overwrite code and write:
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles2.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.css");

Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).



Well i do this, and remove from all css: air styles, and variant-2 which i don't use. My on mobile increase from: 36 points, to 56 points (and still can combine 2-3 css files).

But i must move it back, because have some problems:

I change in Themes > Element > Views > Shared > Head.cshtml and set only:

tml.AppendCssFileParts("~/Plugins/SevenSpikes.Core/Styles/perfect-scrollbar.min.css");

    if (supportRtl)
    {
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1320.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/1000.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/720.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/480.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/mobile-only.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/tables.rtl.css");
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles.rtl.css");
    }
    else
    {
        Html.AppendCssFileParts("~/Themes/Element/Content/CSS/styles-all.css");
    }


but from some reason it's still "download" "style.css" file from somewhere? I clear cache, buts nothing change. (when i have both downloaded… page css is broken. and gogle insight don't show better result… I try it on local and it's works fine... but on prodution

Can you help me? Is any other place where i should change css path?  maybe it's a local problem...? Maybe you know.
jakubz
4 years ago
#15893 Quote
Avatar
  • 182
Ok. It's maybe something in cache... i change styles name, and it stop download it, and works:)

Still lots to do, but... 50 points reached;)
jakubz
4 years ago
#15911 Quote
Avatar
  • 182
Boyko wrote:

Hi jakubz,

You should simply search for .css in the plugins Razor view files (.cshtml) and see where we reference them (it is a different view for each plugin).
I don't think it is a good idea to combine all css files into one simply because on some pages certain plugins are not included at all and this way you will end up with a lot of unused css that will be loaded (at least the page speed tool will complain about it for sure).


Hi! i remove, from element shared head… /Themes/Element/Content/CSS/styles.css but when i go on firefox i still see this link. I try ctrl + F5 :/ Google insight don't show me this link in result. But on firefox ctrl + F5 nothing change :/ i rename thi sfile so it's not downloaded again… but i'm little worry there is some mechanism to add this? Maybe you know? I change razor file \Themes\Element\Views\Shared\head… and don't find in other places styles.css:/

Maybe you can ask collegue is maybe another place to check?
Reply

Products

Resources

Support

About Us

Secure payment with

  • 2Checkout
  • Paypal
Copyright © 2024 Nop-Templates. Reproduction in whole or in parts is prohibited.