07 novembre 2010
Convertir des images en série avec Xnview
Quoi de plus long et plus chiant que de devoir convertir des images une par une !?
Avec Xnview…ce n’est plus une corvée, mais un plaisir…
Vous pouvez télécharger le logiciel gratuitement Ici.
Ouvrez Xnview et sélectionnez sur la gauche dans l’explorateur, le dossier qui contient vos images.
Ensuite sélectionnez toutes vos images en gardant la touche Ctrl enfoncée
ou si vos images sont sur la même ligne, cliquez sur la première image ensuite sur la flèche majuscule au dessus de Ctrl et cliquez sur la dernière image , toute vos images seront sélectionnées.
Maintenant vous cliquez droit sur une des images et vous choisissez Convertir
Un fenêtre va s’ouvrir avec vos images dans source, vous devez choisir le répertoire dans lequel vous voulez que les images soit enregistrées et aussi le Format de conversion pour vos images.
Décochez Effacer l’original si vous voulez garder vos images de départ, sinon elles seront écrasées par les nouvelles.
Faites Lancer
Dans cet exemple, les images sont au format Jpg et nous allons les convertir en Gif.
Une nouvelle fenêtre apparait, sélectionnez dans couleur 256 et cliquez sur Confirmer.
Voila c’est fait !
Toute vos images sont au format Gif dans le répertoire que vous avez choisi.
Unfreez comment ça marche ?
Lien direct pour le téléchargement d’Unfreez.
Vous l’aurez surement remarqué, mais ce petit logiciel fait toujours sont apparition au moment d’assembler les images pour réaliser une image animé (gif).
Attention, il ne traite que les images de type : gif !
donc si ça ne marche pas, c’est que vous avez surement oublier de convertir vos images.
Lorsque vous Ouvrez Unfreez, vous obtenez ça :
Ouvrez maintenant le dossier ou se trouve vos images gif et faites un glisser/déposer dans la fenêtre frames (cliquer sur l’image sans relâcher et faire glisser dans la fenêtre frames )
Il ne reste plus qu’a cliquer sur Make Animated GIF
Pour supprimer une image dans la série en cas d’erreur, sélectionnez l’image et cliquez sur Remove Frame
pour tout supprimer, cliquez sur Clear All
Pour changer la vitesse du gif, changez la valeur de Frame Delay
La valeur 0 est la plus rapide, pour ralentir la vitesse testez avec 20 50 ou 100 cela va dépendre du genre d’animation que vous ferez.
Avec le Frame Delay à 50 voila ce que ça donne :
à 0 c’est plus rapide…trop fort le Jamiroquai !
Finalement je crois que c’est 20 qui est le mieux…
Changer l’icône par défaut de Gravatar dans les commentaires avec WordPress
Vous connaissez forcément ce logo…
C’est celui du site Gravatar, qui permet d’ajouter un avatar dans les commentaires des blogs que vous visitez…
Il suffit de vous inscrire sur le site Gravatar.com puis d’importer un avatar et grâce à votre adresse mail, chaque fois que vous laisserez un commentaire sur un blog qui utilise Gravatar, votre photo ou votre avatar s’affichera dans les commentaires de celui-ci.
Ce qui donne ça :
Depuis peu, sur mon blog même si vous n’êtes pas inscrit sur Gravatar, à la place de l’icône bleue par défaut…vous avez un petit monstre qui vous est attribué !
C’est plus sympa…non ?
ça donne ça :
Pour activer cette option, allez dans votre espace d’administration WordPress puis dans Réglages et Discussion.
Vous avez plusieurs possibilités…Wavatar ou Monster, à vous de choisir…il ne vous reste plus qu’à cochez la case de votre choix et d’enregistrer les modifications.
Voilà c’est tout
Mettre un formulaire email avec WordPress
Vous allez me dire qu’il existe des Plugins pour ça, notamment Cforms…tout à fait, c’est d’ailleurs celui que j’utilise…
Je pense à ceux qui débute sur WordPress, certains Plugins sont pas toujours très simple à comprendre, sans parler du fait qu’ils sont en anglais et que même avec un outils de traduction, il faut pas mal d’imagination et de persévérance pour déchiffrer et tout comprendre…
Avec ce petit script pas de réglage particulier, vous pouvez le mettre dans un bloc texte pour qu’il apparaisse dans une de vos colonnes ou bien dans une page spéciale “Contacter l’auteur” ou encore dans un message.
Vous avez juste à mettre votre adresse email dans la première ligne, puis de coller le script dans un message en mode html ou encore dans une page ou même dans un widget, dans ce cas vous devrez modifier la grandeur des cases, en changeant les valeurs cols=”30″ rows=”7″ et size=”40″.
<form action="mailto:demolite@fournisseur.fr">
<blockquote>
<label for="email_expediteur">Votre adresse e-mail :</label>
<p>
<input name="email_expediteur" type="text" class="minuscule" id="email_expediteur" size="40" />
<p>
<label for="titre">Titre de message :</label>
<p>
<input type="text" size="40" name="titre" id="titre"/>
<p>
<label for="message">Votre Message:</label>
<p>
<textarea name="message" id="message" cols="30" rows="7"></textarea>
<p><input type="submit" name="envoyer" value="Envoyer" />
</blockquote>
</form>
Le script réagit différemment en fonction du navigateur et de la messagerie que vous utilisez…
Dans la plupart des cas, la messagerie s’ouvre et il n’y a plus qu’à envoyer le message…
Ajouter une colonne a son thème avec WordPress
Dernièrement en regardant mon blog, je me suis dis qu’une colonne de plus à droite à côté de l’autre ne serait pas du luxe…
Inutile de vous dire que ça s’est pas fait en 5 minutes, j’ai bien ramé…je me suis aidée de 3 tuto qui parlaient du sujet, mais rien à faire ça ne marchait pas…
Pour y arriver il a fallut que je lise et relise tous ces tuto et surtout que j’en comprenne les bases, pour pouvoir adapter tout ça à mon thème, car en fonction des thème pas mal de chose peuvent changer…
J’ai bien cru que j’allais abandonner…mais c’est un mot qui me donne des boutons et qui m’empêche de dormir alors pas question lâcher l’affaire…
Dans ce tuto je vais essayer de vous donner le plus de détails possible afin de vous faciliter la tâche, voici l’adresse des 3 sites qui m’ont bien aidé, j’ai vraiment pioché dans les 3, car des fois certains tuto s’adressent à des utilisateurs affirmés…ce qui semble évident ne l’est pas toujours…
Webdemark.fr
Je précise tout de même que le tuto qui va suivre, s’applique sur un blog qui a 2 colonnes, c’est à dire une page centrale (#Content) et une colonne latérale (sidebar, leftbar, rightbar etc…) en fonction des thèmes vos colonnes peuvent se nommer différemment…
Le principal, c’est qu’elles portent le même nom dans votre feuille de style et dans les autres fichiers que nous allons modifier.
Si votre blog a 3 colonnes, une centrale et 2 colonnes de chaque côté et que vous voulez faire passer la colonne de gauche à droite, pour que les 2 colonnes soient côte à côte comme sur ce blog, il y a juste un terme à changer dans la feuille de style…
Avant :
Après :
Ouvrez votre feuille de style, descendez sur la ligne qui gère votre colonne de gauche, elle peut se nommer l_sidebar ou sidebarleft ou encore leftbar, elle sera facile à reconnaitre…il y a jours le mot bar !
Changez le float: left; en float: right; et votre colonne ira se placer à droite…tout simplement.
Voilà…passons maintenant aux choses sérieuses !
Avant toute chose, faites une copie des fichiers que nous allons modifier…
Commençons par ajouter quelques blocs dans la feuille de style :
www/wp-content/themes/nom de votre theme/style.css
Il n’est pas nécessaire d’ajouter tous ces blocs, car certains sont déjà dans votre feuille de style, par contre ce sont des blocs que nous allons modifier en changeant la valeur des width…(pour éviter de s’embrouiller, ajoutez-les quand même vous pourrez toujours les supprimer pas la suite si ça fait doublon…)
#main {
width: 1200px;
}
#content {
width:725px;
float: left;
}
.sidebar {
width: 400px;
float: right;
}
.sidebar-1 {
width:200px;
float:right;
}
.sidebar-2 {
width:200px;
}
Le bloc #main, peut se nommer #Page ou #Container, il est déjà dans votre fds, il gère la taille la page de votre blog, qui contient vos colonnes centrale et latérale.
Le bloc #content c’est votre page des messages, la page centrale, ce bloc est déjà dans votre fds.
Les 3 blocs suivants (sidebar) gèrent vos colonnes latérales, un seul se trouve déjà dans votre fds, puisque vous avez une colonne latérale.
Collez les 5 blocs ci-dessus dans le haut de votre feuille de style, puis vérifier que ces nouveaux blocs portent bien le même nom que vos blocs déjà en place dans votre feuille de style, vous allez devoir modifier la taille des blocs, puisque vous allez ajouter un colonne…dans cet exemple j’ai du ajouter 200px (la taille de ma nouvelle colonne).
Si le bloc #main se nomme #container chez vous, changez le #main en #container dans le bloc que vous venez d’ajouter, même chose pour les colonnes…
Dans ma feuille de style avant les modifications, ma colonne de droite se nommait #sidebar, vu qu’il n’y en avait qu’une, désormais sidebar va devenir siderbar1 et ma nouvelle colonne sera sidebar2.
#sidebar {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
Maintenant que je veux en ajouter une deuxième, il faut bien les différencier…
La ligne de ma colonne actuelle va donc se transformer en :
#sidebar1 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
Je vais devoir ajouter une seconde ligne pour ma nouvelle colonne qui se nommera #sidebar2 :
#sidebar2 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
Pour déterminer la taille de votre #Page, et celle de #Content, vous devez additionner mes colonnes de façon à ce que tout ce petit monde rentre dans la Page de mon blog…(c’est comme un puzzle)
200px de colonne1+ 200px de colonne2 + 725px de #content = 1125px de #page…
Ma page fait 1200px, elle peut faire plus…mais pas moins ! (logique si vous faites du 38 vous rentrez dans un pantalon taille 40, mais pas dans un taille 36 !)
Bon, voilà pour la feuille de style, on y reviendra plus tard pour faire des ajustements…
Nous allons maintenant modifier le fichier Sidebar.php celui là contient les colonnes et leur contenu.
Voilà à quoi il ressemblait avant de le modifier :
<div id=”sidebar”>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– Si un Widget n’est pas activé, des codes s’affichent ici –>
<?php endif; ?>
</ul>
</div>
Après modifications ça donne ça :
<div id=”sidebar”>
<div id=”sidebar1″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<div id=”sidebar2″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar2′) ) : ?>
<?php endif; ?>
</ul>
</div>
</div>
Alors c’est la que ça se complique…
La balise <div id=”sidebar”>…<div> contient les balises suivantes :
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<!– Si un Widget n’est pas activé, des codes s’affichent ici –>
<!– Scrpits ici –>
<?php endif; ?>
</ul>
Ces lignes permettent d’appeler les widgets dans une colonne, c’est une Zone Widgetisable…il est également possible d’ajouter des scripts directement entre ces balises sans passer pas l’administration WordPress.
Ajouter une colonne c’est facile…mais une fois fait, il faut rendre cette colonne Widgetisable, c’est à dire que dans votre espace d’administration WordPress dans l’onglet Apparence/Widgets il faut faire apparaitre cette nouvelle colonne de façon à pouvoir y ajouter des widgets…
Si vous observez bien le code ci-dessous (sidebar.php) vous remarquerez qu’une nouvelle colonne a été ajoutée (sidebar2) c’est exactement le même code que pour la première colonne (sidebar1) sauf que dans la ligne de code qui appelle les widgets, il faut différencier le nom de la colonne et mettre dans les () le nom de notre nouvelle colonne.(‘sidebar2‘) en rouge :
<div id=”sidebar”>
<div id=”sidebar1″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar() ) : ?>
<?php endif; ?>
</ul>
</div>
<div id=”sidebar2″>
<ul>
<?php if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘sidebar2‘) ) : ?>
<?php endif; ?>
</ul>
</div>
</div>
Maintenant que votre nouvelle colonne est prête à recevoir les widgets, il faut modifier le fichier functions.php (de votre thème) :
www/wp-content/themes/nom de votre theme/functions.php
Pour que votre nouvelle colonne apparaisse dans le menu défilant des Widgets de l’espace d’administration WordPress.
Ouvrez le fichier functions.php
Avant modifications j’avais ceci :
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
Après modifications :
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
Comme vous pouvez le voir si vous observez bien ce qui a changé entre ces deux fichiers, j’ai ajouté un nouveau bloc de codes pour ma nouvelle colonne :
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
Mais il a fallu aussi donner un nom à ma première colonne pour la différencier de la nouvelle :
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
Donc pour résumer tout ça, les codes d’ouvertures qui contiennent mes 2 colonnes ne changent pas (en rouge) ma colonne 1 est en bleu, ma nouvelle colonne est en gris…et on ajoute un nom aux deux colonnes (en blanc)…
Ok ? vous êtes toujours là ?
<?php
if ( function_exists(‘register_sidebar’) )
register_sidebar(array(‘name’=>’sidebar1′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
register_sidebar(array(‘name’=>’sidebar2′,
‘before_widget’ => ‘<li id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</li>’,
‘before_title’ => ‘<h2 class=”sidebartitle”>’,
‘after_title’ => ‘</h2>’,
));
?>
On ferme de fichier functions.php en enregistrant les modifs…
Si tout va bien, vous devez avoir une nouvelle colonne sidebar2 et aussi votre ancienne colonne qui se nomme maintenant sidebar1, qui s’affiche dans les widgets :
Revenons à notre feuille de style, car si maintenant vous avez une nouvelle colonne avec des widgets dedans, ils n’ont aucune mise en forme, et s’affichent tout bizarre…normal il faut les mettre en forme en ajoutant un bloc sidebar2 dans notre feuille de style.
Votre première colonne (la siderbar1) s’appelle toujours #sidebar dans votre feuille de style…
#sidebar {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar h2, #sidebar .sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color: #00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px 0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing: 0px;}
etc…
Maintenant qu’elle se nomme sidebar1 il faut donc lui ajouter un 1, sinon ça peux pas marcher…
Comme ceci :
#sidebar1 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar1 h2, #sidebar1
.sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color:
#00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px
0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing:
0px;}
etc…
Pareil pour notre deuxième colonne sidebar2, il faut ajouter le même bloc que pour notre première colonne et ajouter un 2, comme ceci :
#sidebar2 {float: right;padding: 0px 10px 20px 0px;width: 200px;color: #00FFFF;overflow: hidden;}
#sidebar2 h2, #sidebar2
.sidebartitle{font:12pt “Century gothic”,Lucida Sans, arial;color:
#00FFFF;background: #000000 url(images/Categories.png) ;margin: 20px 0px
0px 0px;padding:5px 0px 3px 10px;margin-bottom:15px;letter-spacing:
0px;}
Bon, voilà…je suis pas certaine d’avoir réaliser ce tuto dans le bon ordre, mais normalement avec mes indications plus celles des autres blogs cités en début de tuto, vous devriez vous en sortir…
Patience, courage, détermination…enfin, surtout patience ;)
Mettre une bannière Flash sur WordPress
Ne me dites pas que vous n’avez pas remarqué ma nouvelle bannière ;)
Sympa non !?…je m’auto congratule…car j’y ai passé du temps tout de même…
Nous allons voir aujourd’hui comment insérer cette bannière Flash à la place de l’ancienne.
Nous allons modifier 2 fichiers : header.php et style.css qui se trouvent dans le dossier de votre thème.
www/wp-content/themes/nom du theme/header.php
www/wp-content/themes/nom du theme/style.css
Avant de commencer je vous invite avec insistance a faire une copie de ces deux fichiers…
Ouvrez header.php et descendez sur ces lignes de codes :
<body>
<div id=”main”>
<div id=”header”>
<div id=”logo”>
<h1><a href=”<?php echo get_settings(‘home’); ?>/”><?php bloginfo(‘name’); ?></a></h1>
<div class=”description”><?php bloginfo(‘description’); ?></div>
</div>
Vous devez remplacer les lignes bleues par les codes de votre bannière Flash.
Comme ceci :
<body>
<div id=”main”>
<div id=”header”>
<div id=”logo”>
<object type=”application/x-shockwave-flash” data=”http://Adresse bannière.swf” width=”978″ height=”358″>
<param name=”play” value=”true” />
<param name=”movie” value=”http://Adresse bannière.swf” />
<param name=”menu” value=”false” />
<param name=”quality” value=”high” />
<param name=”scalemode” value=”noborder” />
</object>
</div>
En prenant soin de coller l’adresse de votre bannière Flash comme indiqué en blanc et en changeant les valeurs width=”978″ height=”358″ pour les adapter à la taille de votre bannière.
Fermez le fichier et enregistrez les modifications.
Maintenant, il faut ouvrir le fichier style.css pour supprimer l’ancienne bannière qui se trouve sur la ligne suivante :
/* Header */
#header {background: #000000 url(images/header.jpg) no-repeat;height: 314px;position: relative;}
#logo {position: relative;padding: 100px 0px 0px 20px;height: 60px;}
#logo .description{position: absolute;left: 25px;bottom:3px;color: #FFFFFF;font-size: 14px;}
En fonction des thèmes, la modification des lignes peut être différente, dans cet exemple j’ai supprimé les lignes #logo pour obtenir un affichage correct et n’ai gardé que cette ligne :
/* Header */
#header {position: relative;}
A tester en fonction des thèmes…d’où l’importance de faire une copie des fichiers :|
Fermez le fichier et enregistrez les modifications.
Si comme moi vous aviez des liens sur votre ancienne bannière : Accueil, Contacter l’auteur etc… la bannière flash se place par dessus…
Soit vous insérez un lien dans votre animation Flash pour la rendre cliquable, soit vous placez ces liens ailleurs sur votre blog, comme un “Contacter l’auteur” ou "Retour à l'Accueil" que vous ajoutez dans une colonne…
Voilou…à vous de jouer !
Installer le plugin Custom Smilies et changer les smilies avec WordPress
Commencez par vous rendre ici pour télécharger l’extension Custom Smilies…
Installez-la comme les autres extensions, en décompressant le fichier et en le plaçant dans le dossier Plugins de votre client FTP.
Activez-la ensuite dans votre administration WordPress dans l’onglet Extensions.
Pour changer ou ajouter des smilies personnalisés, commencez d’abord par réunir tous vos smilies dans le même dossier en les renommant comme ceci :
Vous remarquerez dans la liste des smilies ci-dessous qu’ils se nomment tous : icon_nom.gif
Vous devez nommer vos smilies de la même façon en changeant juste le nom.
Ouvrez votre client FTP, puis ouvrez le fichier functions.php
www/wp-includes/functions.php
Faites défiler pour descendre jusqu’à la liste des smilies.
Si vous avez 10 smilies à ajouter, copiez/collez les 10 derniers smilies à la suite des autres, puis changez le nom de chaque smilies en prenant soin qu’il corresponde bien aux smilies que vous allez ajouter.
Vous devez également changer le code qui permet d’afficher le smilies :
‘:bip:’ => ‘icon_grosmot.gif’,
Lorsque vous ajoutez une ligne (un smilies) vous devez lui attribuer un code dans cet exemple c’est :bip:
Vous devez faire attention de ne pas mettre un code déjà utilisé dans la liste…
Ensuite lorsque vous écrirez un article, vous pourrez également faire apparaitre un smilies en tapant le code comme ceci :bip: :sou:
Une fois votre liste en place, sélectionnez les lignes que vous venez d’ajouter et faites copier.
Fermez le fichier functions.php en enregistrant les modifications.
Ouvrez maintenant custom-smilies.php
www/wp-content/plugins/custom-smilies-se/custon-smilies.php
Descendez sur la liste et faites coller pour ajouter la liste des smilies également dans ce fichier, comme dans l’autre.
Fermez le fichier et enregistrez les modifications.
Maintenant faites passer vos smilies dans le dossier smilies.
www/wp-includes/images/smilies
Voilà…
Vous pouvez changer toute la liste si vous voulez ou la réduire…du moment que vous faites les mêmes modifications dans les deux fichiers php et que vous mettez dans le dossier smilies les images correspondantes.
Faire une sauvegarde de vos fichiers WordPress via votre client ftp
Hier, je me suis lancée tête baissée dans la modification de mes smileys, j’ai bidouillé sans filet et ce matin au réveil, plus moyen de me connecter sur mon espace d’administration WordPress !
A la place de ça :
J’avais une belle page web blanche qui me disait :
Fatal error: Call to undefined function: wp_user_settings() in /home.49/d/e/m/demolite/www/wp-admin/admin-header.php on line 14
Wahou…super !
J’étais pas dans la m**** !
Alors il a fallu que je rassemble mes esprits, (au réveil c’est pas très évident) et que je me souvienne exactement des fichiers que j’avais modifié la veille…
Finalement sur les conseils de ma “coupine le Lutin", j’ai téléchargé la dernière version de Worpdpress 2.7 (installée chez moi), pour récupérer les fichiers d’origines et remplacer les miens défectueux !
Alors pour vous éviter bien des désagréments…une perte de temps inutile et aussi de monter à 20 de tension…ce qui doit être mon cas des ces grands moments de solitude…faites ce qui suit :
Ouvrez votre client FTP, sélectionnez dans la partie de gauche le dossier de destination pour enregistrer la sauvegarde, puis cliquez sur le dossier www dans la partie de droite et faites un clic droit dessus pour choisir Télécharger.
L’intégralité du dossier www sera copier dans le dossier de destination (vous pouvez suivre l’avancement de la copie en cliquant sur l’onglet file d’attente en bas de page).
En cas de coup dur…vous n’aurez plus qu’à remplacer les fichiers défectueux par ceux sauvegardés.
Changer sa bannière sur WordPress
En arrivant sur WordPress il a fallu que je choisisse un thème, ça n’a pas été une mince affaire…
Déjà, je voulais absolument un fond noir, pour pouvoir importer mes tuto réalisés sur Canalblog, je voulais également une mise en page très simple et épurée, pour mettre en valeur les messages afin qu’ils soient le plus lisible possible.
Je n’avais encore aucune idée du style graphique que je voulais donner à ce blog, j’avais beau chercher et rechercher, aucun thème ne semblait me convenir.
Je suis finalement tombée sur ces fleurs grises dans un thème, mais c’était un peu tristounet…alors j’ai ajouter des touches de turquoise et hop ma bannière et le design de mon blog était tout trouvé ;)
Voici mon thème tel qu’il était au départ, j’ai donc changé la bannière et toutes les images du thème pour le mettre à ma sauce :
Pour récupérer une bannière dans un thème : vous devez télécharger le thème, ouvrir le dossier du thème, les images se trouvent dans le dossier : Images.
Une fois que vous avez choisi votre thème, pour remplacer la bannière en place par une nouvelle de votre choix, vous devez aller dans le dossier images de votre thème, ouvrir la bannière dans un logiciel de retouche d’image, comme Photofiltre par exemple, il ne vous reste plus qu’à modifier la bannière ou en créer une autre aux mêmes dimensions et de l’enregistrer sous le même format et le même nom.
Votre nouvelle bannière doit se nommer comme l’ancienne header.jpg dans cet exemple (La ligne de code qui permet d’afficher votre bannière sur votre blog se trouve dans la feuille de style, si vous changez le nom de votre bannière, vous devez modifier cette ligne également).
Une fois que votre nouvelle bannière est prête, ouvrez votre client FTP et remplacez votre ancienne bannière dans le dossier images de votre thème.
www / wp-content / thème / nom du thème / images.
Voilà, votre nouvelle bannière est en place.
En fonction des thèmes, il est possible de changer les dimensions de la bannière, mais pas sur tous, à vous de faire des tests, pensez à faire une sauvegarde des pages que vous modifiez, en cas de problème vous pourrez réparer vos bêtises.
Insérer une image sous votre horloge avec WordPress
Vous avez peut être remarqué qu’une fleur s’est glissée sous mon horloge…
Pour insérer une image sous votre horloge, pour lui donner un petit côté perso, faites comme ceci :
Ouvrez votre client FTP et mettez l’image qui ira sous votre horloge dans le dossier images de votre thème :
Ouvrez ensuite votre feuille de style et collez le bloc suivant tout en bas :
.horloge {
background: url(images/horloge.jpg) no-repeat;
width: 150px;
height: 150px;
padding: 0px 0px 0px 20px;
margin: 0 auto;
}
la ligne background: url(images/horloge.jpg) no-repeat; est celle qui contient votre image, si vous avez nommé votre image horloge.jpg vous devez mettre le même nom dans cette ligne de code, sinon votre image ne s’affichera pas.
A vous de jouer avec le width: 150px; et le height: 150px; en fonction de la taille de votre image.
Maintenant allez dans Apparences / Widgets puis ouvrez le bloc texte qui contient votre horloge :
Ajoutez la balise <p class=”horloge”> </p> comme sur la capture ci-dessus, et validez.
Voilà, votre image est en place !
Pour faire quelques réglages et placer votre image comme vous le voulez, je vous conseille de vous servir de la barre d’outils Web Developer, si vous utilisez Firefox, vous gagnerez un temps fou.
« Accueil 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
