Issues with getting child theme CSS to apply, Jump Start 2.0-beta3

[sharonq]

One small thing that drove me a bit batty today.

I have created a child theme.

When I go to the editor (like I used to with JS) I see:

/* Your custom CSS here */

so I put my custom CSS there – and it didn’t work – but after using this theme for a few days I have learned that every time I want to do something and try to do it the old way and get stuck if I look there is a new elegant way to do it and sure enough I found Custom CSS in Theme Options. Added my custom CSS and it worked perfectly.

I added this line to my style css to look like this to remind me not to edit there:

/* Use Theme Options, Styles, Custom CSS */

It was the “your custom CSS here” note that had me confused – so one thought that would help users like me would be to remove that line or replace it with one pointing users to Theme Options instead.

Topic

[askwpgirl]

Hi Sharon,

I am an end user of Jump Start, and I teach classes to people about how to modify the CSS in Jump Start. I am not having trouble with any custom CSS, so I thought I’d comment on your post as I’m curious about this.

From what I can tell is that the default styling from Jump Start (parent) loads, then the Appearance > Theme Options styles, then the styles form your child theme’s style.css file. The styles in your style.css file will override whatever is in the Theme Options. So, it’s a good idea to use the Theme Options styles first, then style whatever you can’t there in your style.css in your child theme.

What I think might be the problem is that you might not be using the correct selectors in your style.css file. Otherwise, it still works as it used to with the exception of having some added benefit of using the Theme Options instead.

A good way to find the correct selectors is to use Firebug as well as reference the source css in the Jump Start parent theme, primarily:

jumpstart > assets > css > theme.css
jumpstart > base > [name of your theme base] > base.css

The theme.css files has the basic styling for the Developer Theme Base. The base.css file for the Theme Base you are using modifies some of these styles and has some of it’s own. So, you might want to check the base.css file, then reference theme.css as needed for some general selectors.

You should be able to see all of this in Firebug (well, usually, sometimes Firebug doesn’t show everything).

I am an end user like you, so maybe Jason will have something to add. One thought is that selectors you used with JS 1.2.x may have changed, so those won’t work.

Good luck!

Angela

[sharonq]

Angela – this is what I did.

I installed the beta on a fresh WP. Imported the Super User Demo and saved the child theme with my own info on it and fell in love with the new JS.

website: http://returntohorses.com/

I bumped up the default font and noticed that the font size for my icon box was too small so I inspected the element with Firebug and learned I need to change the CSS to:

.tb-icon-box .icon-box-title {
font-size: 24px;
}

So I went to Appearance Editor where I see:

/*
Theme Name: Return to Horses
Description: This is a Jump Start child theme.
Author: Sharon Quarrington
Site: Return to Horses
Template: jumpstart
*/

/* Your custom CSS here */

Edited so now it looks like:

/*
Theme Name: Return to Horses
Description: This is a Jump Start child theme.
Author: Sharon Quarrington
Site: Return to Horses
Template: jumpstart
*/

/* Your custom CSS here */

.tb-icon-box .icon-box-title {
    font-size: 24px;
}

and nothing changed.

I tried editing the Jumpstart style.css but sitll no change on the website.

But if I went to Theme Options, Styles, Custom CSS the added css worked fine.

I’m not sure what order things are loaded and I am wondering if somehow I messed it up when I created my child theme but nothing I put in Jumpstarts style.css or my childs style.css is being loaded.

I guess the question for Jason – or for you- is did I break style.css somehow or does the new JS not load that file anymore.

[askwpgirl]

When I look at your child theme’s style.css file in my browser, it is blank. So, a couple things good be effecting this:

1 – Your stylesheet is not uploading correctly.
2 – You are running a caching plugin and need to clear the cache or turn it off while making style changes.

I do see where you made the changes in your Theme Options, and if this was also in your stylesheet, your stylesheet will override the theme options.

Try to make the change in our stylesheet again and make it something different than what you have in the theme options, make sure the stylesheet is uploaded and then clear any caching you might have via a plugin or on the web host. I’ve had many students lately with the same trouble, and it’s because their web host was running caching on the hosting account.

[Jason Bobich]

Hi Sharon,

Your child theme’s style.css automatically gets outputted after all of the theme’s CSS, and what’s being applied through user options. So, this is the logical best place to put all of your CSS edits, if you’re a child theme.

There really isn’t any reason to put CSS changes in different places; this is just going to be confusing. The “Custom CSS” option is mainly intended for those not using a child theme.

If you’re putting CSS changes in your child theme’s style.css, and not seeing the result on the frontend, then your issue is something with either (1) the CSS you’re inputting, (2) how you’re updating the file, or (3) not clearing your cache in your web browser when viewing your site again (i.e. hit that REFRESH button on your web browser a few times).

These are all things that aren’t really anything to do with Jump Start specifically, but just making CSS changes from a child theme in general.

But right now, when I look at your child theme’s style.css, I don’t see any CSS you’ve attempted, so I can’t really tell you what could be going wrong there.

I see:

/*
Theme Name: Return to Horses
Description: This is a Jump Start child theme.
Author: Sharon Quarrington
Site: Return to Horses
Template: jumpstart
*/

/* Your custom CSS here */

/* Use Theme Options, Styles, Custom CSS */

http://returntohorses.com/wp-content/themes/jumpstart-child/style.css

If you want to throw some CSS in there, that you’re saying doesn’t work, I’d be glad to take a look.

[askwpgirl]

@sharonq —

Hi Sharon,

Siteground automatically turns on caching with your hosting account. This causes hair-pulling frustration when you try to modify your CSS or make other changes to your site.

The reason the Theme Options work is because they are stored differently and therefore not as effected by the caching.

What is happening, I suspect, is that your stylesheet is cached, so you can modify it until the cows (or horses) come home, and nothing will change. Well, it will after the cache expires.

Follow these instructions to flush the cache and then turn off the caching feature until you are done with the site:

https://www.siteground.com/tutorials/supercacher/static_cache.htm

I think that will solve your problem. Funny that my student with the exact same problem was also building a horses site on Siteground!

Good luck! Let me know what happens. Also delete your browser cache after you flush the hosting cache.

Angela

[sharonq]

Thanks Angela.

Am working on the site again this week – will try all the cache clearing to see if that will help and update you. It got to the point where I was clearing my browse cache with each reload and still getting script errors.

[Author]

Replies