Strofront child theme CSS

Resolved lbnn
(@lbnn)

5 years, 11 months ago
Hello,

I created a child theme for the storefront theme to customize it a bit.

I followed the classic approach by creating style.css and functions.php file in a new storefront-child directory, I integrated the css with the necessary php code and made the right declarations within the css file.

Everything is well recognized when I apply the child theme to my website, at php level, no worries, the functions I add are well executed but when I make changes in the CSS file, it does not change the appearance of the website …

If I add CSS code in “Appearance> Customize> Additional CSS” it works well, but if I remove the CSS and put it in the CSS file of my child theme, it doesn’t work, I don’t understand, it’s not the purpose of the child theme, to be able to make its CSS modifications directly in the child file ?

The code I add is used to center the images above the title of the articles:
```
ul.products li.product > a img {
display: inline;
}
```
And another code which allows you to manage the margin on the left of the page to have a kind of full page instead of a big blank on the left side:
```
.col-full {
max-width: inherit;
padding-left:80px;
}
```
Again everything works in Additional CSS in WordPress but not in the style.css file of the child theme, I don’t understand why…

Did i miss something ?

Can someone help me ?

Thanks in advance

Viewing 13 replies - 1 through 13 (of 13 total)

Senff – a11n
(@senff)

5 years, 11 months ago

Can you share a link to your site? That way we may be able to see what might be the issue.

Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

yes, it’s still under construction : https://shop.techcare-medical.fr

You can see the website with the modifications in the additionnal CSS right now since it doesn’t work with style.css

Senff – a11n
(@senff)

5 years, 11 months ago

From what I can see, you do have a child theme CSS file, but I don’t see any styles in it:

https://shop.techcare-medical.fr/wp-content/themes/storefront-child/style.css?ver=2.5.5

If you put your CSS styles in there, they should be applied to your site.

Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

As i said before, if i write in the child theme style.css the code i put in my previous comment, nothing happen, it only works with additionnal CSS, i will make the try and you will see that the website is not like you saw it.

Senff – a11n
(@senff)

5 years, 11 months ago

Once you’ve added the code in the child theme’s style.css file, let us know and we can take a look at it, to see what might be wrong. 🙂

Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

It’s in place, the code is in the child theme style.css file 😉

Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

@senff Do you see something wrong with the code ?

Jarret
(@jarretc)

5 years, 11 months ago

I’m not senff but looking at your site right now the code you have in your child theme’s style.css is being applied on the site

When looking at the .col-full class I’m seeing the max-width: inherit; and padding-left:80px; in the Chrome dev tools

Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

Ok, thanks for your answer, yes the code is visible, but it seems it doesn’t apply to the theme, because on a large screen there is a big space on the left.

When i used “Additionnal CSS” directly in WordPress, the code i add permits to reduce this space.

Why is the result different between “Additionnal CSS” in WordPress and in my style.css file ?
Senff – a11n
(@senff)

5 years, 11 months ago
Why is the result different between “Additionnal CSS” in WordPress and in my style.css file ?

The only difference is the loading order. What you put un the Additional CSS box, will always load last (after any .css files).

When I look at the source of your site, it is loading the parent CSS first, then your child theme’s CSS, and then the main storefront CSS again:

Because of that, the code you place in your child theme is overrides the parent theme, but is then overriden again by the parent theme.

You may want to check if you configured your child theme correctly to ensure it will only load the parent theme’s CSS file once.
- This reply was modified 5 years, 11 months ago by Senff - a11n.
- This reply was modified 5 years, 11 months ago by Senff - a11n.
Thread Starter lbnn
(@lbnn)

5 years, 11 months ago
Ok, i understand, thanks for the explanation 🙂

I used this method, i put this code in my functions.php file :
```
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; 
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
```
Maybe should I replace “parent-style” by “storefront” and “child-style” by “storefront-child”…
- This reply was modified 5 years, 11 months ago by lbnn.
- This reply was modified 5 years, 11 months ago by lbnn.
- This reply was modified 5 years, 11 months ago by lbnn.
- This reply was modified 5 years, 11 months ago by lbnn.
Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

Ok, I think this was the problem, now it’s working..

Thanks for your help

Thread Starter lbnn
(@lbnn)

5 years, 11 months ago

Solved, thanks for your help