[dterrieParticipant]

Hi,

I’m new to WP and to X, so I may be missing something here. I want to edit the integrity-light.css file for my Integrity Light X Child Theme. When I looked at the site folders in FileZilla, the x-child-integrity-light folder path was empty. So, I tried manually creating the …/x-child-integrity-light/framework/css/site/stacks path and copying integrity-light.css into this folder. I’ve then downloaded the file, made an alteration in an editor, saved the change, and posted the file back into this folder, over-writing the original. However, when I check with Google Chrome developer tools, the site is clearly still using the css from the main X theme folder, so the change is not being used.

How do I work with the css file directly? I’ve put a little css and js code in the custom windows that works, but this is seemingly intended for just minor tweaks.

Second question: if I have a custom jquery file I wish to load with a specific page, how do I set this up?

blueskybenjamins.net
WordPress 3.9.2 running X – Child Theme: Integrity Light theme -just installed last week.

[Nabeel AModerator]

Hi,

Once you’ve activated the Integrity child theme you can edit the integrity-light.css file directly by navigating to Appearance > editor > X – Child Theme: Integrity Light: Stylesheet (style.css). Don’t do via FTP.

For your second question, you can place any custom Javascript in Appearance > Customize > Custom > Javascript. To make sure it only runs on the specific page just add the body class in the jQuesry / javascript selector.

[dterrieParticipant]

Ok, working, thanks. Had to inspect the body element to see what you meant by the body class, but I understand now. I used location.href({string}).indexOf({string}), but the body class is handier.

If I do have a separate js file and I use FTP to upload it, where should it go and could I then load it with something like this:

loadfile = function(src) {
var js = $(“<script type=’text/javascript’ src='” + src + “‘>”);
$(“head”).append(js);
};

loadfile({src of uploaded js file});

[Kosher KMember]

Hi There,

Please don’t forget to check our Knowledge base fore more detailed information on how to set-up a child theme. You can also check our article regarding Customization Best practice.

1. If you activate a child theme, you can overwrite the css of the parent theme by using the same selector used on the CSS by the parent theme then add it on child theme style.css.

e.g. this code is found in x/framework/css/site/stacks/integrity-light.css

.x-logobar {
position: relative;
overflow: visible;
border-bottom: 1px solid #f2f2f2;
text-align: center;
background-color: #fff;
z-index: 1030;
}

Lets say you want to overwrite the background color of .x-logobar, you can use this code below in your child theme css
x-child-integrity-light/style.css

.x-logobar {
background-color: #000 !important;
}
/***or***/
.site .x-logobar {
background-color: #000;
}

2. If you want to add an external javascript globally or in specific page, you should use your child theme functions.php

You can take advantage of wordpress conditional statement and wp_head or wp_footer action then do it like this

add_action( 'wp_head', 'custom_script' );
function custom_script() {
    if( is_home() || is_single() ) {
        echo '<script src="myscript.js"></script>';
    }
}

or using wp_enqueue_scripts

add_action( 'wp_enqueue_scripts', 'only_show_on_blog_and_home' );
function only_show_on_blog_and_home() {
    if( is_home() || is_single() ) {
        wp_register_script( 'awesome-js', __FILE__ . 'js/awesome.min.js', array('jquery'), false, false );
        wp_enqueue_script( 'awesome-js' );
    }
   
}

Hope that helps.

Cheers

[Alex DParticipant]

Could you explain why not to use FTP? It’s much easier to open the css field and edit it locally and then upload.This apparently works fine on the parent theme, but not on the child.

[ZeshanMember]

Hi Alex,

It is not possible to move the default X stylesheets on the child theme and overwrite the styling. What you could do is to overwrite the default styling in your child theme’s style.css file. For that purpose, you can use FTP.

Thanks!

[LizmParticipant]

I’m trying to edit some styles that get set in the X framework (integrity, dark) (example: .login form {background: etc), but it looks like the styles get loaded AFTER my child theme styles, so my edits aren’t being seen. Is there any way around this? Have even tried adding !important.

[LizmParticipant]

Oh I found it!!
Appearance-Customize-> Custom -> Edit Global CSS

yay

[ChristopherModerator]

Glad to see that you’ve already found the answer.

[Author]

Posts