[John BParticipant]

Thank you. I have added that and it is now in the style.css

Here is my big question….

Once that has been done how do I modify the CSS?

I’m use to seeing all the CSS code in that file and modifying it accordingly.

Do I use it as a blank slate and add any css changes into that file that would supersede the x CSS?

So another words (as an example) if I want to change the font size of the H1 and H2 tags how would I do that? would I add just that code directly into the child css? (can you give me an example of how to do that using the child theme so I can see what it looks like?)

Normally I would open inspect element on the page, make modifications to verify the CSS changes. Than I would hover over the link to see where the file was located and the line where the code lived.

Then I would then go to that location make the changes in sublime, save it and the process is complete.

What would be the easiest process doing this with the new child theme file using inspect element?

Sorry for all the confusion. I love X and really want to get this right.

Thank you again for all your help and your patience. You guys are awesome!

[ZeshanMember]

Hi John,

Thanks for writing in!

Yes, you’ll only need to add your modified CSS code under style.css file of your child theme (see: http://prntscr.com/6f0cy6). For example, if you want to change the font size of your blog posts heading, you can add following CSS in “style.css” file:

h2.entry-title {
   font-size: 160%;
}

/* Regular Headings */
h1, .h1 {
   font-size: 200%;
}

h2, .h2 {
   font-size: 160%;
}

Using Google Chrome inspect elements is a good way to make CSS changes, you can simply copy the modified CSS code over to your child theme’s style.css file, no need to make changes in the actual file (see: http://prntscr.com/6f0egg).

Keeping all the template changes in your child theme is recommended as if you make changes directly to your parent theme, it’ll be overwritten when an X update comes.

Hope this helps. 🙂

Thank you.

[John BParticipant]

Awesome… You guys are just AWESOME!

thank you very much. I really appreciate it 🙂

[John BParticipant]

Oops – I spoke too soon.

I went to /wp-content/themes/x-child

found the style.css file and added the changes as seen below

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

add_filter( ‘x_enqueue_parent_stylesheet’, ‘__return_true’ );

h2.entry-title {
font-size: 160%;
}

/* Regular Headings */
h1, .h1 {
font-size: 200%;
}

h2, .h2 {
font-size: 160%;
}

h3,
.h3 {
font-size: 228.5%;
line-height: 1.3
}

h4,
.h4 {
font-size: 90%
}

this was done in the staging site (nothing is cached here) so it should refresh and show the changes.

no change. I puched it live to horsemoms.com still no change.

This seems incredibly simple.

for example http://horsemoms.com/horse-health/clicking-joints-in-horses/

the headline “EVERY TIME SHE RUNS, SOMETIMES EVERY TIME SHE MOVES HER JOINTS CLICK… AND THEY CLICK LOUD!”

is H4 and according to the code should be at 90%

It’ not 🙁

What am I missing?

Thank you in advance for your help.

[ChristopherModerator]

Hi there,

Remove add_filter( 'x_enqueue_parent_stylesheet', '__return_true' ); from CSS and put in in functions.php file inside child theme.

You didn’t put semicolon at the end of CSS properties, check :

h3,
.h3 {
font-size: 228.5%;
line-height: 1.3
}

h4,
.h4 {
font-size: 90%
}

They should be :

h3,
.h3 {
font-size: 228.5%;
line-height: 1.3;
}

h4,
.h4 {
font-size: 90%;
}

Hope it helps.

[John BParticipant]

per your suggestion

/*

Theme Name: X – Child Theme: Ethos
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to Ethos in this child theme.
Version: 1.0.0
Template: x

*/

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

/* Regular Headings */
h1, .h1 {
font-size: 200%;
}

h2, .h2 {
font-size: 160%;
}

h3,
.h3 {
font-size: 128.5%;
line-height: 1.3;
}

h4,
.h4 {
font-size: 90%;
}

Placed in /wp-content/themes/x-child

No change.

Has to be some crazy simple thing I’m missing.

Suggestions please?

[John BParticipant]

I went into edit themes in the top nav of the dashboard. I selected from the drop down Select theme to edit:

selected from the right nav X – Child Theme: Ethos: Stylesheet (style.css)

made the change worked perfectly.

Not sure how that happened.

But the style.css file though the ftp still has the same code I mentioned above with no change.

So it looks like the @import drops the css into the back end of wordpress.

So result achieved 🙂

[John BParticipant]

But…. if it’s importing from the main X theme won’t it be overwritten the next time I update X?

Thank you again for your patience and help.

[Paul RModerator]

Hi John,

Glad you were able to figure it out.

As long as the file resides in your child theme directory it will not get overwritten on theme update.

@import is need for your child theme to work correctly, you can add body or !important to your code so that it will override the main X theme styles.

eg.

body h3,
body .h3 {
     font-size: 228.5% !important;
     line-height: 1.3 !important;
}

body h4,
body .h4 {
     font-size: 90% !important;
}

Hope that helps.

[John BParticipant]

I BROKE IT…

I cant get this to work.

I now have the fontastic chevrons not appearing and I still cant get the child theme to work.

Can I hire you to have a look and fix this for me? I will give you complete access.

Please let me know

thank you

[John BParticipant]

I also reloaded the x and the child theme but that didnt fix it.

The odd thing is now I have “ff” in the top nav thats a search button. Not sure where that came from or how to get rid of it.

I really need your help….

[Paul RModerator]

Hi,

To fix it, you can add this under Custom > CSS in the Customizer.

@font-face{
    font-family:'fontawesome';
    src:url("http://horsemoms.com/wp-content/themes/x/framework/fonts/font_awesome/font-awesome.eot?v=4.2.0");
    src:url("http://horsemoms.com/wp-content/themes/x/framework/fonts/font_awesome/font-awesome.eot?#iefix&v=4.2.0") format("embedded-opentype"),
        url("http://horsemoms.com/wp-content/themes/x/framework/fonts/font_awesome/font-awesome.woff?v=4.2.0") format("woff"),
        url("http://horsemoms.com/wp-content/themes/x/framework/fonts/font_awesome/font-awesome.ttf?v=4.2.0") format("truetype"),
        url("http://horsemoms.com/wp-content/themes/x/framework/fonts/font_awesome/font-awesome.svg?v=4.2.0#fontawesomeregular") format("svg");
    font-weight:normal;
    font-style:normal;
}

If that doesn’t help, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password
– FTP credentials

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[John BParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi John,

Your child theme style.css file is having duplicate @import line with pretty quotes instead of normal single quotes (see: http://prntscr.com/6gaeqx). This could cause the CSS code after this line not to work, please remove this line and the code after it should work just fine.

The syntax of any language including CSS is quite strict. Even if you just have an extra comma somewhere in your CSS code or a pretty quote instead of normal quote, it will break the rest of the CSS code. So, if you see a code is not working, it is always a good practice to check your CSS file for errors and if you find any, simply fix it.

Apart from this, I’m seeing that you are using minifying plugins to minify your styles and scripts (see: http://prntscr.com/6gaol6). As minifying combines all the files in a single file (http://horsemoms.com/wp-content/plugins/bwp-minify/min/?f=wp-content/plugins/clever-youtube-plugin/global.css,wp-content/plugins/clever-youtube-plugin/cyp-styles.css,wp-content/plugins/facebook-photo-fetcher/style.css,wp-content/plugins/facebook-photo-fetcher/fancybox/jquery.fancybox-1.3.4.css,wp-content/plugins/meteor-slides/css/meteor-slides.css,wp-content/plugins/revslider/rs-plugin/css/settings.css,wp-content/themes/x-child-ethos/style.css), it could also be a reason your style.css code is not working. I wouldn’t recommend minifying your child theme’s CSS file along with the other stylesheets. You should keep that file separate.

In regards to font icons, it seems to be working just fine for me now (see: http://prntscr.com/6gal4w). Would you mind confirming the issue?

Thank you.

[John BParticipant]

Works PERFECT! I really appreciate your patience and your help.

I’m busting at the seams to tell everyone who will listen about you guys.

Thank you, Thank you, Thank you!

[Author]

Posts