[Résolu] Thème Alizee : positionnement éléments en-tête + niveau d’opacité ? (Créer un compte)

  • WordPress :4.6.1
  • Statut : résolu
5 sujets de 1 à 5 (sur un total de 5)
  • Auteur
    Messages
  • #1601985
    aarycia@gmail.com
    Participant
    Initié WordPress
    2 contributions

    Bonjour,

    Je réalise actuellement un site pour une association bénévole. Nous avons choisi le thème wordpress Alizee (“https://fr.wordpress.org/themes/alizee/”) et allons sans doute faire appel à un illustrateur pour la bannière (en-tête).
    Dans la personnalisation du thème, il est indiqué les dimensions de 1920×550 pour l’en-tête, sauf que… après de multiples essais, lorsque je glisse une bannière d’en-tête à ces dimensions exactes (avec ou sans recadrage proposé), l’image est tronquée (à la fois de manière auto, en bas, et en haut parce que le menu vient par-dessus) et je perds une partie du contenu. Du coup, je me demande comment positionner les éléments importants de la bannière (textes, titres, images) et quelles sont les zones à laisser “nues”… ?

    Par ailleurs, le thème applique une couleur sur l’en-tête, mais je n’ai pas encore trouvé comment régler l’opacité (je voudrais la rendre moins forte). Est-ce que vous sauriez où modifier le code pour diminuer cette opacité ?

    Merci d’avance pour votre aide !

    #1602106
    Flobogo
    Modérateur
    Maître WordPress
    16228 contributions

    Bonjour,

    Pour la taille de la bannière, vous devriez poser la question sur le support du thème.

    Pour l’opacité, on verra ça en CSS directement quand votre site sera en ligne (ou alors, posez aussi la question au support)

     

    #1602311
    momofr@free.fr
    Modérateur
    Maître WordPress
    3217 contributions

    Le style du bandeau menu est spécifié en ligne 120 du fichier styles.css :

    .main-navigation {
      background-color: rgba(60, 60, 60, 0.8);
      box-shadow: 0 0 1px #adadad;
      clear: both;
      display: block;
      float: left;
      position: relative;
      text-align: center;
      width: 100%;
      z-index: 999;
    }

    Pour l’image du header les dimensions sont indiquées pour une taille écran 1920 pixels avec un positionnement fixe, elle est découpée selon la largeur de l’écran et ne s’adapte pas (background size auto/auto).

    Avec le responsif il est délicat de prévoir un visuel qui s’adapte pile-poil à la largeur de l’écran, le principe actuel c’est de faire un visuel de 1500 pixels de large et de mettre le background-size en “100%” mais attention c’est la hauteur de l’image qui va bouger…

    La seule solution c’est une image dans un conteneur responsif (et non en background image).

    #1602313
    PhiLyon
    Modérateur
    Maître WordPress
    25690 contributions

    Bonjour.

    Pour le responsive, pour le thème Sensible, j’avais mis ça

    /* Pour le thème Sensible */
    
    #hero-header {
      position: relative; 
      display:block;
      padding-bottom: 100%;
        background-size:100% auto !important;
                        -webkit-background-size:100% auto !important;
                        -moz-background-size:100% auto !important;
                        -ms-background-size:100% auto !important;
                        -o-background-size:100% auto !important;
    }

    A adapter à ton thème

    🙂

    #1603733
    aarycia@gmail.com
    Participant
    Initié WordPress
    2 contributions

    Rebonjour !

    Merci pour vos conseils et vos astuces.
    J’ai installé une extension qui me permettait d’inclure du CSS personnalisé et grâce à vos conseils, je suis parvenue à figer l’en-tête. Ce sera plus facile de cette façon pour gérer le positionnement des différents éléments…

    Sinon j’ai trouvé comment modifier l’opacité du menu, donc problème réglé de ce côté là aussi 🙂

    Merci encore pour votre aide.

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