web-dev-qa-db-fra.com

Écraser les styles style.css du style index.php

J'essaie de changer l'apparence de mon site Web mais, ce faisant, je suis confronté à des problèmes.

Maintenant, différentes classes et identifiants dans style.css s'appliquent à toutes les pages de mon thème.

Je veux écraser ces éléments de style (seulement 2 ou 3) sur ma page d'accueil.

Maintenant, lorsque j'ajoute du style dans mon fichier index.php, ils ne sont pas appliqués.

J'ai déjà essayé de les marquer !important

Extraits de code: j'ai ajouté ce code dans mon fichier index.php avant le début du code <?php

<style type="text/css">
#main {
    margin-left: 0 !important;
}
.container {
    width: 95% !important;
}
</style>

Mais ils n'affectent toujours pas le look de ma page d'accueil.

J'ai confirmé que la classe et les identifiants que j'utilise sont parfaits et présents dans le fichier style.css?

Alors, pouvez-vous s'il vous plaît me guider comment écraser ces styles d'élément uniquement sur ma page d'accueil?

OR

Si je fais quelque chose de mal dans le processus ci-dessus?

homepagestylesheet
1
Paras Shah

Ajoutez ce code dans le functions.php de votre thème

add_action('wp_footer', 'my_home_page_styles', PHP_INT_MAX);
function my_home_page_styles() {
    if(is_front_page()) {
    ?>
    <style>
        #main {
            margin-left: 0 !important;
        }
        .container {
            width: 95% !important;
        }
    </style>
    <?php
    }
}

N'oubliez pas de vider votre cache avant de l'actualiser. Utilisez Ctrl + F5 pour actualiser dans Google Chrome.

1
Omar Tariq

Votre page d'accueil a une classe sur le corps appelée "maison"

Donc, dans votre fichier style.css

body.home #main {
  margin-left: 0;
}
body.home .container {
  width: 95%;
}

Depuis votre commentaire affirme qu'il n'y a pas de classe appelée à la maison. Voici une capture d’écran de la page de fichier par défaut du wordpress vingt-quinzième header.php sur la balise body <body <?php body_class(); ?>>.

Si cela ne fait pas partie de votre thème actuel, vous devriez l'ajouter.

enter image description here

1
Ace