Child theme style.css not overwriting index.php on Wordpress

Question

I hope you can help. I have created a child theme for my wordpress page and set up the style.css and functions.php in it. I assume the enqueue has been set up correctly as I can change a few different things and it appears successfully. However if I try to change something which is in the index.php it doesn't overwrite.

For example I am trying to change the colour of the links when hovered over.

I have checked through various other posts and documentation but doesn't seem to have helped.

Any suggestions or confirmation if my enqueue is infact correct would be gratefully received.

This is my style.css


/* Theme Name:   Blossom pin child
Theme URI:    https://www.diagnosischerry.co.uk
Description:  A blossom pin child theme 
Author:       Blossom Themes
Author URI:   https://blossomthemes.com/
Template:     blossom-pin
Version:      1.0.0
Text Domain:  blossom-pin-child
*/

.archive #primary .post .entry-header .category a {
    background: red!important;
}

.archive #primary .post .entry-header .category a:hover {
    background: red!important;
}

and this is my functions.php

<?php
// enqueue parent styles

function blossompin_scripts() {
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('child-style', get_stylesheet_uri() . '/style.css');
    }
    add_action('wp_enqueue_scripts', blossompin_scripts);

    
?>

EDIT: The enqueueing does seem to be correct as I am able to update the background of the text and some other text but I am having trouble pinpointing and changing the colour of the background colour of a category link.

Below is the pink background I am referring to

The above picture is of inspect. If I change the colour on the top bit from pink it changes but if I were to copy all of that and put it in my style.css or just take the section I think it relates to then it doesn't change colour, just remains pink.

Many thanks Ray

Use your browser dev tools inspect facility to see what/who/where is setting the CSS that is being used. — A Haworth, Apr 13 '22 at 15:13
Hey, Yeah I did that it brought up a huge list of elements that it was all connected to in the index.php. I tried copying the whole thing to replicate it but it didn't work. I think it the enqueue is correct as I am able to change things such as the background of the text, just for some reason I'm unable to change the actual font colour. Thanks for taking the time to reply :) — RayRay, Apr 14 '22 at 08:08
@ahayworth I have updated my main post with a bit more information — RayRay, Apr 14 '22 at 08:22
So it looks as though the theme you are using sets styles in the index file so they overwrite your settings which are in styles.css. As a quick hack what happens if you add !important to the blue? — A Haworth, Apr 14 '22 at 10:43

score 0 · Answer 1 · answered Apr 16 '22 at 08:14

You used get_stylesheet_uri() function wrongly and not CSS related problem. If you check the definition of get_stylesheet_uri() function, you can see it returns full URL of the style.css file in child theme directory

function get_stylesheet_uri() {
    $stylesheet_dir_uri = get_stylesheet_directory_uri();
    $stylesheet_uri     = $stylesheet_dir_uri . '/style.css';
    return apply_filters( 'stylesheet_uri', $stylesheet_uri, $stylesheet_dir_uri );
}

So to enqueue style.css in child theme, you should use wp_enqueue_style('child-style', get_stylesheet_uri()); or wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css');

Child theme style.css not overwriting index.php on Wordpress

1 Answers1