Best Practices - Using Classes within X Theme?

Support
#1

We are trying to create an elegant, hierarchical, easy to maintain site using classes appropriately. This has proven harder than expected because:

  • We may not be using the right strategy

  • X Theme short-circuits CSS cascades with !important tags

  • There may be bugs or incompatibilities

We have learned through experience that classic elements often present fewer issues using this strategy that new one, but even then we have challenges.

We would like to define classes that specify the basic typography of our text; the color and weight; and the behavior (including responsive size) then simply apply combinations of those classes as necessary. This way we could build pages quickly and make global changes easily.

The first section of this example illustrates this strategy and actually seems to work as expected. However, the second section looks and works great in the builder, but the stretchy text (the upper “Smart Design…” line) fails in the wild. This is a very common problem.

I will submit that specific problem as a separate ticket, but for this one I would prefer to focus on strategy and best practices:

  • Is trying to use classes this way essentially impossible in X Theme, or am I simply doing it wrong?

  • What are best practices in this regard?

Any other general hints as we refine the structure of our pages preparing to go live would be very helpful.

Thanks!

#2

Hi Ergo,

Thanks for reaching out.

It’s about element hierarchy, the classic one has a simpler structure that’s why it works better. Working with complex structure may require understaning about HTML and inspector tools like google developer tool. Example, please check these

Intro to CSS - https://goo.gl/mFuWQT
How to get CSS selectors - https://goo.gl/BmoH39
Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

It’s true regardless of the theme, and it’s not just for sites developed through Wordpres, that’s because there is no standard structure, it always depends on how it’s made. Example, let’s say a classic text which resulted to this.

<div class="x-text red"><p>Red Text</p></div>

It’s really simple, no child element, no sub structure, and just <p></p>, that’s why applying such CSS is simple as this

.red {
    color: red !important;
}

Now, in comparison with v2 headline, it has multiple structures within in, example,

<div class="e1015-14 x-text x-text-headline">
  <div class="x-text-content"><div class="x-text-content-text"><h1 class="x-text-content-text-primary">Smart Design for Smart People</h1></div></div></div>

For your to be able to apply the CSS to the text, you have to follow the structure too, example,

.x-text-headline .x-text-content h1 {
color: pink;
}

or perhaps with class name

.red .x-text-content h1 {
color: red;
}

