WordPress : placer l’icône dans le titre de la page WordPress

Publié par Jean-Michel le

Ce site Web est exécuté avec WordPress. Le thème a un bouton Facebook qui s’affiche dans l’en-tête.

Je souhaite déplacer le bouton Facebook du thème dans la ligne de titre de la page. Voici une photo de ce que j’essaie de faire. Je pensais pouvoir copier ce code dans le thème enfant quelque part.

<a class="genericon_parent genericon genericon-facebook-alt"  title="Facebook" href="https://www.facebook.com/karen.b.russell.54" onclick="javascript:window.open('https://www.facebook.com/karen.b.russell.54'); return false;"><span class="screen-reader-text">Facebook</span> </a>

J’ai copié ce code dans content.php, content-none.php, content-single.php, content-page.php mais maintenant il ne s’affiche pas correctement. Voilà à quoi ça ressemble maintenant.

Lire également:  Une nouvelle installation de Wordpress ne reflète pas instantanément les modifications apportées aux fichiers

Je pense que je peux copier la mise en forme CSS du bouton des thèmes dans l’en-tête vers le nouveau dans les titres de contenu. Lorsque j’ai essayé de copier le css, cela n’a pas fonctionné.

Comment modifier le bouton (entouré dans la deuxième image) pour qu’il ressemble au premier ?

Le code en direct peut être consulté surhealthylifeadvisors.com

Je vois que le bouton d’origine semble utiliser ce css:

.site .widget_catchadaptive_social_icons a.genericon {
background-color: #f2f2f2;
border: 1px solid #eee;
border-radius: 3px;
-moz-border-radius: 3px;
box-sizing: content-box;
-webkit-border-radius: 3px;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
color: #404040;
margin: 0 0 5px 5px;
padding: 5px;}

et

healthylifeadvisors.com/media="all"
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;}

Le CSS affiché lorsque j’inspecte le nouveau bouton est :

.entry-title, .entry-title a {
color: #404040;
}
healthylifeadvisors.com/media="all"
.genericon {
font-size: 16px;
vertical-align: top;
text-align: center;
-moz-transition: color .1s ease-in 0;
-webkit-transition: color .1s ease-in 0;
display: inline-block;
font-family: "Genericons";
font-style: normal;
font-weight: normal;
font-variant: normal;
line-height: 1;
text-decoration: inherit;
text-transform: none;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
speak: none;
}
a {
font-weight: 700;
color: #00BB58;
}
healthylifeadvisors.com/media="all"
a {
color: #21759b;
text-decoration: none;}
healthylifeadvisors.com/media="all"
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}

Solution n°1 trouvée

Cela devrait le faire:

.entry-title a.genericon {
  background-color: #f2f2f2;
  border: 1px solid #eee;
  border-radius: 3px;
  -moz-border-radius: 3px;
  box-sizing: content-box;
  -webkit-border-radius: 3px;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  color: #404040;
  margin: 0 0 5px 5px;
  padding: 5px;
}
.entry-title a.genericon-facebook-alt:hover {
  background-color: #3b5998;
  border-color: #3b5998;
  color: white;
}
Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *