[John BParticipant]

I dont have any minified plugins active yet the css file is minified. When I unminify it based on the tool mentioned in the forum I get some giberish characters that creates over 900 css errors according to cssvalidator.org.

My goal is to deminify it to make it easier to use with subline in order to make some css changes.

can you help?

I also read the article mentioned in an earlier post here but I’m not using any minify plugins at all.

Thanks in advance
john

[RadModerator]

Hi John,

Thanks for writing in.

X theme’s css core files are not meant to be edited and they are minified by default. As they will be overwritten by every update you installed. What you could do is override them through your child theme’s style.css or customizer’s custom css.

For example, this is from the core file.

.x-nav > li > a {
color: red;
}

Then all you have to do is re-declare it at child theme’s style.css or custom css with your applied changes.

.x-nav > li > a {
color: blue;
font-weight: bold;
}

Hope this helps.

[John BParticipant]

My goal is to add the child theme so when I update x my changes dont get overwritten.

I downloaded the x-child.zip, uploaded and activated it.

I had already downloaded the json file in the customizer manager.

I looked at the child prior to importing jason. It looked similar but the top nav and the right nav was gone.

I imported jason and they were still missing.

Is that to be expected? If so do I need to re-add the widgets and the nav menus?

Going forward my wish is to change the css in the child theme and not have it overwritten with new x updates.

When I do inspect element the path shows me (index):173

Does that mean going forward any css changes I make will be in the index and I have to do that in the customizer?

I was hoping I’d just have full access to the css file in the child theme and that file wouldnt be overwritten.

Can you help explain?

thank you!

[Nabeel AModerator]

Hi again,

When you write your CSS code in your child theme, your code won’t be overwritten when you update the X theme.

Regarding your navigation issue, you’ll need to re-assign the menu when you activate the child theme. This is the default behavior of WordPress. When you inspect the element it only shows you where the CSS code is written. It’s not important here. You can add your code either in Child Theme or Customizer. Better would be a Child Theme.

Hope this helps!

[John BParticipant]

hi, I’m with you. The goal of using inspect element was to find where that file was in the site structure. What directory (and path) can I find the child theme with that css file?

thanks and I love X!

[Nabeel AModerator]

Hey John,

You’ll find the child theme in /wp-content/themes/ directory. To set up the child theme please refer to this link https://theme.co/x/member/kb/how-to-setup-child-themes/

Hope this helps!

[John BParticipant]

Hi I created the child theme directory and moved all the .php files over. I open the php files and all I see is PHP. I still cant controll or see the css.

For example on page http://johnbogs.staging.wpengine.com/horse-feed/find-hay-in-brooklyn-connecticut/

UN johnbogs
PW 7781fb

headline I’VE NEVER BEEN TO A BARN
WHERE THE OWNERS BEEN
SO HELPFUL AND KIND

It’s in H2

I test modifying it in inspect element and I want to change font weight. Works fine in inspect element but it tells me its located in index :172

I cant find that file to be able to modify it.

I’m use to seeing the path for the css file where I would go into ftp download, make changes and upload.

Looks like I;m missing a process/ steps here. Can you please explain where and how I would change the above title to H3 or make any other changes to that line?

Sorry for all the confusion on this but it looks like I’m missing something andf I sure could use your help.

thanks

[ChristopherModerator]

Hi there,

Not sure why you copy php files, But what are you trying to achieve doesn’t need those files.

You should add inline CSS, simply change h2 tags to :

<h2 style="text-align: center;font-weight:700">I’ve never been to a barn<br>
where&nbsp;the owners been<br>
so helpful and kind<br>
<hr class="x-gap" style="margin: 1.313em 0 0 0;"></h2>

You have to ways for adding CSS:

#1 using inline CSS which adds directly.
#2 Adding CSS inside child theme -> style.css
#3 Adding CSS inside Customize -> Custom -> CSS

They all do the same.

The title added inside content so you can change it there to h3 or h4, etc.

Hope it helps.

[John BParticipant]

Thank you. BTW, My vote… Liked it much better when I could open the un-minified css in sublime and make any changes based on using inspect element.

Made things easier, faster and better. Just sayin’

Thank you for your help.

[John BParticipant]

Just for clarification on the php files. I went to https://theme.co/x/member/kb/customization-best-practices/ and “Overwriting Output via Child Themes” is where I read the info. Sounds like I goofed.

Here’s what I’m thinking…. going to http://codex.wordpress.org/Child_Themes

figuring out the 3 steps and adding the unminified css to the child theme.

Does that make sense?

BTW in my themes directory I have index.php, x_package, x-child-ethos, x-child, x, and a # of other standard themes that are bundled with WP. Is that correct to have all those s-child directories?

[ChristopherModerator]

Hi there,

As we described in previous replies:

X theme’s css core files are not meant to be edited and they are minified by default. As they will be overwritten by every update you installed. What you could do is override them through your child theme’s style.css or customizer’s custom css.

You should add CSS in customizer or style.css file inside child theme to overwrite it.
Regarding to child themes, You should keep the child theme you are working with, In our last release we included x-child which is single child theme and works on all stacks. Please check changelog.

Hope it clarifies.
Thanks.

[John BParticipant]

Still some confusion here….

If I understand correctly I can use the style.css file inside the child theme to over write the main css file. Got that!

But when I go to that file in that location (child theme) it is empty.

My perfect world is to make test adjustments in the inspect element and find those in the css, make changes and go live.

Right now it’s not that easy.

So can I simply unminify the css in x, paste it into the style.css in the child and modify that? That way I have the entire css and I can work off of that.

Or is it only a matter of writing individual css in the style.css file separately?

I hope I’m being clear.

[John BParticipant]

is this the correct path /wp-content/themes/x-child/framework/views/ethos or is it /wp-content/themes/x-child-ethos ?

thank you for your patience. I really want to figure this out.

[John BParticipant]

is this the correct path /wp-content/themes/x-child-ethos ?

I see the style.css.

on line 13 @import url( ‘../x/framework/css/site/stacks/ethos.css’ );

how do I import that file int this file?

thank you for your patience. I really want to figure this out.

thank you

[Rue NelModerator]

Hello,

Thanks for updating thread!

You are correct for the path /wp-content/themes/x-child-ethos/ which is the legacy child theme for Ethos. If you want the new x child theme, it will be /wp-content/themes/x-child/, and you put all your customization for ethos in /wp-content/themes/x-child/framework/views/ethos/

In our new x child theme, we are using this,

// Enqueue Parent Stylesheet
// =============================================================================

add_filter( 'x_enqueue_parent_stylesheet', '__return_true' );

in importing the style sheet.

Hope this helps.

[Author]

Posts