Wordpress Child Theme CSS file cannot override some styles of Parent Theme CSS Files

HTML & CSS
,
1

Edit
Never mind, fixed it by adding the !important tag to the styles that weren’t showing in the child css, bit of a quick and dirty fix, but it works :wink:

Thought I would leave the above edit just in case others might have a similar issue.

Hi Everyone,

I am creating some custom html and css for the footer widgets of a Wordpress theme that I bought

I created the html/css that I needed in their own seperate files using bootstrap as a base to first to test out the code, then I created a child theme to apply the new footer widget html and bootstrap css to.

I am having a lot of issues getting the original html/css file I created to look exactly the same on Wordpress as the parent theme is overriding the child theme css for some of the styles.

The biggest issue I am having with the styles is the middle list items losing their bottom border

Here is a link to the original code as it should look
http://amandaswellbeingpodcast.com/footer-test/footer-2.html

Here is a link to the wordpress website that has the above code in the footer
https://amandaswellbeingpodcast.com/

This is my child theme’s CSS and PHP functions file code

t/* My custom css file */

.card {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;
}
.card-body {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-box-flex: 1;
    -ms-flex: 1 1 auto;
    -flex: 1 1 auto;
    padding: 1.25rem;
}
.card-title {
    margin-bottom: .75rem;
}
h5.card-title {
    font-size: 1.25rem;
}
.list-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
}
.list-group-item {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
}
.list-group #mid {
    position: relative;
    display: block;
    padding: .75rem 1.25rem;
    margin-bottom: -1px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
}

*, ::after, ::before {
    box-sizing: border-box;
}
.list-group-flush .list-group-item {
    border-right: 0;
    border-left: 0;
    border-radius: 0;
}


.card>.list-group:last-child .list-group-item:last-child {
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}
.list-group-flush:last-child .list-group-item:last-child {
    border-bottom: 0;
}
.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: .25rem;
    border-bottom-left-radius: .25rem;
}

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
 
    $parent_style = 'parent-style'; // This is 'luxury-wp' for the Luxury WP theme.
 
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/custom.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/custom.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
?>
2

You sound like you have Wordpress experience, so my suggestions may already be known to you. My apologies if I’m being too shallow.

  1. Specificity is the key to overrides.

  2. The child css file should be the last of the css files in the css cascade. If it is not, styles of the same specificity as the original styles will not be overridden.

  3. One should avoid the use of the !important modifier as much as possible. It can usually be avoided by paying attention to specificity.

There are many tutorials and explanations on the net showing how specificity affects the application of css rules, including some around here. smile

EDIT: URL added

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.