Page or Global CSS do not apply

[mircotripoczky]

Hi there,

no matter if I add custom CSS e.g. like this simple one:

.x-always-active, .x-anchor:hover {
  text-decoration: underline !important;
}

as page or global CSS, it’s working and shown in Cornerstone, but not at the front end. Only if I add it as custom element CSS like

$el .x-always-active, .x-anchor:hover {
      text-decoration: underline !important;
    }

it’s working at the front end.

It’s a fresh Wordpress (latest 6.4.2) and Pro Theme (latest 6.4.6) installation with just 3 plugins activated (Disable Gutenberg, Safe SVG and Smooth Scroll). But also deactivating these doesn’t change that.

Any idea?

best regards
Mirco

[marc_a]

Hey Mirco,

Thanks for reaching out!

There could be more priority that is also !important that’s why your custom CSS is not working. You could try something like this one:

.site .x-always-active,  .site .x-anchor:hover {
  text-decoration: underline !important;
}

Please note that custom CSS code is outside the scope of our support. Issues that might arise from the use of custom CSS code and further enhancements should be directed to a third-party developer or you can avail One where we can answer questions outside of the features of our theme.

Hope that helps and thank you for understanding.

[mircotripoczky]

Hi @marc_a,

it was working perfectly one or more version of Pro ago and adding custom CSS or JS to pages or globally is a very handy feature of Cornerstone of Pro. From my understanding, there are more strict CSS rules of the theme or the stack in place now, which override any custom CSS on pages or globally maybe because these are loaded last?

I would see this as a bug at the current version. Could you please let this check by the devs?

best regards
Mirco

[ruenel]

Hello Mirco,

The CSS built-in the theme makes sure that it won’t be easily overridden by any plugin which is why CSS Specificity is used. You can check out more about it here:

• CSS Specificity (w3schools.com)

Best Regards.

[raye]

Hey @mircotripoczky,

just out of curiosity I setup a fresh install with Pro Theme only and I was not able to reproduce.
I added a button element which uses the .x-anchor class and I added this stylesheet to global CSS settings:

.x-anchor:hover {
  font-weight: 800;
  color: #ff0000;
  text-decoration: underline;
} 

text-decoration and font-weight works out of the box.
color did not work due to the Cornerstone color setup of the button (which controls the deeper nested .x-anchor-text-primary class I think, see screenshot below) so it needs an !important statement to overwrite the Cornerstone editor settings.

It would be much easier if you could provide an online example to have a look on. It really depends on what you want to achieve.

The button element does have several child DIVs which could change specificity as seen in this screenshot:

So if you want to change i.e. the text color I would tend to use a more specific CSS selector like x-anchor-text-primary:hover or in this case .x-anchor span:hover should work as well – but it depends what you want to achieve.

As far as I have tested yet, I would say everything is working as it should.

[marc_a]

Hey @raye,

Thanks for chiming in, we really appreciate your time and effort as always. @mircotripoczky, please let us know how it goes on your end.

Cheers!

[mircotripoczky]

Thanks @raye for looking into it and testing. I will also have another look in the next days, because our new website has to be finished soon (this quarter).

PS: My co-worker gave me the nickname “Rocketman”, because I’m pretty fast at creating and changing pages. But the magic happens just because of Cornerstone

best regards
Mirco

[tristup]

Hi Micro,

Please let us know if you find any problems after checking the same.

Thanks