Global CSS

Okay, I know how to do that. I’m inquiring how to find the global selectors so I can set styles globally. Our site is mostly built, it would be a lot of work to edit each section manually. I have the CSS ready, I just am looking for how to find global selectors so I can input the styles into theme>options

Hello Mary,

Thanks for updating the thread.

You can find the selectors using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

https://developers.google.com/web/tools/chrome-devtools/css/

Thanks.

Will those be global selectors or individual selectors? I want ever p element to have the same style, every h element, etc., without having to go through every single item on the site and set a class, is this possible? I’m trying to resolve this so others can manipulate/edit the CSS without having to find every single unique selector on the site.

Hi Mary,

The best way is to configure the Theme Options properly, for example, the Typography there you can configure the Root Font Size, the body font, body color, body content font-size, and same goes for the headlines, site links, and buttons, etc.

And utilize the Font Manager and Color Manager too, that will help when changing the font-family and colors throughout the site.

Now I understand, that there are styling that is not covered in Theme Options like most of the V2 elements. I that case, this is what I advise you to do.

Style one element on your page like a button, or if you do already have a styled button, please save that as a Preset element template.

Then navigate to Template Manager > Element Defaults



There you can set the preset that you just save and set that as the default styling, do that to all elements that you commonly use.

Now if you really need to use a Custom CSS than preset, please follow Prasant’s advise. Just look for the common CLASS of the element, its the class that is next to the id-classes (e8-27), it is prepended with x-.

Example:

x-column
x-text
x-image
x-anchor-button

But those classes will not work if use alone though, you need to make sure your CSS selector is very specific.

CSS Specificity: Things You Should Know

Hope that shed some lights,
Cheers!

Alright, I was able to set most of the headlines using global css, but since there aren’t globlal selectors, I’m going to have to set classes to every element on every page (because a design team wants to work on styles, but they prefer to work in the css editor rather than the front end pro editor, and I’m trying to minimize the selectors they’ll have to sort through.) So I set a class on the first several buttons on the home page, and have the css in theme options > css, but the style isn’t changing. Can you take a look? And is setting a class to every element on every page really the most effective way to do this? I have no choice, because the team is set on doing it this way, and I want to minimize the work, if possible.

Not only is that the least efficient method, it’s also the least maintainable. You’d need to make certain that any new content created had all of those classes set to all of their elements as well.

I haven’t played around with the template manager, but if you’re styling something that isn’t covered by it, check out the suggestions in the other replies about using the Developer panel in Chrome and CSS specificity.

If your design team just wants to sit down and write the CSS up and needs to know the correct selectors for each element in its various contexts on the site, your time would be better spent creating a list of selectors for each thing on the site that needs styling adjusted and which context it’s in (full page, post archive, what-have-you). The scenario strikes me as pretty odd - do they have access to the development site? They can use Dev Tools too and figure out what selectors they need to use, even if they’re using an external editor to write the CSS/Sass/LESS.

Hello Mary,

Thanks for updating the thread. :slight_smile:

I see that in the home page under Class text box you have entered the class name and prefixing .. While entering the class name you just need to enter the class name. I have fixed the issue on the on of the button, please make the necessary changes on other places.

Thanks.

It’s not ideal, but it seems that the team can’t think outside the IDE and are confused by all the different selectors, as well as the the front end. I need to figure this out more effectively. I just need a simple way to align all of the styles on the site

Hi Mary,

If your team is more comfortable writing Custom CSS Classes, then that is fine it will work. But then like Jalberts’ said above, its the least efficient and least maintainable method.

I’d still advise learning the features offer by the Theme though (e.g. Template Manager, Global Blocks, Color Manager, Font Manager, etc.)

Knowledge Base Overview

Thanks,

Thank you for you help!

You are most welcome. :slight_smile:

Quick question, I think I’ve mostly got this figured out. I’ve inputted the company’s typekit id (both in the plugin and font manager), does that automatically apply all the styles present in the typekit? (https://use.typekit.net/crl0txc.css). Also, if they edit the typekit, will those changes automatically be reflected on the site?

Hello Mary,

Thanks for updating the thread.

As the latest reply is related with Typekit and to avoid any confusion, I request you to please create a new ticket as more often it create lot of confusion which slows response time. Please create a new ticket and someone from support team will assist you accordingly.

Thanks for understanding.

To clarify, is there any way to automatically set letter spacing for all body copy and headers within Pro?

Hi,

You can set it under Theme Options > Typography but please note that if you are using v2 elements, the v2 element’s individual settings will override your global settings.

Thanks

I know it doesn’t apply to newer elements, so how can I apply changes that affect all body copy’s spacing across the site?

Hi,

You can use custom css instead.

Add this in Theme Options > CSS

body .entry-content.content .x-text {
    letter-spacing:12px !important;
}

body .entry-content.content .x-text-headline {
    letter-spacing:15px !important;
}

Change 12px and 15 px to adjust.

Thanks

Thank you!

You are most welcome!

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