Essential Grid, skin CSS - Cannot use backslash as escape character?

Support
#1

Hello,

Is there any way to add an escape character in the skin editor CSS in Essential Grid? Backslashes seem to be removed from the rendered code.

Here is what I would like to accomplish:

My CSS added in skin editor
.my-class::before {
content: ‘\e80a’;
}

And here is the rendered result:

Rendered CSS
.my-class::before {
content: ‘e80a’;
}

Thank you,
Andrew

#2

Hi there,

Thanks for writing in.

You have to add it twice, like this

.my-class::before {
content: '\\e80a';
}

But it’s more safer to add it in child theme’s style.css like this

.my-class::before {
content: '\e80a' !important;
}

Thanks!

#3

Hi Rad,

Thanks for your reply.

Adding two backslashes in the ESG skin CSS does not work for me. Yes, one backslash remains in the skin CSS in the editor after saving. However, it is then stripped out in the rendered code available to the browser. Also, if the ESG skin CSS is ever saved again, the remaining backslash is stripped out of the CSS. Risky, as you said.

Your second suggestion to add my CSS to the theme’s does work. For future maintenance, I’m concerned about having the skin CSS in two different locations. If I hadn’t come with a workaround which avoids the need for an escape character, I’d be tempted to move all the skin styles over the the theme CSS.

All the best,
Andrew

#4

Hi Andrew,

Theme Options > CSS will also strip the backslashes, the safe way would be adding it to child theme’s style.css file.

Thanks,

#5

Hey friech,

Thanks for the heads up but I’m not seeing that behaviour. A single backslash works just fine for me when I add it to Theme Options > Global CSS. It saves in the CSS and renders in the browser.

Best,
Andrew

#6

Hi Andrew,

Sorry for the confusion, we just being used to Global CSS striping backslashes, because that was a known behavior since X3. Yes, I just tested it and it did not strip the backslash anymore, so yup you can place it there. :slight_smile:

Have a nice day,
Cheers!

#7

Good to know. Thanks for following up.

Any chance you could implement the same non-stripping behaviour in the ESG skin CSS editor? That would be a welcome improvement.

In fact, that skin editor could use some TLC in general. It’s very small, and I assume you know about the double scroll-bar funkiness. No need to get back to me on this. I mention it in case your team plans any work on the component.

Thanks again for great support.

Best,
Andrew

#8

Hi there,

It’s not our plugin, we can’t promise but we may able to forward your request.

What feature of the skin has this issue? We could forward the details :slight_smile:

Thanks!

#9

Well, that explains why the UI seems so different from Themeco’s. I guess I conflated Themeco and ThemePunch. Sorry about that.

Below is a pic of the double scrollbar issue in ESG. You need to scroll horizontally to reveal the effective vertical scrollbar, otherwise its hidden. This is on Win10, Firefox.

The whole ESG UI is a wee bit rough IMO. There are spelling mistakes, too. I can’t remember where exactly. I mention all this in case it’s of constructive use. :slight_smile:

Best,
Andrew

#10

Hey Andrew,

Thanks for the feedback. I’ll post that in our issue tracker so our development team could forward this UI issue to the EG developers when they go through the list of reports.

#11

Thanks, Christian.

Best,
Andrew

#12

On behalf of my colleague, you’re welcome. Cheers!

#13

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.