Changer l'image d'en-tête

Il existe de nombreuses images et modèles d’en-tête différents disponibles pour être modifiés et utilisés. Les styles de l’image d’en-tête par défaut ou du thème Kubrick WordPress, ainsi que tout thème basé sur ce thème, sont plus complexes à modifier que ceux des thèmes classiques. les styles se trouvent dans les styles de la section "head" de header.php, ainsi que dans styles.css. Pour modifier uniquement les liens d'en-tête de l'image, ouvrez le fichier header.php de votre modèle et recherchez des styles comme celui-ci :

#header (arrière-plan : url("/images/wc_header.jpg") sans répétition en bas au centre ; ) #headerimg ( marge : 7px 9px 0 ; hauteur : 192px ; largeur : 740px ; )

NOTE: L'utilisation de bloginfo n'est possible que lorsque le style est utilisé conjointement avec le fichier modèle principal. Les balises de modèle WordPress ne fonctionneront pas dans une feuille de style (style.css). Pour déplacer ce style dans la feuille de style, remplacez la balise de modèle par l'URL réelle de l'image d'en-tête.

Pour modifier le fichier, remplacez « kubrickheader.jpg » par le nom du nouveau graphique que vous avez téléchargé sur votre site pour le remplacer. S'il se trouve dans un autre répertoire, changez en remplaçant les balises bloginfo() par l'adresse spécifique de l'emplacement graphique.

Si vous utilisez une image de la même taille, remplacez simplement l'image. S'il s'agit d'une taille différente, remplissez la hauteur et la largeur de l'image dans la section suivante appelée #headerimg. Si vous ne connaissez pas et n'utilisez pas Windows, affichez le dossier où se trouve l'image sur votre ordinateur en mode Miniature. Cliquez sur le bouton "Affichage> Vignette" dans le menu de l'Explorateur Windows. En mode d'affichage Miniature, recherchez votre image et maintenez le bouton de la souris enfoncé. Une petite boule de note apparaîtra avec une liste de tailles. Utilisez ces informations dans les styles. Sinon, faites un clic droit sur le fichier graphique et sélectionnez "Propriétés" et cela devrait vous donner la taille et les dimensions du fichier.

Une fois l’image d’en-tête en place, il est temps de s’attaquer au reste des en-têtes. Ouvrez le fichier de feuille de style style.css et notez ce qui suit :

• en-tête
• en-tête
• description

Votre thème peut ou non contenir tous ces éléments, mais le thème par défaut les contient tous à différents endroits de la feuille de style. Il peut être nécessaire de modifier les attributs de tout ou partie de ces éléments pour modifier l'apparence de votre en-tête. Lorsque vous redimensionnez les images d'en-tête ou les illustrations d'en-tête, veillez à redimensionner les autres sélecteurs CSS structurels, tels que le contenu ou la barre latérale, pour correspondre aux modifications apportées à la taille de l'en-tête.

Spécification de l'en-tête de l'image

L'image d'en-tête qui s'inscrit dans le thème WordPress par défaut mesure environ 192 x 740 pixels. Lorsque vous remplacez un en-tête dans n’importe quel thème WordPress, vérifiez la taille de l’image d’en-tête, puis trouvez un remplacement qui correspond à cette taille. Si vous choisissez une image d'en-tête plus petite, plus large ou plus haute que l'image de remplacement, vous devrez peut-être modifier d'autres éléments structurels de la page Web pour s'adapter à la taille de l'en-tête.

Si vous modifiez le thème d'un site entier, la largeur de la page globale ou de la zone de contenu doit être prise en compte par la taille de l'image d'en-tête. Les deux tailles d'écran les plus courantes sont 1024 x 768 et 800 x 600 pixels. Cependant, les écrans larges gagnent du terrain et les concepteurs Web doivent désormais se préparer à des largeurs d'écran de 1 280 x 1 024 et 1 600 x 1 200.

