Apparence générale

Par Benjamin DESTREBECQ
Le 17/10/2017
9 commentaires

Sans nous concentrer sur un seul thème, voyons aujourd'hui ce qu'il est possible de modifier sur votre site. Nous allons parler ici entre autres de l'intégration Twitter, de l'apparence images, des styles de ligne, etc.

Ombre sous le widget image

Le meilleur outil pour ajouter une image depuis votre espace de stockage ? Le widget image. Simple d'utilisation, responsive et complet, celui-ci est la plupart du temps bien plus intéressant que d'ajouter une image à la main. Seul bémol, il n'est pas possible d'ajouter une description sous l'image, mais c'est un autre sujet. Si vous utilisez ce widget, l'astuce donnée ici permet d'ajouter une légère ombre autour de vos images, donnant un effet de mise en valeur.

Code à utiliser :

div[data-widget="image"] {
    -moz-box-shadow: 8px 8px 12px #aaa;
    -webkit-box-shadow: 8px 8px 12px #aaa;
    box-shadow: 1px 2px 9px 0px #b5b5b5;
}

Hover sur le widget image

Nous allons tout simplement reprendre le même effet qu'au dessus. Le deux ne seront pas compatibles, mais vous pouvez adapter cette astuce pour avoir un effet de hover avec opacité. Ici, nous allons donc faire en sorte que l'ombre ne s'affiche que lorsque le curseur passe au dessus du widget image.

Code à utiliser :

div[data-widget="image"]:hover {
    -moz-box-shadow: 8px 8px 12px #aaa;
    -webkit-box-shadow: 8px 8px 12px #aaa;
    box-shadow: 1px 2px 9px 0px #b5b5b5;
    transition: all 0.2s;
}

Améliorer l'apparence des commentaires

Il arrive sur certains thèmes que l'apparence classique des commentaires soit ... vide, selon également les réglages apportés dans Configuration > Réglages. Je vous propose ici un code complet pour un design bien précis des commentaires, le tout dans un style qui me plaît. Vous pouvez évidemment modifier / supprimer chaque ligne afin de personnaliser encore plus la zone.

Code à utiliser :

.plugin[data-plugin="comments-"] ul.media-list.media-stacked {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #d8d8d8;
}

.plugin[data-plugin="comments-"] li.media.by-member {
    margin: 0px;
}

.plugin[data-plugin="comments-"] .media-body {
    border-left: 1px solid #e4e4e4;
    padding-left: 15px;
}

.plugin[data-plugin="comments-"] .img-circle {
    border-radius: 50%;
}

Mettre en valeur le bouton de paiement PayPal

Nombreux sont les utilisateurs e-monsite à utiliser le moyen de paiement PayPal. Actuellement, jusqu'à la prochaine mise à jour, le bouton de paiement PayPal peut paraître un peu petit et peu visible. Cela entraîne parfois un oubli de paiement de la part d'un utilisateur. Voici une solution pour le rendre un peu plus visible. La couleur utilisée ici provient directement du thème choisi pour le site.

Code à utiliser :

form#paypal_form {
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
    padding: 10px 20px 10px 20px;
    border-radius: 10px;
    background-color: rgba(237, 28, 36, 1); /* C'est ici pour modifier la couleur ! */
}

form#paypal_form input.btn.btn-primary:hover {
    color: rgba(237, 28, 36, 1); /* Pensez à la modifier également ici */
    background-color: rgba(255, 255, 255, 1); 
}

form#paypal_form p {
    margin-bottom: 0px;
    margin-top: 5px;
}

form#paypal_form input[type="submit"] {
    font-size: 1.2rem;
    border: 1px solid white;
    border-radius: 5px;
}

Centrer automatiquement un tweet

Il n'est pas rare de vouloir intégrer un tweet dans une page de son site. Néanmoins, ceux-ci sont assez capricieux : il est parfois difficile de les centrer correctement. S'il est possible d'utiliser l'outil de colonnes d'e-monsite (une vide à gauche, une avec le tweet au centre et une vide à droite), il est intéressant d'automatiser l'alignement via du CSS. Le principe est très simple et ne demande qu'une seule ligne de CSS.

Code à utiliser :

twitterwidget#twitter-widget-0 {
    margin: auto;
}

.media { position: relative; margin-bottom: 1.42857143rem; padding: 10px; border-radius: 5px !important; border: 1px solid #757575; background: #f7f7f7; } dl.dl-horizontal { margin-bottom: 1.42857143rem; padding: 10px; border-radius: 5px !important; border: 1px solid #757575; background: #f7f7f7; } .list-inline { padding: 10px; border-radius: 5px !important; border: 1px solid #757575; background: #f7f7f7; } .introduction.clearfix p { padding: 10px; border-radius: 5px !important; border: 1px solid #757575; background: #f7f7f7; } .media-stacked > .media > .media-object { margin: auto; margin-bottom: auto; margin-top: auto; } .media-body { border-left: 1px solid #757575; padding-left: 15px; }

blogger smart tweet