Custom styles overriding builder-text?

General
1

Hi everyone,

I already asked a similar question in a comment on this post but after struggling with it some more I figured it deserves its own topic.

Is there a way for me to do custom styling and override the builder-text CSS class? I’ve tried just adding my styling to the custom CSS tab but it’s being overridden by the above. I tried adding !important to every one of my custom CSS lines, but that completely keeps me from doing anything that isn’t set down there, like making the text white on a green button, because it then once again overrides that with my CSS. This is getting confusing.

TL;DR is there a way to set custom styles? preferably site-wide? or a way to make the default not builder-text?

Thanks in advance!

2

This sounds like two questions. For the first one:

you can add a css rule like this (replace text-decoration with whatever properties you want):

.builder-text {
      text-decoration: underline;
    }

One thing to note though is that I don’t believe .builder-text should be adding any extra styles that need to be overridden. You should be able to just apply styles in the Builder editor (without using css) and the text should have those styles applied. If that is not working for you, can you share an example so we can try to help debug what is going on?

For your second question:

In terms applying styling in Builder, you can add CSS on each content entry; however, if you’d like to add global stying, I’d recommend adding it on your side in a stylesheet.

In general, you can edit a lot of the CSS in the Style tab and any custom CSS you can scroll to the bottom of the style tab and add additional attributes. However, sometimes you might just find it easier to add CSS or Javascript using CSS classes. Start in the Style tab and give your element a CSS class. Then go to the Data tab, scroll to the bottom and open Edit CSS + JSS. Here you can add your CSS.

3

Thanks so much for your quick reply!

When we were trying to implement the custom CSS it didn’t take so I asked our developer to take a look and he said that he could see that the text was inheriting a property. And this property was prohibiting us styling it.

I tried to remove this styling within the Styles tab but I couldn’t remove it, only change it. But then we’re back to a point where I have to style every text box individually using the Style tab. Adding a CSS class also didn’t seem to do the trick. I hope this makes sense.

Please let me know what other info you need, I’m happy to help resolve this!

4

An example from our developer:

if you wanted an example of conflicting css, for the first paragraph on https://kendraio-website.vercel.app/
“Kendraio is”…
this default CSS goes in and will not be overridden unless a more specific selector or “!important” modifier is used:

.css-1qggkls > p,
.css-1qggkls .builder-paragraph {
 color:inherit;
 line-height:inherit;
 -webkit-letter-spacing:inherit;
 -moz-letter-spacing:inherit;
 -ms-letter-spacing:inherit;
 letter-spacing:inherit;
 font-weight:inherit;
 font-size:inherit;
 text-align:inherit;
 font-family:inherit;
}
5

Hey Lena,

I changed the color of the text in Builder, and was able to see it in the preview. I changed the colors a few times and didn’t see any Builder styles overriding it.

Screen Shot 2021-03-19 at 12.52.17 PM
Screen Shot 2021-03-19 at 12.52.17 PM3090×1658 702 KB

Is there an screenshot/example of layer where you made changes in Builder and you didn’t see them on the site? Thanks!

6

Hi Kara, I forwarded your reply to our developer and this is what he came back with (pretty much copy-pasting to avoid misunderstandings, since I’m not a developer myself). He also added a solution for us at the end, but read for yourself. Hope this helps, otherwise I’ll see if I can get a screenshot. Also, I think it’s important to note that the problem doesn’t occur when editing text with the “Styles” tab, but only if you want to use the custom CSS tab to do all paragraphs or headings at the same time. Here’s our developers response:

This fails:

p {
color: red;
}

due to this:

.css-1qggkls > p, .css-1qggkls .builder-paragraph {
color: inherit;
}

We’d prefer coloring to work without having to override the builder CSS selector that’s doing the colour inheriting. We can do this though, like this, (very much like Kara suggested before):

.builder-text p
{
color: red;
}

The problem with this though is that it makes us dependent on their CSS classes, so it’s a little inelegant, but still very do-able.

7

Hi @kara, I just wanted to quickly check in with you before the weekend to see if there’s any update on this? Were you able to replicate the issue? Do you suggest we use the workaround that our developer suggested in my last reply or is there something else we’ve missed?

8

Hey @lenapgl it sounds like global styling would be more efficient for what you want to achieve. Is there a reason why you’re not using a stylesheet on your side?

9

Hi @Kara, nothing is really stopping us from doing that, of course. We were just wondering if there was a way to implement within Builder, since that’s where the styling is getting done. Also, it would make it easier to envision what the finished site would look like, instead of seeing an automatic styling that looks very different from what we will be using. Especially line-height might get tricky here.
We’ll try out using a style sheet on our end and we’ll keep this thread updated. Thanks for all your help!