Aller au contenu
titcrea

IPS 4.X : styliser les boutons sociaux de partage

Messages recommandés

Pour modifier l'apparence des boutons sociaux de partage sur votre forum Invision community, ajouter ce code dans votre custom.css : 

.cShareLink {
    width: 70px;
    height: 35px;
    line-height: 35px;
    border-radius: 1px !important;
}

Modifier : 

  • "width" et "height" pour changer la taille du bouton (rectangle ou carré)
  • Garder "line-height" avec la même taille que "height" pour garder l'alignement de l'icone social au milieu
  • Modifier "border-radius" pour arrondir ou non les coins des boutons

Résultat avec le code fourni :

social-share-button.JPG

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par titcrea
      Pour coloriser les tags présent dans vos post de forum, ajouter ce code ci-dessous à votre custom.css :
      .ipsTags a[href*="/tags/microsoft/"], a.ipsTag_prefix[href*="/tags/microsoft/"] { background: SeaGreen !important; } html[dir="ltr"] .ipsTags a[href*="/tags/microsoft/"]:before, html[dir="ltr"] a.ipsTag_prefix[href*="/tags/microsoft/"]:before { border-color: Seagreen !important; } Changer les 4 "microsoft" par le tag à coloriser et les 2 "SeaGreen" par le nom de votre couleur ou le code héxa (#xxxxxx)

    • Par titcrea
      Pour modifier l'apparence des sous-forums sur votre forum Invision community, ajouter ce code dans votre custom.css : 
      .ipsDataItem_subList{ overflow: hidden; } html[dir="ltr"] .ipsApp .ipsDataItem_subList, html[dir="rtl"] .ipsApp .ipsDataItem_subList{ background: none; line-height: 220%; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 4px; } .ipsDataItem_subList li{ float: left; width: calc(100% / 3 - 5px); } html[dir="rtl"].ipsDataItem_subList li{ float: right; } .ipsDataItem_subList li a:after{ display: none; } html[dir="rtl"] .ipsDataItem_subList.ipsList_inline > li{ margin-left: 0; } Changer la ligne suivante pour le nombre de colonnes : 
      width: calc(100% / 3 - 5px); = 3 colonnes width: calc(100% / 2 - 5px); = 2 colonnes width: calc(100% / 1 - 5px); = 1 colonnes
×

Information importante

Vous acceptez les Conditions d’utilisation