Problems with Element/Inline CSS – it´s working but cannot be seen and edited after Pro update

[JesperF]

For some reason, I cannot see and edit the custom CSS I’ve added to my elements on my entire site.

E.g. I have entered a “transition-delay: 0.2;” on this column, and it is showing correctly when I preview the page:

But when I want to edit the setting in Pro, I cannot see the “transition-delay: 0.2;” CSS anywhere:

Actually, it looks like it´s a general problem with all my CSS on elements … please help.

[thai]

Hi There,

When you add the element CSS, the format should like this:

$el {
    transition-delay: 0.2;
}

Hope it helps

[JesperF]

There is something very wrong. I think I used to use the Inline CSS field for all my custom CSS on elements.
I can see the Inline CSS field on sections, images etc.:

But there is not an Inline CSS field on Columns.

And the CSS you sent:

Doesn’t work when I preview the page:

---

Just found this screenshot from another user that shows the Column > Inline CSS field:

But I do not have this field (anymore) on my site:

Please help. Do others have an Inline CSS field on columns?

Thanks in advance!

[ruenel]

Hello There,

Thanks for updating in!

For classic elements like classic columns, you will have style field.

Screenshot

For the v2 elements, you find the “Customize” tab and you have the element css

Screenshot

​
​To assist you better with this issue, would you mind providing us the url of your site with login credentials so we can take a closer look? To do this, you can create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
Thank you.

[JesperF]

Many thanks. Enclosed login info in note. I´ve created a page that should show the problems I’m having.

Hope it makes sense. Do let me know if you need more information.

Thanks again.

P.S. Please do not show screenshots where you display the URL for the public. It’s a site in progress and not launched yet.

[rad]

Hi @filecamp,

Looks like it’s being stripped down since the column itself generates its own styling. Instead, please follow the workaround that uses Element CSS instead of inline CSS, and make sure to use !important.

Like this

$el {
    transition-delay: 0.2 !important;
}

Thanks!

[JesperF]

Thanks. It helped to add the !important tag to the CSS. So far so good

> $el {
>     transition-delay: 0.2s !important;
> }

But I still can’t understand how these columns can have their own styling that I can´t edit (anymore). I can overwrite the styling with the !important tag, so I can move on.
But how come I cannot edit these settings anymore, is it something that has happened in a Pro update? Just trying to understand …

Thanks again!

[Alaa]

Hi @filecamp

It’s not necessary to include !important in the CSS code you have, you just need to use the correct syntax to override the targeted CSS selector, which is this one:

$el.x-column[data-fade="1"], $el.x-column[data-fade="true"] {
    transition-delay: 2s;
}

I tested that on your website and it’s working, because in fact you are overriding the time (start and finish) of the “cubic-bezier()” function. Check this screenshot:

These CSS lines are included in integerity-light.css file by default.

I hope this clarify everything,
Thanks.

[JesperF]

Thanks. But I still cannot understand how I can edit this code on this column:

I promise this will be my last question

Thanks again.

[Alaa]

Hi @filecamp

I took another look at this issue and looks like I missed something you said, which is that there is no inline-css field for sections now, sorry for that. Perhaps this has something to do with any of the theme updates that was released after you added the code…

Right now, you can either rebuild this content again or use the CSS !important trick shared by Rad above.

Thanks.

[JesperF]

Thank you very much! I thought I was going crazy. It makes sense, that Themeco has removed the Inline CSS option for columns in one of the their updates. I’ll rebuild or use the !important trick to overwrite the existing custom CSS.

All is good … thanks again!

Jesper

[Prasant]

You are most welcome.

[JesperF]

Last questions, I promise:

I have custom Inline CSS on a lot of columns throughout our entire site, so it´s quite a large task to overwrite them all with the new Element CSS.

Is there is any chance that Themeco will add in the Inline CSS option back on Columns … I mean do you think it´s a bug, or an intended change? Should I make a bug report to Themeco?

Thanks again

[Prasant]

Hello @filecamp,

It’s not a bug actually and more so it’s a intended feature to replace inline with Element CSS. As of now you will have to overwrite with Element CSS.

Thanks for understanding.

[JesperF]

Thank you … just wanted to make sure.

Over and out.

[Prasant]

Roger sir. You are most welcome.