Apparence générale

Par Benjamin DESTREBECQ
Le 17/10/2017
7 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

Commentaires

- 1. BenjaminD Le 12/10/2017
Premier commentaire du site !
J'espère que nos astuces vont vous plaire et vous permettre de rendre votre site encore plus joli !
- 2. ojfoippg Le 19/06/2022
hydroxychloroquine canada http://www.hydroxychloroquinex.com/
- 3. wsfrlo Le 13/09/2023
Local coin swap is a KYC-free, peer-to-peer, non-custodial exchange that uses escrow protection
https://localcoinswap.net
- 4. hsfqwt Le 13/09/2023
LocalCoinSwap is another peer-to-peer (P2P) cryptocurrency exchange that allows users to trade bitcoins
https://localcoinswap.net
- 5. nsfduu Le 14/09/2023
Local coin swap is a KYC-free, peer-to-peer, non-custodial exchange that uses escrow protection
https://localcoinswap.net
- 6. hsfrio Le 14/09/2023
Local coin swap is a KYC-free, peer-to-peer, non-custodial exchange that uses escrow protection
https://localcoinswap.net
- 7. psfqrt Le 14/09/2023
Localcoinswap (renomovana platforma P2P) je renomovana burza P2P, kde muzete nakupovat a prodavat bitcoiny
https://localcoinswap.net

Ajouter un commentaire