[Résolu] Rendre le header transparent & changer couleur de fond

  • WordPress :4.7
  • Statut : résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • #1887377

    Yann1799
    Participant
    Initié WordPress
    49 contributions

    Bonjour,

    Ma configuration WP actuelle

    • Version de PHP/MySQL : 7
    • Version WP : 4.8.1
    • Thème utilisé : NewsMag by Bishal Napit
    • Extensions en place : akismet, updraft plus, importateur wordpress
    • Nom de l’hébergeur : ovh
    • Adresse du site : http://test.geekfm.fr

    Problème(s) rencontré(s) :

     

    Bonjour à tous,

    Je me lance sur un nouveau thème wordpress pour donner un coup de jeune à mon site web.

    Ma problématique est la suivante : je souhaiterai rendre le header blanc transparent, de façon à ce qu’on puisse voir à travers le fond d’écran qui se trouve derrière lui.

    J’aimerais également changer la couleur du reste du fond blanc, pour un gris clair, un peu moins agressif pour les yeux.

    https://www.hostingpics.net/viewer.php?id=473370hjeader.png

    J’imagine qu’il faut faire des modifs dans le css, mais j’ignore lesquelles.

    Merci de votre aide 🙂

    • Ce sujet a été modifié le il y a 2 mois et 1 semaine par  Yann1799.
    #1887408

    momofr@free.fr
    Participant
    Maître WordPress
    1378 contributions

    Salut, pour le header tu peux utiliser cette règle CSS, soit avec le mot « transparent » soit avec une valeur « rgba » pour avoir un fond transparent :

    .site-branding {
    	background-color: transparent;
    ou
    	background-color: rgba(255,255,255,0.4);
    }

    A copier dans Apparence -> Personnaliser -> CSS additionnelle. Tu enlèves le « ou » et la règle qui est de trop.

    Pour le rgba la dernière valeur 0.4 indique un niveau de transparence (ici 40%).

    Pour la partie content utilises cette règle CSS :

    .site-content {
    	background-color: #f9f9f9;
    }

    Ici un gris très clair, là aussi tu pourrais utiliser un rgba blanc transparent à 0.85 ça laisse apparaître le visuel de manière douce.

    Autre choix pour le bandeau supérieur c’est un dégradé CSS avec cette règle CSS :

    .site-branding {
    	background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0) 80%);
    	border-radius: 8px 8px 0px;
    }

     

    • Cette réponse a été modifiée le il y a 2 mois et 1 semaine par  momofr@free.fr.
    Fichiers joints :
    Vous devez être connecté pour voir les fichiers joints.
    #1887429

    Flobogo
    Modérateur
    Maître WordPress
    13618 contributions

    Bonjour,

    Oui, ça se passe en CSS.

    • Pour le header :

    Il faut remplacer la couleur blanche #fff par son équivalent en rgba, et jouer sur la transparence –> rgba(255, 255, 255, 1) jusqu’à rgba(255, 255, 255, 0)

    A modifier ici (lignes 811 et suivantes du fichier style.css) :

    .site-branding {
        background: #fff none repeat scroll 0 0;
        padding: 30px 0;
    }

     

    • Et pour la couleur de fond de page, c’est lignes 264 et suivantes du fichier style.css :
    .site-content {
        background: #fff none repeat scroll 0 0;
        padding: 30px 0;
    }

    –> Vous remplacez le code #fff par #e7e9ec ou tout autre code couleur à choisir .

    Mettez les codes modifiés dans l’admin’, à Apparence > Personnaliser > CSS additionnel

    Par la suite, pour trouver ce qu’il faut modifier, vous pouvez utiliser la fonction « inspecter l’élément » (accessible par clic droit sous Firefox ou Chrome) –> cela permet d’afficher les règles CSS appliquées aux éléments du site pour voir ce qu’il faut modifier, on peut même tester les modif’ en direct.
    Voici un tuto simple pour cet outil.

     

     

    #1893381

    Yann1799
    Participant
    Initié WordPress
    49 contributions

    Merci les gars, ca fonctionne parfaitement 🙂

     

    #1894209

    Flobogo
    Modérateur
    Maître WordPress
    13618 contributions

    @momofr : désolée, nos réponse se sont croisées, je n’avais même pas vu en postant.  😳

    @yann1799 : super si ça vous convient. Au moins, vous aviez toutes les explications possibles  😉

     

5 sujets de 1 à 5 (sur un total de 5)
  • Vous devez être connecté pour répondre à ce sujet.