CSS Module Available?

Obi · October 11, 2022

Is there a module that will allow you to override the theme code with your own CSS file?

I managed to accomplish this using the Panda theme by removing the database storage and adding the desired custom css filename to the $css_files array (about line 8218 in /modules/stthemeeditor/stthemeeditor.php) - it works nicely, but there is no stthemeeditor.php equivalent that I have found so far in thirty bees community-default-theme. I really don't want to spend the time to write the module for this, especiallly if one already exists, so any help would be appreciated.

Thanks

e-com · October 11, 2022

Overwriting CSS of template with your own CSS is the best example of how websites should not be made. Then such pages take an hour to load :)
But if you absolutely must do it, then: Preferences -> Custom code -> Add extra css to your pages

Obi · October 13, 2022

On 10/11/2022 at 6:16 PM, e-com said:

Overwriting CSS of template with your own CSS is the best example of how websites should not be made. Then such pages take an hour to load :)
But if you absolutely must do it, then: Preferences -> Custom code -> Add extra css to your pages

I don't have a loading problem and have over 1 million visitors this year on my other site using the same technique... What is bad is serving that "custom css" from the database, which Panda does.

datakick · October 13, 2022

I'm not sure what you are trying to achieve. If you just need a mechanism to include another css file, then simply put it inside your theme's /css/autoload directory

Obi · October 13, 2022

1 hour ago, datakick said:

I'm not sure what you are trying to achieve. If you just need a mechanism to include another css file, then simply put it inside your theme's /css/autoload directory

That would work except that I need to ensure that my custom.css file loads last for inheritance reasons.

datakick · October 13, 2022

9 minutes ago, Obi said:

That would work except that I need to ensure that my custom.css file loads last for inheritance reasons.

css is all about specificity. Proximity is only relevant if multiple selectors have the same specificity level.

Since your intent is to 'override' things, I suggest you explicitly increase specificity of your overrides.

For example, if the selector in core css file you want to override is

.btn.primary span {
  color: black;
  font-size: 2em;
}

then you can create override selector to change the color, you can add this to override file:

.overridable .btn.primary span {
  color: red;
}

You will also have to add class='overridable' to the <body class='overridable'>. This way, you can actually toggle the class in <body> to see the impact of your overrides. Alternatively, you can do it without template modification, for example by

body .btn.primary span {
  color: red;
}

But here you have no easy way to debug the overrides.

If you want to depend on proximity (==order of css files), then you will indeed have to create a module to modify the css list.

Obi · October 13, 2022

1 hour ago, datakick said:
css is all about specificity. Proximity is only relevant if multiple selectors have the same specificity level.

Since your intent is to 'override' things, I suggest you explicitly increase specificity of your overrides.

For example, if the selector in core css file you want to override is
.btn.primary span {
  color: black;
  font-size: 2em;
}
then you can create override selector to change the color, you can add this to override file:
.overridable .btn.primary span {
  color: red;
}
You will also have to add class='overridable' to the <body class='overridable'>. This way, you can actually toggle the class in <body> to see the impact of your overrides. Alternatively, you can do it without template modification, for example by
body .btn.primary span {
  color: red;
}
But here you have no easy way to debug the overrides.

If you want to depend on proximity (==order of css files), then you will indeed have to create a module to modify the css list.