Now, about the upper “Smart Design…” line, it’s not working because it has { which shouldn’t be added to style attribute.

{font-size: 2.7vw;color: black;

Please check this https://www.codecademy.com/articles/html-inline-styles, and it’s not theme specific standard. It’s CSS standard coding.

Hope this helps.

#3

Hi Rad,

Yes, that helps a lot, and confirms much of what we have pieced together.

We have become quite good at figuring out what to target using the inspector, but this approach does not always work, and never works efficiently. We seem to have to create a different class for each kind of text depending on precisely how and where it is used, rather than being able to simply create a class .red that will turn the target red regardless of whether it is a new headline element or a classic text element.

I was hoping to learn that there was a way to use CSS classes with X Theme in the elegant cascading manner in which it was designed, but I guess that is simply impossible in the WordPress/X Theme environment?

As we understand the rules we can perhaps design a workflow around them, such as only using classic text elements so we have fewer permutations and combinations to target. We will continue to work with this and I may post some additional questions as we grope for the best solution to our situation.

Thanks for your help!

#4

Hi Ergo,

It’s HTML and CSS standard, and sometimes it’s either create your own class or use the existing one that you see in the inspector. And depending on loading order of the CSS, it may work and may not and it’s not theme specific. The same practice is done regardless of theme or site.

Would you mind clarifying what you wish to achieve with cascading manner? The greater the structure, the more selector hierarchy needed, but it depends of it has previous CSS that needed to be override, because it not, you can directly use the selector of the immediate element.

Let’s say for example,

<div class="first"><div class="second"><div class="last"></div></div></div>

And there is existing CSS like

.first .second .last {
color: red;
}

Hence, adding this to override it will not work

.last {
color: black;
}

You’ll have to re-declare it like this

.first .second .last {
color: black;
}

or use !important like this

.last {
color: black !important;
}

This isn’t theme specific, it’s part of CSS standard which basically relying on browser standard. The workflow that you’ll follow should based on CSS and HTML standard. It’s just that the theme has its own class names and structures, but it doesn’t restrict you of how you should perform your workflow, CSS does. So yes, what you’re trying to do may or may not possible regardless of platform (Wordpress or any) or theme, CSS is the limitation.

And again, to make it simpler, the structure must be simple too so yes, please use classic elements.

Thanks!

#5

Hi Rad,

Your example above is perfect. That is exactly the problem I am having. Something works in one context but does not work in the next because the element is nested differently so the simple class fails. Compounding the problem is that I don’t have a clear understanding of how classes combine or how to target without some trial and error. (I would have guessed that class .last would have worked without the !important in your example above).

Anyhow, back to the theory: It seems your V2 elements are great for maximum flexibility and options if you are designing one-off sections or pages where you do all of your styling directly to the element. However, for bread-and-butter styles that will be used over and over on many pages across the site it is better to use classic elements for their relative simplicity in CSS targeting.

I feel like we are near the finish line for our templates and I just have to clean things up a bit before moving forward.

I am, however, considering “redefining” some of the X Theme classes such as x-text. Is this a bad idea for any reason that may not be immediately obvious? (I have already tried a similar approach with buttons that seemed to work well but not perfectly.)

Thanks!

Steve

#6

Hi Steve,

We understand the intention why you want to use custom classes, but that is not a good idea, that will actually make things more complicated when accumulating a lot a custom CSS, and an update conflicts those custom classes in the future, not only Theme update but Wordpress and Plugins update as well.

I advise that you use the features of the Theme instead like Template Manager (notably the Preset template, this might be the feature you need), Global Blocks, Color Manager, and Font Manager.

Regretfully, these custom classes customization request is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it.

Thank you for your understanding.

#7

HI Friech,

Thanks for your reply. We are already taking advantage of Templates, Global Blocks, the Font Manager, the Color Manger, and even additional utilities such as the Button Manger (if that is what it is called) but this approach obviously has its limits.

The primary issues are that, with the exception of global blocks, once you deploy a template and decide to change it later, you have no means of making changes globally. The second issue is that you may need more than one version of something. For example we need at least two different styles of button: we used the Button Manager to set up our standard buttons, but we also need transparent buttons that appear on top of images. I am not aware of an X Theme tool to deal with this situation.

This isn’t a criticism of X theme. It is ridiculous to think that the theme should have a tool for every situation. That is not what X Theme is all about, and it would become too complex for the target audience and too complex for you to develop, maintain, and support. However, it also seems like there should be a reasonable way to have a second type of button that is relatively easy to deploy and maintain, even if it is not using X Theme tools to do so. It is the strategy to do this sort of thing that I am looking for.

I don’t think our site is any more complex that a typical X Theme site, but we are not web designers. Unfortunately we are designers so we want our site to look good, and more importantly to function well, so we are looking for the best path to bridge our knowledge gap from concept to execution. We have our mock-ups done and are mostly just trying to clean up our code now, so strategy is important at this point.

I thank you for your help and will try to keep our questions to a minimum!

Steve

#8

Hello Ergo,

You must have misunderstood the use of the template. A template is a pattern or a mold as a basis in creating your page. Just consider the template like the Money Printing Plate. Once you have printed the money, if you want to make changes to the plate, you’ll end up scrapping the printed money and will have to print again.

Global blocks will best fit when a certain section needs to be changed later on.

For your buttons, you can resolve that by having to save different button presets. You can apply the preset when you create a new button element and would like to apply a previously saved presets.

To save a preset, simply style your button according to your desired look and feel. Once you are satisfied, you can save all your button settings as a preset. You can even create several presets by just tweaking the styling of one single button.

Hope this helps.

#9

Hi RueNel,

Maybe I am misunderstanding templates and presets. It seemed to me that both apply a set of elements and/or styling but once applied, there is no way to make changes to the template or preset that will cascade down to the children globally. I though only global blocks could do that?

I tried designing buttons with presets, but found two major issues: The first was that once I had applied the preset there was no way to globally apply changes to the button. For example if I had used a preset to create 20 copies of a button across many different sections and pages then realized that the background wasn’t opaque enough, I would have to try to find every instance of that button and edit them all individually rather than changing a single number in the global CSS and having ALL the buttons change.

Also, I could not find a way to have the buttons behave responsively the way I wanted, even if I pasted the styling directly into the STYLE box. It seems that media queries only work with classes, so I could not get the right behavior to be part of my preset without applying a class, which defeats the purpose.

It seems the only way to accomplish my goals was to either redefine the X Theme button (x-btn) class directly, or to apply a custom class to it, which does not appear to be a trivial matter with buttons!

If you could show me how to solve those and similar class-related problems with templates or presets I would much appreciate it!

I am actually struggling with the button problem I mentioned above right now, so perhaps a concrete example would help. I will post it in a separate thread because it is largely button-specific and not so related to the theoretical nature of this thread.

Thanks again for the help!

Steve

#10

Hi Steve,

Yes, we understand that limitation in Preset. But in your scenario above if you’ve used the Color Manager to define the colors that you’re going to use on your site and then use those defined colors on your button element (or any element) throughout the site. Then you could simply navigate back to Color Manager and change the color there and those 20 buttons will change color at once. It is like a Global Color.

Same concept with the font-family with the Font Manager.

I understand that it’s not always the color and font-family are involved in changing but also with other attributes like text-transform, font-weight, font-style, border, etc. This is where you have the point to use classes.

If so, then you need to practice how to find the proper CSS code selector using the Chrome browser Developer Toolbar and how CSS Specificity works.

The V2 elements are not a straight forward structure so you need to use the Chrome browser Developer Toolbar a lot to find the correct target element. CSS Specificity will make you understand why your classes are not guaranteed to work, you need to make your CSS selector more specific/stronger.

Hope this shed some lights,
Cheers!

#11

Hi Friech,

Yes, that is very helpful, but you are certainly right that targeting can sometimes be tricky! I tried to add a class to a classic button in the first example in this post by targeting x-btn.x-btn-global. It worked in the builder but not when published.

I came up with a couple of workarounds, and the second (creating a button with HTML inside a content area) seems promising.

Thanks again for the help!

Steve

#12

Hi Steve,

You can use Chrome or firefox inspect element to help you with targeting the class of an element.

Please check the videos below.

Hope that helps

#13

Hi Paul,

Yes, I used Chrome to identify that I needed to target x-btn.x-btn-global but sometimes the builder shows incorrect previews…

On my builder (right now) the targetted button is black (showing the class is properly applied) if there is a space between my class and the target: .btn-black x-btn.x-btn-global so I think I have the syntax correct, but then it does not work live. Can you confirm this issue or is it just my builder? (The top button of the 4 is black in the builder but turns white live?)

Without correct feedback in the builder it is difficult to troubleshoot targeting because you have to save and view online after every edit to know if it is really working. Maybe there is a bug, or maybe I need to reinstall Cornerstone?

Thanks!

#14

Hello @ErgoArchitecture,

The correct class selector is:

.btn-black.x-btn.x-btn-global {
  // styling css here
}

Hope this helps.

#15

Hi RueNel,

Yes, I had identified the correct syntax as per my previous post. The problem is that the builder seems to show the styling applied when the syntax is wrong and vice versa, leading to a very difficult workflow. I have to save the changes and preview live rather than using the builder to see if my syntax is correct. I was hoping to confirm that this is a bug in the builder rather than specific to my particular installation. The example above shows up for me every time. Is that the case for you too, or does the styling only show up when the syntax is correct?

Steve

#16

Hello Steve,

The styling will only show up when it is correct. Nothing changes if the code you added is incorrect. If you are experiencing something different then that may be unique to your installation only. We have tested this already in several local testing servers and we could not confirm that it is not a bug. It may take a few seconds to apply the added style by the way and must be in correct syntax or selector.

Hope this helps.

#17

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