New to the theme. Some questions

[PixelProduction]

Hey there. Just installed the theme and getting into it. First impression is kinda mixed, but maybe I don’t understand some mechanics with how they work.

Why is the stack css loaded after the style.css? Is there an easier way to load it before the style.css then to de- and enqueue the style.css?

I changed the body font-weight in the theme options to 300, but when I add a text element it still has a font-weight of 400 inline styling. I saw a screenshot in another thread, where the text object has an options for font-weight. But the text object here has no such option.

Is there a way to disable element css in one way or another, at least part wise? We got the theme because we were curious about the page builder and thought that the code it produces looks way better then other builders. But so far it seems that it’s a real hassle to control the theme per css, since there are so many inline styles.

Like, for example, I want to set the font-size for a h3 to a specific amount per css. The problem is it will be overwritten by the element CSS (inline) and when I use the element settings, I have to adjust the size for every new h3 I add to the page (not even talking about layout changes that will certainly come at some point later in the process, which seemingly require to go back and change all h3 elements across the page?!). Or am I missing something?

[basanta]

Hi There,

Thanks for writing in!
Please find my answer below!

-1. The child theme CSS always loads at last to override all other CSS. If you want to alter the main theme CSS, those function can be found in this file \framework\functions\frontend\styles.php
You can do it with the child theme. Here is the code look like.

function x_enqueue_site_styles() {

  // Stack Data
  // ----------

  $stack  = x_get_stack();
  $design = x_get_option( 'x_integrity_design' );

  if ( $stack == 'integrity' && $design == 'light' ) {
    $ext = '-light';
  } elseif ( $stack == 'integrity' && $design == 'dark' ) {
    $ext = '-dark';
  } else {
    $ext = '';
  }


  // Enqueue Styles
  // --------------

  wp_enqueue_style( 'x-stack', X_TEMPLATE_URL . '/framework/dist/css/site/stacks/' . $stack . $ext . '.css', NULL, X_ASSET_REV, 'all' );

  do_action( 'x_enqueue_styles', $stack, $ext );

  if ( is_child_theme() && apply_filters( 'x_enqueue_parent_stylesheet', false ) ) {
    $rev = ( defined( 'X_CHILD_ASSET_REV' ) ) ? X_CHILD_ASSET_REV : X_ASSET_REV;
    wp_enqueue_style( 'x-child', get_stylesheet_directory_uri() . '/style.css', array(), $rev, 'all' );
  }

  if ( is_rtl() ) {
    wp_enqueue_style( 'x-rtl', X_TEMPLATE_URL . '/framework/dist/css/site/rtl/' . $stack . '.css', NULL, X_ASSET_REV, 'all' );
  }

}

add_action( 'wp_enqueue_scripts', 'x_enqueue_site_styles' );

-2. The classic text element depends on the body font style, I checked in my setup and its working fine when changing the body font weight. You may face a browser caching issue. If you are using version 2 text element it as the bunch of setting which is independent of body font setting. As you mention you are not able to see the setting, you might haven’t activated the advance mode.

Please click on the setting icon in the left.

In the popup, the preference tab enables the advance option and then save it.

So you can get the advance setting option in version 2 elements.

-3. Element CSS only add inline CSS if you add CSS to this. You can leave it blank and add custom Class or ID to target the element and use page CSS to change appearance. That way you can avoid much inline CSS.

-4. As I mentioned before you can use a custom class name and CSS to target the element. Also, you can use the class in different places or elements.
There is another easy way to make equal style heading or element through presets. You can create one element with required settings and element style and save the element as preset. Give a name to the preset.

After that, you can apply this preset to the different place, which will replicate the style and element CSS to element.

For preset help please check this.

Template Manager | Themeco Docs

I would recommend you to please read our knowledgebase first, it has all the details about all elements.
It will surly help you.

Welcome to Themeco Docs

Thanks

[PixelProduction]

Thanks @basanta for your insightful answer!

We already tried the template manager but the thing is that if you do update a preset, it wont change the element in other areas of the site. For example I made an h1 preset with subheadline and a specific font-size. I then added a few h1 elements and applied that preset. So how can I now change the font-size for all these elements? I tried to overwrite the template with new settings, but the other elements won’t update to the new values.

And when I tried to manage these core values through css, they get overwritten by element specific css (with an individual class generated for the one object). See the screenshot for what I am talking about. Of course you can now add custom classes to every element, but wouldn’t it be easier to modify these elements with their core classes? This css in the screenshot is the one I was referring to with “inline css”…

[mldarshana]

Hi Daniel,

Presets are like snapshots that can be applied at any moment but they aren’t linked to elements. So if you want to change something on your preset for example background color, you need to apply them manually to your desired elements.

So as for now, if you want to target multiple common elements, the best way would be to assign a unique CSS class and use custom CSS to target those elements.

Thanks!