How to include .css code in a WordPress page template?

admin管理员组

文章数量:1302940

I have set up a template on my Wordpress website that will apply some .css code to hide the header, footer and breadcrumbs on my landing pages.

I've created a css folder in my child theme, created a .css file with the code below and works perfectly with the function under the code:

 #header-wrap, #navi-wrap.site-header, #footer-wrap, #footer.clearfix, #sidebar.secondary.clearfix, #breadcrumbs, .page-title {
    display:none
} 

Function in my child theme:

function wpse_enqueue_page_template_styles() {
    if ( is_page_template( 'template-fullwidth.php' ) ) {
        wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/landing-page.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );

I have another .css code though, that changes the link colour from the website default Blue to White, in my Theme customizer - Adidtional CSS and it works, but I would like to include it in my .css file, so I don't have to apply it to every page separately:

.page-id-2934 a.wp-block-button__link.has-white-color.has-text-color.has-background.no-border-radius{
    color:white;
} 

Problem is, when I add this code as it is (without the page id, obviously) in my existing .css file, an exclamation mark shows up on the left and when I hover it tells me to not use adjoining clases, that a,wp... it's Overqualified and I should use only .wp-block-button__link without element name and I don't know what that means. When I leave only .wp-block-button__link {color:white;} it's not working.

I also have some pages with different buttons and the code that works in the Additional CSS is

.page-id-3547 a.uagb-buttons-repeater {
    color:white;
}

...But when I put that in the .css file I get the same message: with a... is overqualified and when I leave just .uagb-buttons-repeater {color:white;} it doesn't work.

I've also created a separate .css file:

a.uagb-buttons-repeater {
    color: white;
} 

...But when I created a similar function as the one for hiding the header and footer, it still doesn't work.

So, long story short, I would like to add the white link .css code in the .css file, so that my landing pages button links are white instead of blue on pages with Fullwidth template and I was hoping to add both codes, so that it works with both button types. Alternatively, I could just use the second button type (a.uag...) and change it on the existing pages. Any help would be appreciated.

Thanks

本文标签： How to include css code in a WordPress page template