Skip Navigation

[Resolved] CSS classes not updating when using Beaver Builder to create a template

This thread is resolved. Here is a description of the problem and solution.

Problem: The CSS I wrote isn't being applied correctly.

Solution: Use specificity to override styles applied by your theme and other plugins.

Relevant Documentation:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

This support ticket is created 6 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 8:00 – 12:00 - -
13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 13:00 – 17:00 - -

Supporter timezone: America/New_York (GMT-04:00)

This topic contains 7 replies, has 3 voices.

Last updated by adamR-11 6 years ago.

Assisted by: Christian Cox.

Author
Posts
#1163724
2.png
1.png

I am trying to:

Redesign my single posts with Toolset, instead of Beaver Themer.

I created a Toolset Content Template with Beaver Builder, and assigned a CSS class to the main content in the post. But the CSS is not being applied.

Link to a page where the issue can be seen:

hidden link

User name: lawoffice
Password: lawoffice

I expected to see:

The links in the article would appear underlined, like in this post: hidden link

Instead, I got:

The links in the article are not underlined.

#1163894

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adam,

Thank you for contacting our support forum.

Could try using !important on your css class and see it this works?

Thanks,
Shane

#1164564

Thanks. I tried adding !important, it doesn't help. 🙁

#1165010

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adam,

Mind providing admin access so that I can check this one out for you ?

The private fields have been enabled for your next response.

Thanks,
Shane

#1165770

Shane
Supporter

Languages: English (English )

Timezone: America/Jamaica (GMT-05:00)

Hi Adam,

You can try using this css.

.ltr a{
    background-image: linear-gradient(#fff 82%, #4d86ae 50%);
    background-repeat: repeat-x;
    font-size: 1em;
    color: #000000;
}

This should work.
Thanks,
Shane

#1167102

Thanks.

I added that code to my style.css

I flushed the site cache, the Beaver Builder cache, the WPML cache, and I force-refreshed the page in Chrome, still the change did not show up.

Are you sure I should use the class ".ltr"?

Please let me know what can be done, thanks.

#1167851

Hi, Shane is out on holiday this week so I'm looking over his tickets. It looks like the "ltr" isn't a class at all, so .ltr isn't right. I believe the following code will fix the problem:

.fl-post .fl-post-content a {
    background-image: linear-gradient(#fff 82%, #4d86ae 50%);
    background-repeat: repeat-x;
    font-size: 1em;
    color: #000000;
}

.fl-post .fl-post-content a:hover {
    background-image: linear-gradient(#fff 82%, #ccdce8 50%);
    text-decoration: none;
}
#1168546

Hi, my css fix is working now - dunno why it wasn't working before. Thanks.