Adding Child Theme to both Ribosome and WooCommerce

Hi there!

For the first question, I have a feeling it could be the weight of the selectors. I do see it being applied but then it also has another that matches. I see this one:

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    padding: .5em 0;
    margin: 0;
    font-size: 1em;
}

As for the templates, not sure if you have seen their docs: https://docs.woocommerce.com/document/template-structure/

Hopefully that helps you out a bit.

Thanks for the Template-structure doc. I think that will be really helpful.

I’m now trying to do something really basic, just to get my css to be seen. I’m trying to change the entry-title with the name of my business to purple. I put as much specificity in as I could:

body #main #primary #content #post-11 .post-11 .entry-header .entry-title {
color: purple;
}

But when I look at the styles that are applied I don’t see my style.css in there anywhere (version 1.0.0). Shouldn’t it be listed and ignored if it is not being applied?

Thanks so much for your help. This is driving me crazy!

Ah. It took me a little bit to fully see what you were doing. I think part of that is because you have the #post-11 and .post-11 next to one another.

You could potentially use:

.home .entry-header .entry-title {
  color: #c0ffee;
}

Nope. Still not working.

What concerns me is that while my style.css file is listed in the Head section of the page, no matter what I put in the css file doesn’t get reported when I “inspect” in the styles section. I would expect that if something were to be overriding my css, that I would still see my changes in the list of Styles that are applied to the element. My changes would be crossed out, and some other properties would be applied, but I think that I should at least SEE them in the styles tab. That leads me to think that there is something wrong in how I am including my files.

Currently:

/*
 Theme Name:   PTBasketsChild
 Description:  A child theme for Peggy Thrasher Baskets
 Author:       Peggy Thrasher
 Template:     ribosome
 Version:      1.0.0
*/

.post-11 {
	display: hidden!Important;
}

 <?php

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {

   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );

}

 ?>

At this point, I would be happy to be able to change anything, just so I would know that the child files are actually being used.

Thanks for your help

Inspecting your page, instead of:
.post-11 {
display: hidden!Important;
}

I tried:
.post-11 {
display: none;
}

Resulting in an almost empty page.

Thanks, Willem0. That is the goal!
But it doesn’t work when I change my style.css file because it isn’t applying my style.css file. I believe that the problem is not with the css itself, but with the way that it is not connecting the .css file in order to apply the properties.

Are you editing the stylesheet style.css ?
If so, try Dashboard > Appearance > Customizer > Extra CSS

I have created a child theme and I’m trying to make the changes in the child theme’s style.css. I have successfully done this on a different WordPress site (and have basically copied the functions.php and style.css files from that other site). I think that this is the safest way to make changes that will last through updates.

That’s the correct way, indeed.
However, if it doesn’t work, you will have to find the cause of the failure.
And if you can’t find a cause, try to find a solution by trial and error.
So, did you try Customizer > Extra CSS?

Start the Extra CSS for example with:
/* Start Extra CSS */
…

And end your css with:
/* End of Extra CSS */

so you can easily find it in de source-text of your pages.

Hi Willem0,

Yes, I tried the extra css and it did work. The site doesn’t go live
for another month, so I’ll keep working on the child theme, but if I
can’t manage that, I could use the extra css in the meantime.

Thanks for the helpful tip.

Consider the Extra CSS as a grand-child, being always on top ??
For the child-theme and for the extra-css you don’t need to worry about parent-updates.

For me, this works:

/*
Theme Name: PTBasketsChild
Description: A child theme for Peggy Thrasher Baskets
Author: Peggy Thrasher
Template: ribosome
Version: 1.0.2 ??
*/

.post-11 {
/*display: none;*/
}
.post-11 h1.entry-title {color:purple}

As you can see in the head-section of your page-sources (and here-below), the Extra-CSS is the LAST stylesheet mentioned in the source, so dominating. Immediately before this styles, the header-color is defined. So (for now) the only way to change the header-color is by Extra-CSS (named: “wp-custom-css”). (Unless you can find out, where the so-called “ribosome-header-css” is defined).

<head>
…

<style type=”text/css” id=”ribosome-header-css”>
.site-header h1 a,
.site-header h2 {
color: #8224e3;
}
</style>

<style type=”text/css” id=”wp-custom-css”>
/* Start Extra CSS */
.woocommerce ul.products li.product .woocommerce-loop-product__title { font-size: .65em;}
/* End of Extra CSS */
</style>
</head>

Using the extra css did work for the entry-title. But that wasn’t the change I was interested in. I was just experimenting with that because it seemed like a simple example that would let me know if my changes were getting in.

The woocommerce change is the one I really care about – and now that is working on peggythrasher.com/shop.

So I’m good for now.

Thanks for your help.