CSS additionnel

:dev: Le CSS

Le CSS est un langage informatique qui permet de mettre en forme les pages web. Sur WordPress il est possible de rajouter du « CSS additionnel » pour modifier votre thème.

Cela permet de facilement personnaliser votre site sans retoucher directement le code source.

Je vais donc vous présenter quelques lignes que j’ai ajouter pour personnaliser mon site.

Plume


Arrondir le bords des images

img { 
 -webkit-border-radius: 5px; 
 -moz-border-radius: 5px; 
 border-radius: 5px; 
}

Comme vous pouvez le constater, cette image a ses bords légèrement arrondis de « 5px ».


Couleur de sélection

::selection {
  background: #00868B;
  color: #ffffff;
 }

Si vous sélectionnez le texte de mes pages, il sera surligné en turquoise, comme la couleur des cheveux de Plume.


Mise en page des textes bien carrée

p {
 text-align: justify;
}

C’est vraiment bête et purement esthétique, je vais copier coller ce texte plusieurs fois pour vous donner une idée de la mise en page d’une texte qui revient à la ligne plusieurs fois. C’est vraiment bête et purement esthétique, je vais copier coller ce texte plusieurs fois pour vous donner une idée de la mise en page d’une texte qui revient à la ligne plusieurs fois. C’est vraiment bête et purement esthétique, je vais copier coller ce texte plusieurs fois pour vous donner une idée de la mise en page d’une texte qui revient à la ligne plusieurs fois. <- voilà, je pense que vous avez compris l’idée.

C’est parce que j’aime bien quand c’est carré, ça me semble plus ordonné !

Caducée


Retirer l’ombrage du header

.custom-header-media:before {
 background: linear-gradient(to bottom,
 rgba(0, 0, 0, 0) 0%,
 rgba(0, 0, 0, 0) 75%,
 rgba(0, 0, 0, 0) 100%);
}

Bon, là je ne le retire pas vraiment, je réduis toutes les valeurs à 0 pour ne plus le voir. Je ne sais pas pourquoi, la majorité des thèmes WordPress utilisent cet effet.


Retirer l’ombrage des images de galeries

.wp-block-gallery .blocks-gallery-item figcaption {
background:linear-gradient(0deg,rgba(0,0,0,0),rgba(0,0,0,0) 0%,transparent)
}

Encore de l’ombrage dont je ne suis pas fan…

Même moi qui aime les trucs « Dark », je trouve qu’il en font trop…

Lia


Enfin voilà, il est possible de faire pas mal de modifications.

Je rajouterai d’autres lignes de temps en temps si j’en ajoute dans mon « CSS Additionnel » et qu’elles me semblent pertinentes.

Plume

WordPress

:star: Présentation :

Tout d’abord, WordPress c’est quoi ?

Il s’agit un système de gestion de contenu Open-Source (donc gratuit) qui une fois installé sur votre hébergement vous permet facilement de gérer votre mise en page, vos pages et vos articles depuis un « tableau de bord ».

Vous l’avez probablement deviné, j’ai utilisé cette méthode pour mettre en place ce site !

Plume


:tools: Instalation :

Avant tout chose, vous devez procéder un nom de domaine et un hébergement (qui coûte un peu moins de 30€ par an) puis vous rendre sur le site de WordPress pour le télécharger et l’installer.

Petit astuce, il existe des hébergeurs qui proposent de l’installer directement pour vous.

Caducée

Une fois en place, il vous suffit de choisir un thème qui va vous servir de base comme mise en page de votre site. Il existe des thèmes payants mais il y a suffisamment de choix gratuits pour trouver votre bonheur. Pour ma part, je suis parti d’un thème installé par défaut. le « Twenty Seventeen » de WordPress.


:pencil: Personnalisation :

Une fois que vous vous êtes fixé sur un thème, c’est à vous de repérer où sont les menus, logos, bandeaux, zone de pub et autres endroits personnalisables pour vous renseigner sur leurs tailles afin d’y préparer des illustrations pour mettre en avant votre univers !

Par exemple, ma page d’accueil prend tout l’écran. Les écrans sont généralement en 1920×1080 c’est donc la résolution de mon image.

Plume


:set: Extensions :

En fonction de vos besoins, vous pouvez facilement rajouter des extensions pour personnaliser au mieux votre site par rapport à vos attentes. Voici quelques exemples d’extensions que j’ai ajouté :

wp-Monalisa

wp-Monalisa

wp-monalisa is the plugin that smiles at you like monalisa does. place the smilies of your choice in posts, pages or comments.

Hans Matzen

Cet extension me permet de personnaliser les smileys du site. Je peux non seulement modifier les smileys par défaut mais aussi en rajouter en définissant leurs formes d’écritures.

Draw Attention

Draw Attention

Create interactive images in WordPress. Perfect for floor plans and real estate photos, trade show…

N Squared

Et cet extension me permet de rendre le plan de la maison interactif sur ma page d’accueil. J’ai pu définir les zones et les liens des pages correspondantes.

Faites bien attention aux extensions que vous ajouterez, certaines peuvent entrer en conflit les unes avec les autres.

Caducée


:doc: Contenus :

Une fois toutes ses étapes sont bien configurées et terminées il ne vous reste plus qu’à créer vos pages et articles.

Honnêtement, à ce stade le plus difficile est passé, mais ce n’est qu’à partir de ce moment que l’aventure commence !

Un jour je ferai peut être un article plus détaillé sur certaines étapes, j’espère que ça vous à donné un bon aperçu du fonctionnement de WordPress.

Plume