Si vous définissez votre site Web sur « flottant », situé au milieu de la fenêtre du navigateur avec un espace des deux côtés, vous pouvez définir la largeur de votre en-tête comme vous le souhaitez. Lors de la conception d'un thème avec des largeurs d'écran flexibles ou « élastiques », la largeur de l'en-tête devient importante.

Si vous utilisez un en-tête d'image qui peut être répété et que vous utilisez une largeur élastique, vous pouvez définir des styles dans l'en-tête de répétition pour remplir l'espace :

#header ( background: url("/images/kubrickheader.jpg") répéter-x en haut à gauche; )

Cela entraînera la répétition horizontale de l’image d’en-tête du coin supérieur gauche jusqu’à la fin. Vous pouvez personnaliser ce comportement selon la position d'arrière-plan souhaitée en fonction de vos besoins techniques et de conception.

Illustration d'en-tête

Un nouveau terme apparu dans le domaine du web design est En-tête artificiel(art d'en-tête). Il s'agit d'images d'en-tête généralement dessinées à la main à l'aide de combinaisons de couleurs, de formes, de symboles, d'images et de texte. Créer un tel titre peut être difficile et prendre beaucoup de temps à l'auteur. Bien qu'il existe des en-têtes artificiels gratuits, certains sites vendent leurs propres en-têtes artistiques faits à la main. Même si une photographie peut être unique en son genre et transmettre le style visuel souhaité, un titre fait à la main est plus facile à assortir avec d’autres couleurs de page Web et est généralement plus esthétique en raison de sa nature distinctive.

Choisir une illustration d’en-tête prête à l’emploi présente certains avantages. les artistes ont réalisé le travail et il ne vous reste plus qu'à choisir le design qui convient le mieux à votre site. Et le graphique est prêt à l’emploi, déjà dimensionné et enregistré sous forme de fichier de petite taille.

Dans cet exemple, la balise de modèle list_cats() définit la feuille de catégorie à trier par ID dans une feuille non triée (

• ) n'a ni date ni nombre de publications, ne masque pas les catégories vides, utilise la catégorie "description" pour le titre dans le lien, n'affiche pas les descendants de la catégorie parent et exclut les catégories 1 et 33. Il est à part entière " bloc "catégories". Attention, le lien vers la page "accueil" ou page principale du bfla a été ajouté manuellement en début de fiche.
  • MAISON

  ">

  Pour styliser cette feuille, utilisez #categorylist dans style.css :

  #categorylist (taille de police : 12px ; style de police : normal ; transformation de texte : majuscules ; ) #categorylist ul (type de style de liste : aucun ; style de liste-image : aucun ; marge : 0 ; padding-bottom : 20px; ) #categorylist li ( display: inline; padding: 0px 5px;) #categorylist a:link, #categorylist a:visited (couleur:bleu) #categorylist a:hover (couleur:rouge)

  Le bloc ressemblera à ceci : Voici quelques conseils et informations pour vous aider à choisir et personnaliser l’en-tête de votre site WordPress.

  Faites attention au placement et à la couleur du texte.

  • La couleur et l'emplacement du texte du titre peuvent être ajoutés ou soustraits à votre présentation. Voici quelques conseils.
  • Si vous utilisez du texte blanc, assurez-vous de définir la couleur d'arrière-plan dans l'en-tête et/ou l'en-tête pour afficher à nouveau le texte blanc si, pour une raison quelconque, l'image n'apparaît pas à l'écran ou si l'option « Afficher les images » de l'utilisateur est désactivée. Cela permettra à votre texte blanc d'être toujours visible.
  • Si le texte est difficile à lire par rapport à l'occupation de la zone graphique, positionnez le texte dans une zone de titre d'image moins saturée.
  • Assurez-vous que la couleur du texte est facile à voir pour tous les visiteurs du site et n'entre pas en conflit avec les couleurs de l'illustration du titre. Le texte orange fluorescent sur fond vert citron est morbide.
  • Veuillez noter que certaines différences de couleur et certains motifs dans le titre de votre art peuvent faire « disparaître » les lettres du texte superposé. La même chose s'applique si vous insérez du texte dans la première illustration ou dans le titre de l'image.
  Fixez-vous des objectifs.

  Un bon titre reflète le contenu du site. Tout le reste doit également répondre aux attentes et être reflété dans le titre. Par conséquent, le titre doit refléter le contenu, le but et l’idée du site.

  Le titre doit attirer l’attention de l’utilisateur et le « forcer » à rester sur le site.

  Les titres ne doivent pas toujours nécessairement contenir des images.

  Tous les titres ne doivent pas nécessairement être accompagnés de photos et d'images. Parfois, les mots sont plus importants, qu’ils soient sur une couleur délavée ou sur un fond blanc.

  Un en-tête encombré rend le site encore plus encombré.

  Évitez les publicités intrusives, la navigation encombrée, le texte illisible, les longs fils d'actualité dans l'en-tête. Plus c’est simple, mieux c’est.

  Suivez les normes d’accessibilité dans l’en-tête.Nous en avons parlé, mais vous pouvez faire davantage pour vous assurer que votre titre répond aux normes d'accessibilité. Utilisez les balises h1, puis les programmes spéciaux qui lisent le texte à l'écran le reconnaissent comme un en-tête. Utiliser Alt dans les liens et les images.Les titres peuvent avoir n’importe quelle hauteur, mais n’oubliez pas que le contenu est roi.

  L'en-tête moyen a une hauteur inférieure à 200 pixels, mais sa hauteur varie de très fine à la moitié de la page. N'oubliez pas que la principale raison pour laquelle les gens visitent votre site est son contenu, et plus ils doivent faire défiler votre en-tête pour accéder au contenu, moins ils ont tendance à être intéressés. Aidez-les à accéder au contenu du titre.Pensez à la « personnalité du site ».Le titre fait partie de l'identité du site ; les utilisateurs doivent avoir l'assurance qu'ils se trouvent sur le même site lorsqu'ils cliquent sur un lien vers une autre page du site. Considérez le titre et/ou le titre artificiel comme la « marque » de votre site.Le but de cet article est d'envisager différentes options pour styliser les en-têtes h1, h2. La balise H1 est une balise importante dans le corps de la page. En règle générale, il contient le titre thématique de la page. La balise H1 doit se démarquer afin que l'utilisateur puisse facilement comprendre de quoi parle la page de votre site. Par conséquent, cette balise devrait être le point fort de votre page. Le style CSS de la balise H1 peut être simple, mais l'essentiel est de s'assurer que la taille de la police est la plus grande parmi les autres sur la page. Et pas seulement parce qu’il attire l’attention de l’utilisateur, il joue aussi un rôle dans la pertinence de la page, et donc dans l’optimisation.

  Suivez les normes d’accessibilité dans l’en-tête.Nous en avons parlé, mais vous pouvez faire davantage pour vous assurer que votre titre répond aux normes d'accessibilité. Utilisez les balises h1, puis les programmes spéciaux qui lisent le texte à l'écran le reconnaissent comme un en-tête. Utiliser Alt dans les liens et les images.Les titres peuvent avoir n’importe quelle hauteur, mais n’oubliez pas que le contenu est roi.

  Nous examinerons les moyens de styliser les balises h1, h2 lors de la création d'un flux. Examinons deux options pour implémenter un en-tête sous la forme d'un ruban : Western et ma version. Je dirai à l'avance que ma méthode est prioritaire, mais si vous avez vos propres options (méthodes) pour styliser les titres, je vous serais reconnaissant de les partager dans les commentaires.

  Voie occidentale

  C’est une bonne option, mais je n’aime pas vraiment la manière CSS d’implémenter le flux. J'ai trouvé cette méthode pour créer un ruban CSS h1 sur l'un des sites occidentaux. Ce flux est implémenté en utilisant du code CSS pur, bien que la compatibilité entre navigateurs en ait souffert (dans IE, cela ressemble à un simple bloc). Vous trouverez ci-dessous le code source du style CSS.

  H1.ribbon ( taille de police : 16px !important ; position : relative ; arrière-plan : #ba89b6 ; couleur : #fff ; alignement du texte : centre ; remplissage : 1em 2em ; marge : 0 0 3em ; ) h1.ribbon : avant, h1.ribbon:after ( contenu : " " ; position : absolue ; affichage : bloc ; bas : -1em ; bordure : 1,5em solide #986794 ; z-index : -1 ; ) h1.ribbon :avant ( gauche : -2em ; bordure-droite-largeur : 1,5em ; bordure-gauche-couleur : transparent ; ) h1.ribbon:after ( droite : -2em ; bordure-gauche-largeur : 1,5em ; bordure-droite-couleur : transparent ; ) h1. ruban .ribbon-content:avant, h1.ribbon .ribbon-content:after ( contenu : "" ; position : absolue ; affichage : bloc ; style de bordure : solide ; couleur de bordure : #804f7c transparent transparent transparent ; bas : - 1em; ) h1.ribbon .ribbon-content:avant (gauche: 0; largeur de bordure: 1em 0 0 1em; ) h1.ribbon .ribbon-content:after ( droite: 0; largeur de bordure: 1em 1em 0 0; )

  En code HTML, le ruban h1 ressemble à ceci :

  Style CSS des en-têtes h1, h2 pour le site

  À ma façon

  Comme vous pouvez le constater, le code CSS est fastidieux pour styliser uniquement la balise h1. Par conséquent, je propose ma propre façon de créer une telle bande. La compatibilité entre navigateurs a été testée sur IE, FireFox, Opera, Chrome. Vous trouverez ci-dessous le code CSS et tous les fichiers sources.

  H1 (hauteur : 67 px ; arrière-plan : url (ribbon_left.png) en haut à gauche sans répétition ; couleur : #FFF ;) h1 fort (hauteur : 67 px ; affichage : bloc ; largeur maximale : 450 px ; marge gauche : 56 px ; remplissage -right:56px arrière-plan : url(ribbon_right.png) en haut à droite sans répétition ;)

  Comment l'utiliser en HTML :

  En-tête CSS H1 pour le site

  Photos :

  Le poids total des images est de 750 octets. Le code CSS ne prend pas plus de deux lignes et pèse 236 octets. Je suis satisfait du résultat, et tout est simple et clair, contrairement à la méthode occidentale, où le poids du code CSS est de 980 octets. Bien que ma version et la version occidentale aient un poids identique, il est bien pire de comprendre le code que de traiter l'image dans Photoshop. On peut supposer que la vitesse de chargement d'un fichier CSS est plus rapide que celle de trois fichiers (totalement identique au poids d'un fichier CSS), mais vous pouvez implémenter l'arrière-plan sous forme de sprites, ce qui augmentera la vitesse de chargement du site. Découvrez comment augmenter la vitesse à l’aide des sprites CSS.

  Exemples de CSS H1, H2

  Tous les exemples seront implémentés sur la base du principe de stylisation des titres selon ma méthode (exemple, site).

  Style CSS de l'en-tête H1

  Dans ce paragraphe, nous nous concentrerons sur des exemples réels de style de l'en-tête h1. Des exemples, dits haut et fort, puisque chaque site a un design unique. Laissez-moi vous donner un exemple universel de style H1. Vous comprenez déjà mon idée de styliser les titres, je souhaite la compléter en utilisant de la transparence dans l'image de fond, ce qui peut être facilement réalisé dans Photoshop. Voir un exemple ci-dessous.

  Titre (largeur : 500 px ; arrière-plan : #888 ;) h1 (hauteur : 70px ; arrière-plan : url (left.png) en haut à gauche sans répétition ; couleur : #FFF ; hauteur de ligne : 50px ;) h1 fort (hauteur : 70px ; display:block; margin-left:60px; padding: 6px 60px 0px 0px background: url(right.png) en haut à droite sans répétition ;)

  Images sources :

  Texte d'en-tête h1

  Comme vous pouvez le voir, les images originales sont translucides, et dans la classe de titre, en modifiant la valeur d'arrière-plan, vous pouvez obtenir les résultats suivants :

  

  CSS h1 + h2 (style collaboratif)

  Styliser h1 et h2 ensemble est approprié si vous avez un épilogue ou une petite introduction à un article de votre site, qui peut être placé dans la balise h2. Par exemple:

  H1– Styliser les titres h1, h2 ;

  Le but de cet article est d'envisager différentes options pour styliser les en-têtes h1, h2. La balise H1 est une balise importante dans le corps de la page. En règle générale, il contient le titre thématique de la page. La balise H1 doit se démarquer afin que l'utilisateur puisse facilement comprendre de quoi parle la page de votre site. Par conséquent, cette balise devrait être le point fort de votre page. Le style CSS de la balise H1 peut être simple, mais l'essentiel est de s'assurer que la taille de la police est la plus grande parmi les autres sur la page. Et pas seulement parce qu’il attire l’attention de l’utilisateur, il joue aussi un rôle dans la pertinence de la page, et donc dans l’optimisation.– Apprendre à concevoir des titres h1, h2 en utilisant CSS.

  Ceci est mon exemple, vous avez probablement votre propre idée sur la façon de concevoir les pages du site Web. L’exemple css h1 + h2 est similaire au précédent, regardons le code css.

  Gauche (hauteur: 100 px; arrière-plan: url (gauche.png) en haut à gauche sans répétition;) .right (largeur: 500 px; hauteur: 100 px; affichage: bloc; marge gauche: 45 px; remplissage: 0 px 45 px 0 px 0 px; arrière-plan : url(right.png) en haut à droite sans répétition ;) h1 (couleur : #FFF ; taille de police : 18 px ; rembourrage : 15 px ;) h2 (couleur : #CCC ; taille de police : 16 px ; rembourrage : 5 px ;)

  Images sources :

  

  Texte d'en-tête H1

  Une petite introduction, ou description de l'article, entourée d'une balise H2.

  Afficher:

  

  L'essence du style conjoint (h1 + h2) des titres est similaire à l'exemple précédent, seulement dans ce cas, des blocs div sont utilisés.

  Style CSS de l'en-tête H2

  Styliser l’en-tête h2 n’est pas délicat. Mais, puisque notre article concerne le style des titres h1 et h2, nous considérerons tout jusqu'au bout.

  En règle générale, la balise h2 est utilisée pour mettre en évidence les sous-paragraphes d'un article ou d'un autre élément du site. Je conseillerais de créer des titres h2 modestes, discrets mais pratiques. J'aime beaucoup l'idée de la façon dont Wikipédia est organisé. Je vous conseille de créer quelque chose de similaire. C'est simple et pratique. Par exemple:

  Exemple de style d'en-tête H2

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut pretium mauris nec arcu. Entier à Leo vel ipsum elementum sodales. Nam est quam, posuere non, feugiat nec, consectetuer ac, lectus. Suspendisse egestas fringilla odio. Donec lacinia tristique ante. Cum sociis otanique penatibus et magnis dis parturient montes, nascetur ridiculus mus.

  Une autre sous-section de votre article

  Nulla venenatis, turpis eu vestibulum tincidunt, felis diam luctus velit, facilis cursus mi ligula vitae nunc. Curabitur libéro. Fusce Felis. Nam gravida nulla non eros. Donec non nisl. Nulla ut odio. Curabitur sollicitudin nonummy est. Nullam molestie lectus quis nibh.

  Afficher:

  
  

  Simple, pratique et multi-navigateur.

  J'espère que mon article vous a aidé. Si vous avez des questions ou des suggestions concernant le style CSS des en-têtes h1, h2, écrivez dans les commentaires.