Global CSS Not Active on Pro Editing Page

Support
#1

Hi.

I have full custom CSS for all versions of my website on different devices so I won’t have to manually work on different versions of my website (5 versions of website? It isn’t an easy task at all across several pages). It works perfectly when I view the website from different devices.

The issue now is that the Global CSS is not active on Pro Editor. I mean, when I am working on a page from Pro Editor, the data on the Global CSS are not reflected directly on the editor except when the page is visited.

I think this needs to be fixed as it’d make working on a page more appealing.

Doesn’t look good when I began editing a page… I don’t want to go through the stress of modifying various values like colours, font style/family and sizes across devices. Custom CSS will made my life easier.

I truly need this and I am sure others will need it too.

Please consider adding this to your feature requests.

X and Pro can only get better…

Thanks.

#2

Hi Barry,

Thank you for writing in, I understand that you’re learning things and that is good. But I would like to point a few things.

That is fine if that works for you, but you don’t really need to do that, X and PRO is a responsive theme, you just need to learn how elements behave naturally in responsive view, yes there are times that you need to utilize the Hide During Breakpoints and custom media query but not go as far as having 5 versions of the website.

You might already have watched these videos, but I would advise you to review it.

On the contrary it actually your Custom CSS that is giving you the issue. We want to help you with this but we can not provide support for customization.

You might be using generated classes on your selector that only generated on the frontend. Try adding your custom CSS on the Settings > Preferences > Custom UI CSS area.

Cheers!

#3

Thanks for your quick response.

Well, not actually different versions per say and not layout. I mean I have different font size specifications for the 5 breakpoints included in the builder. So I don’t have to do the hiding stuff because it’s actually time consuming and it also will add more weight to the pages.

I also have specified font family and colour for h1, h2, h3, he and p with different classes so I don’t have to select those values everytime. I simply point them to the CSS using classes.

#4

I added the custom CSS so I won’t have to specify these common values all the time and I don’t want to use preset either.

I thought pointing an element to the custom CSS with class(es) or id(s) shouldn’t be a problem either but will only make my job easier.

Well, the CSS works fine on the front end. I think the builder needs to respond to the global CSS too.

#5

I added the custom CSS to the Custom UI Area but I can’t see any changes.

The Global CSS works only on the front end?

#6

Hi Barry,

I can’t reproduce the issue in my installation, the global CSS is being applied within the builder. But for clarification, are you trying to edit global CSS and builder content at the same time? Like you’re expecting to see a real time changes made from one window (global CSS) to another window (builder)? If yes then it’s not currently possible, for every edit you made in Global CSS, you’ll have to reload the entire builder to make sure the CSS changes in effect.

Else, please provide a video recording on how to reproduce the issue and we’ll check and try it on our installation to confirm if it’s a bug.

Thanks!

#7

When I make any changes on Global CSS, I always refresh the Builder Window but I don’t seem to see some of the effects especially on headers.

I will try to make a recording so I can show it to you.

#8

Hey Barry,

Thanks in advance for recording.

I’d also like to suggest that you check all your custom CSS for syntax errors. Just in case you don’t know, you can use tools like http://csslint.net/ to check for errors for you.

Also, please check the targeting of elements and point what elements your editing in the vide.

Lastly, give us WordPress admin in a Secure Note so we could test if we need to.

Thanks.

#9

I second the issue that Barry has raised.
I’ve been trying to apply css entered from the Global CSS section in theme options to elements on the page.

e.g. I created an .h1-white class, assigned it to a headline in my Pro editor, then created CSS for that class in the Global CSS Customizer, but nothing changes.

In addition to that, I’m unable to override the Headings color set in the Theme Options > Typography section even when I use Pro’s “Text Color” setting.

Basically, it looks like the Theme Options > Headings Font Color option is overriding everything else, no matter what. Which really isn’t a workable situation. My headings don’t have a lot of color variety to them, but they certainly need more than just one color.

Here’s a link to a screencast showing what I’ve tried, and how it’s all failing to override the theme options setting.

Please help!

#11

Hi @gmhansen,

I saw similar issues like on your video, and it’s usually caused by broken custom CSS somewhere. Please note that all CSS is combined together once it’s generated based on the settings, thus, CSS added to another element, or header, or global CSS could affect that. Unfortunately, I can’t check your site since it’s not accessible from our end.

I recommend opening a new thread about this issue and provide your login credentials in the secure note, and please allow us to access it. And based on the video, your color issue is different from this thread’s CSS topic.

Thanks!

#12

Let’s put it this way…

If I add an Headline Element and I want it to take some of my CSS properties, how do I go about it?

What I want to do is just add some class to it so when I use the class selector, the headline element will take my CSS properties but in the Builder and in web browsers.

Like I said earlier, my problem now is getting the CSS to be active in the Builder.

I can’t record a video now please…

Thanks for your understanding.

#13

Hey Barry,

Could you at least tell us what element is not working with your CSS? Please be specific. I could see that you assigned classes to the Headline elements in your Contact page but there’s no CSS related to those classes in Theme Options > CSS (a.k.a the Global CSS).

The closest I could assume is 1 of your headlines in your Contact page has a class of hero--subtitle and you have this selector: .hero-->.x-bg>.x-bg-layer-lower-image in the Global CSS. The selector doesn’t apply to the element as a whole. You can see in the following screenshot that the Global CSS works even in the preview.

image

I also checked Appearance > Customize > Additional CSS. This, by the way, is not our Global CSS. This is part of WordPress and we don’t recommend that you use this. Also, the preview of this does not work in your site while it works in all of my sites so there’s something wrong with WordPress CSS just on your end. We can’t investigate this because this is not a part of our system.

Still, I checked the content of your WordPress CSS and saw that you have this selector: .subtitle.x-text .x-text-content-text-primary. That doesn’t apply to the element as well.

In summary, there is no issue with our Global CSS. The issue is with your CSS and also the WordPress Customizer CSS in your site. Those are not caused by our theme and as I’ve said previously:

And, I’d like to add that make sure that your CSS is correct.

Hope that helps.

#14

I removed the CSS that’s why you cannot see it. When I put the CSS code there, the website looks exactly as I wanted it to look when viewed in a web browser but it doesn’t look exactly as I want when viewed in the Builder.

I will take your advise and I’ll let you know how it went.

Thanks.

#15

Thanks for taking my advice, Barry.

#16

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