Write Freely : ajouter un logo à son blog

Il est assez facile d’ajouter un logo à son blog publié avec Write Freely ou hébergé sur Writa.as. Il suffit pour cela d’utiliser la fonction « custom CSS » intégrée, qui permet d’ajouter des définitions de styles personnalisées. Voici quelques exemples de code pour commencer à jouer avec le design de son site.


1 — Ajouter un logo à côté du nom du blog

#blog-title a {
    background: transparent 
    url('https://snap.as/img/logo-mark-sm.png') 
    no-repeat bottom left;
    padding-left: 42px;
}

Il faut bien sûr adapter l’URL de l’image (ici il s’agit du logo de Snap.as) à celle que l’on souhaite utiliser et ajuster la valeur de padding-left en fonction de la largeur de celle-ci.

Remarque — Avec Write Freely et Writa.as les images doivent être hébergées sur un service externe qui accepte leur inclusion distante. Cela devrait fonctionner avec Pixelfed par exemple.

Exemple d’utilisation sur le blog du service Snap.as.


2 — Remplacer le titre du blog par une image

#blog-title a {
    background-image: url(https://snap.as/img/logo.png);
    background-position: center;
    background-repeat: no-repeat;
    color: rgba(0,0,0,0);
    display: inline-block;
    width: 100px;
    height: 100px;
    background-size: 100px;
    border-radius: 50%;
}
#post #blog-title a, #subpage #blog-title a {
    /* Change size of logo on post and tags pages */
    width: 50px;
    height: 50px;
    background-size: 50px;
}

La première déclaration (#blog-title a) concerne l’affichage du logo sur la page d’accueil : centré, avec une hauteur et une largeur de 100px. La propriété border-radius: 50%; permet d’avoir une image circulaire : c’est parfaitement facultatif comme on s’en doute.

Les deux déclarations groupées suivantes (#post#blog-title, etc.) concernent l’affichage du logo à une taille de50px` dans la barre d’entête de l’ensemble des autres pages.

Exemple d’utilisation sur mon blog personnel.


Remarque — Sur le service Writa.as, la possibilité de personnaliser la feuille de style est réservée aux utilisateurs et utilisatrices payant⋅e⋅s du service (comptes Pro).


Publication : 03/02/2019 — Mise à jour : 05/02/2019 Référence : https://discuss.write.as Tags : #writefreely #writeas #wfcustom #wacustom