Overblog s’est doté d’une toute nouvelle interface, graphiquement très jolie, mais diablement compliquée à modifier / customiser, voire à comprendre. Toutes les fonctionnalités ne sont pas encore intégrées, mais ça se fait petit à petit.
Ayant redesigné et remodelé le blog beauté BEAUTY CRUELTY FREE je me suis rendu vite compte qu’à moins d’avoir des compétences en développement web, et webdesign, ou d’avoir un ami avec ces compétences, la plupart des utilisateurs d’overblog allaient être complètement dépassés par la complexité du site.
Donc je vais essayer de vous faire un article pour vous expliquer certaines fonctionnalités que j’ai dû mettre en place sur le blog d’Ana. Aujourd’hui : la newsletter.
INSÉRER UNE NEWSLETTER
Toutes les modifications se font dans l’onglet « THÈME » de votre espace personnel. Allez sur « MODIFIER », puis appuyez sur « HTML ».
Là vous voyez un charabia, plus communément appelé « code » par les développeurs qui y comprennent, eux, quelque chose. La plus grosse difficulté de ce tutoriel sera : mettre le code que je vais vous donner à la bonne place. Et oui, sans rien y comprendre, ce n’est pas évident.
Si le charabia est sur fond noir, vous ne pourrez pas le modifier. Appuyez sur le rond gris en haut à gauche du texte. Il passe sur fond gris clair, qui indique qu’il est modifiable.
Le code se découpe en plusieurs parties distinctes :
La déclaration de l’en-tête : de <html … > jusqu’à </head>
Le corps de la page : de <body> à </body>
La fermeture du document : </html>
Au sein de la balise <head> il y a les méta, la déclaration de style (CSS), et un peu de javascript.
Le code pour placer la NEWSLETTER est ici :
<div class= »box » id= »newsletter »>
<h3>ABONNEZ-VOUS À LA NEWSLETTER</h3>
{% email_notification %}
</div>
Il est préférable de placer ce code dans la barre latérale (sidebar) : cherchez ce code :
<!– shortcut:[Sidebar content] –>
<div id= »sidebar »>
et placer le code de la newsletter au niveau que vous souhaitez (avant, après les pages / les tags / les archives) comme vous voulez. Il est important de faire attention à ne pas mettre le code entre des balises « <div> » existantes, mais entre une balise fermée </div> et une ouverte <div>. Cela créera un nouveau bloc ayant les propriétés du style « box » avec une id « newsletter » nous permettant de rajouter nos propres styles.
Vous pouvez cliquer sur « APERCU » pour visualiser le résultat, ou « ENREGISTRER » si vous êtes sûr(e) de vous.
Le module de newsletter vient avec un label « Email_subscribe » un peu gênant, un champ de texte, et un bouton « Subscribe ». Il est possible que vous ne voyiez pas le bouton, mais pas de panique, il est juste très bas dans la page. Nous allons customiser tout ça pour le rendre un peu plus sympa.
MODIFIER LE STYLE DU MODULE
C’est là qu’interviennent vos talents de développeurs, vos amis, ou moi. Le style CSS se trouve au début du document, autour de la ligne 67. Vous devriez trouver ceci :
<style type= »text/css »>
qui indique le début de la déclaration de style. Scrollez pour trouver la fin de la déclaration : </style>
Étant donné que le style CSS est pris dans l’ordre, mettre vos déclarations à la fin les passera en prioritaire, mais bon passons. Avoir mis une ID à notre bloc nous permet aussi de rendre nos déclarations prioritaires.
Pour enlever le texte gênant en anglais :
#newsletter .ob-label{
display:none;
}
Pour remonter le bouton « Subscribe » :
#newsletter .ob-form-field{
height:34px;
}
(moi j’ai mis 34px parce que cela me permet d’avoir un champ texte un peu imposant mais vous pouvez jouer avec ce chiffre pour correspondre à votre design.
Vous pouvez laisser le bouton tel quel, mais j’ai préféré lui donner un style plus personnel :
#newsletter .ob-input-submit{
margin:0px; -> IMPORTANT, sinon il est décalé sur la droite.
background-color:#703C7C;
border:0px;
}
Idem pour le champ, qui a tendance à avoir une couleur de texte peu visible :
#newsletter .ob-input-email{
-moz-border-radius:3px;
-ms-border-radius:3px;
-o-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
border-color:#DDB5E4;
color:#703C7C; -> IMPORTANT, c’est la couleur du texte. Vous pouvez mettre #000000 pour du noir
width:220px;
}
Voilà j’espère que ce tutoriel vous aura été utile. N’hésitez pas à le commenter ! À bientôt pour l’affichage du nombre de commentaires à la fin des articles.
Module Newsletter