In order to prevent breaking the theme customizations on upgrade, I believe using proximity is best (your point on including more specificity isn't a bad idea) - but proximity has worked well for me for years using the Panda theme. However the new Panda 1.5 incarnation doesn't work correctly with TB 1.3 and based on the installation, it looks like they have injected some license validation code somewhere - total showstopper for me as I just went through that with the eMagicOne Presta Store Manager crapping out on me until they fixed their license validation server. I had to resort to shipping and processing orders and inventory management via the old backoffice screens - painful.

So to my simple question which has really not yet been answered: How DO I ADD a custom css stylesheet file to the $css_files array (and where) so that it is loaded LAST from/within the setMedia function? (I assume this is at least close to where the magic should happen.)

I've gotten the file to load after the hook in the setMedia function by using:

$this->addCSS(_THEME_CSS_DIR_.'my-custom.css', 'all');

...but all the module css files still load after that, which is a problem for me.

Thanks

datakick · October 14, 2022

13 hours ago, Obi said:

So to my simple question which has really not yet been answered: How DO I ADD a custom css stylesheet file to the $css_files array (and where) so that it is loaded LAST from/within the setMedia function? (I assume this is at least close to where the magic should happen.)

Couple of ways to achieve this.

Easiest solution is to edit your theme/template and just add your css file in there. Of course, this will not survive the theme update
other solution is to create a module, that registers displayHeader hook, and adds your custom css file. You will have to ensure your module is LAST in the position list (Modules & Services > Positions)
create override for the FrontController::initContent method and do your preprocessing there

I still think that the 'proximity rule' approach is not best way to handle this problem, as it does not really solves it. Your override *can* stop working when theme author changes html markup or specificity of css rules. So after any theme update you should check that all overrides still works.

As an example, let's say that in version 1.0 of the theme the css file contains this rule:

.btn { color: blue }

You override it by

.btn { color: red }

This works, because of the proximity rule. Now, let's say that theme author, for some reason, changes theme css rule in version 2.0 to

span.btn { color: blue }

Now, your override will not work, because specificity of new css rule is higher than your override. So even though your rule is 'closer', it is not picked up, and you have to modify it anyway.

From my point of view, overriding using proximity or higher specificity are basically the same.

After all updates somebody have to check that rules still applies. That's why I don't see much sense in trying to 'bend' thirtybees core to include some css file as last. But it's your decision

Obi · October 21, 2022

On 10/14/2022 at 1:54 AM, datakick said:
Couple of ways to achieve this.

Easiest solution is to edit your theme/template and just add your css file in there. Of course, this will not survive the theme update

other solution is to create a module, that registers displayHeader hook, and adds your custom css file. You will have to ensure your module is LAST in the position list (Modules & Services > Positions)

create override for the FrontController::initContent method and do your preprocessing there

I still think that the 'proximity rule' approach is not best way to handle this problem, as it does not really solves it. Your override *can* stop working when theme author changes html markup or specificity of css rules. So after any theme update you should check that all overrides still works.

As an example, let's say that in version 1.0 of the theme the css file contains this rule:
.btn { color: blue }
You override it by
.btn { color: red }
This works, because of the proximity rule. Now, let's say that theme author, for some reason, changes theme css rule in version 2.0 to
span.btn { color: blue }
Now, your override will not work, because specificity of new css rule is higher than your override. So even though your rule is 'closer', it is not picked up, and you have to modify it anyway.

From my point of view, overriding using proximity or higher specificity are basically the same.

After all updates somebody have to check that rules still applies. That's why I don't see much sense in trying to 'bend' thirtybees core to include some css file as last. But it's your decision

Thank you for that information - very helpful. I do understand that the theme author can change the rules - part of the painful issue that has caused me to abandon panda for use with this new website. Besides various other issues, they changed the specificity on a large number of declarations breaking the custom css that gives my other site it's very unique appearance - 1800 lines of css morph the site from a bland out of the box default looking theme into what I ended up with. [screenshots attached] (Face it all of Panda's themes were more or less black and white variations of the original - but with lots of extra modules and the custom css and js fields in their editor - the theme worked and it worked well.) I praised them for quite some time for having a theme tool that allowed me to create such a site with almost no core code customization - but when I hit 1800 lines - because they stored the css code in the configuration table... it broke. That forced me to utilize the technique above moving that code into a custom.css file and loading it for proximity override.

It's been through 2 upgrads of the theme and all was well until I attempted a migration from PS 1.6 to TB 1.3.0 with that site - boom! doesn't work... after a month - I'm done - I'll find another solution. And this is where your specificity COULD have helped, but they changed the selectors substantially so specificity would not have overcome that issue. I did not however give up on Thirty Bees, and because of the PHP version issues the hobby site is now facing - I chose to select TB for this new site rather than deal with Prestashop's stupidity in the 1.7 codebase. But I digress...

I actually have my custom css working now using an override and I'm happy with that result. I may look into option 2 for a more flexible solution in the future - maybe - probably not though since option 3 does exactly what I was after.

Screenshots of the other site created with Panda (Demo 7 theme was the style I started with):

Listing Page:

Product Page (above the fold):

Product page (below the fold):

The site gets a decent amount of traffic (server logs indicate 4.6 million hits this year with nearly 750k pages served).

This is what that Demo 7 theme looks like out of the box ...

Every page in the site has been customized with that proximity loaded custom css stylesheet... and if it weren't for the php issue with PS1.6 - I wouldn't even be considering making any migrations with that site.

Hopefully this conversation can give others some inspiration in developing or customizing their themes. I'll come back and post what I've done with the community-default-theme if anyone is interested.

Thanks again for providing the information, it should help others in the future.

Edited October 21, 2022 by Obi

Sign In

CSS Module Available?

Question

Obi

8 answers to this question

Recommended Posts

e-com

Obi

datakick

Obi

datakick

Obi

datakick

Obi

Create an account or sign in to comment

Create an account

Sign in