01 décembre 2010
Arrondir les angles de #Content et des colonnes
Non compatible avec Explorer.
Voici comment Arrondir les angles de votre page centrale, autrement dit de Content.
Rendez-vous dans la feuille de style générale et collez le code suivant juste en dessous de content comme sur la capture.
.fullsample {
width: 450px;
border-radius: 10px 10px;
-moz-border-radius: 10px;
background-color: #CCCCCC;
padding: 5px;
}
Si votre Content fait 500px vous devez laisser Width: 450px
Si, il est plus grand, augmentez la valeur de Width.
Pour changer la couleur du fond modifiez : background-color: #CCCCCC;
Maintenant vous pouvez valider et ouvrir la page d'accueil
Repérez les balises suivantes : <div id="content"><div class="blogbody"> et collez la balise ci-dessous comme sur la capture.
<div class="fullsample">
</div>
<div class="fullsample"> doit être en tout début de content et le </div> tout à la fin.
Pour que toutes vos pages soient identiques, vous devez répéter l'opération sur les autres pages.
Si vous voulez arrondir vos colonnes, vous devez créer un deuxième bloc, et ajouter un 2 pour le différencier du premier.
Vous le placez sous #rightbar comment sur la capture.
.fullsample2 {
width: 450px;
border-radius: 10px 10px;
-moz-border-radius: 10px;
background-color: #CCCCCC;
padding: 5px;
}
Vous ajoutez <div class="fullsample2"> dans la page d'accueil en tout début de rightbar et le </div> tout à la fin, comme pour Content.
Même chose pour la colonne de gauche leftbar sauf que vous n'avez pas besoin de recréer un bloc dans la feuille de style, comme les colonnes sont de la même dimensions, il y a juste à placer la balise, dans la page d'accueil comme pour rightbar.
<div class="fullsample2"> et </div>
Voilà, j'espère que c'est assez clair...sinon n'hésitez pas à demander de l'aide.
Arrondir les angles de #Content
Compatible avec Firefox et Internet explorer, par contre vous ne pouvez pas cumuler les smileys dans les commentaires et les angles arrondis...ça bloque sur la page d'un message.
Ouvrez votre feuille de style et coller le code ci-dessous en bas de page :
.relsample { width: 490px; position: relative; background-color: #FFFFFF; }
.relsample .top_left, .relsample .top_right, .relsample .bottom_left, .relsample .bottom_right { height: 19px; width: 19px; background-repeat: no-repeat; position: absolute; background-color: #0e1a4d; }
.relsample .top_left { top: 0px; left: 0px; background-image: url("Adresse angle haut gauche"); z-index: 0; }
.relsample .top_right { top: 0px; right: 0px; background-image: url("Adresse angle haut droit"); z-index: 1; }
.relsample .bottom_left { bottom: 0px; left: 0px; background-image: url("Adresse angle bas gauche"); z-index: 2; }
.relsample .bottom_right { bottom: 0px; right: 0px; background-image: url("Adresse angle bas droit"); z-index: 3; }
.relsample .content { position: relative; padding: 12px; z-index: 4;
}
La première ligne de ce code correspond à la largeur du Nouveau content et sa couleur #FFFFFF.
Dans cet exemple, le content d'origine (page centrale) fait 500px de large et son code couleur est #0e1a4d (ligne en dessous) pour que les angles apparaissent correctement le nouveau content doit faire 490px.
Les lignes suivantes correspondent aux angles...chaque angle est représenté par une image.
Vous devez coller l'adresse de vos images sur la ligne de code qui correspond au bon angle.
Faites un clic droit sur les 4 angles puis enregistrer l'image sous :
Maintenant que vous avez vos 4 angles, il faut leur donner la couleur que vous désirez.
Ouvrez vos images dans Photofiltre et changez leur couleur pour les mettre à votre goût.
Importez ensuite vos images dans un Nouveau message et récupérez l'adresse de vos angles.
Ouvrez votre page d'accueil et descendez sur la ligne de code qui annonce le début de Content :
</div></div><div id="content"><div class="blogbody">
Vous devez coller le code suivant à la ligne, juste en dessous.
<div class="relsample">
<div class="top_left"></div>
<div class="top_right"></div>
<div class="content">
Descendez ensuite et repérez la ligne de code qui annonce la fin de Content :
<$CBControlNavLinks$></div></div><div id="rightbar"><div class="navlinks">
Puis collez juste au dessus le code suivant :
</div>
<div class="bottom_left"></div>
<div class="bottom_right"></div>
</div>
Le contenu de Content se trouve entre ces 2 codes et va permettre de rendre ses angles arrondis !
Voilà...c'est pas facile à expliquer, j'espère que c'est assez clair...
Mettre une icône devant l'adresse de votre blog
Le petit triangle vert de Canalblog est sympa...mais avoir sa propre icône c'est quand même mieux :o)
Elle s'affiche dans la barre d'adresse de votre navigateur et également dans les favoris.
Commencez par aller sur ce site vous pourrez transformer une image de votre pc en icône.
Il suffit de faire Parcourir d'aller chercher l'image sur votre pc que vous voulez mettre en icône...
Faites Ouvrir puis Generate FavIcon.ico
Ce qui donne ça :
Ensuite cliquez sur Download favIcon
Décompressez le fichier pour extraire l'icône favicon
Votre favicon apparait :
Il ne vous reste plus qu'à l'importer dans un Nouveau message pour récupérer son adresse, en passant par Insertion d'un fichier :
Puis de coller l'adresse de votre icône dans le code ci-dessous:
<LINK REL="SHORTCUT ICON" href="Collez l'adresse ici">
Ensuite il ne vous reste plus qu'à copier-coller ce code dans votre page d'accueil juste après la balise <head>
Voilà une belle icône dans votre barre d'adresse...
Vous devez coller ce code dans les autres pages html pour que votre icône apparaisse aussi sur les autres pages de votre blog...
Mettre une image de fond sous votre calendrier
Ouvrez votre feuille de style, descendez sur le bloc #calendar puis ajoutez la ligne suivante dans le bloc :
background-image: url("Adresse de votre image");
Comme ceci :
#calendar {
font-family: Georgia;
color: #000000;
font-size: small;
line-height: 150%;
padding: 0px;
margin-bottom: 0px;
background-image: url("http://Adresse de votre image.gif");
}
Collez l'adresse de votre image dans la ligne de code et validez.
Vous devez choisir une image de la même taille que l'affichage de votre calendrier (180X180) à peu près, car si l'image est trop petite, elle va se répéter et si elle est trop grande, elle sera coupée.
ça marche aussi avec une image animée...
Un bel exemple ici !
Une fois que vous aurez mis votre image de fond, il y a de grande chance pour que vos chiffres soient moins visibles, forcement en fonction de la couleur de votre image, ça peut faire un ton sur ton...
Pas de panique, retournez dans votre feuille de style et descendez sur les blocs de votre calendrier :
#calendar {
font-family: Georgia;
color: #FFFFFF;
font-size: small;
line-height: 150%;
padding: 0px;
margin-bottom: 0px;
background-image: url("http://p6.storage.canalblog.com/66/66/255038/17491685.gif");
}
#calendar table {
width: 100%;
padding: 2px;
border-collapse: collapse;
border: 0px;
}
#calendar caption {
font-family: Georgia;
color: #FFFFFF;
font-size: small;
font-weight: bold;
text-align: center;
text-transform: uppercase;
padding: 3px;
}
#calendar th {
font-weight: normal;
text-align: center;
}
#calendar td {
text-align: center;
}
Pour changer la couleur des chiffres et du titre, modifier les codes couleurs #FFFFFF
Si votre fond est noir, choisissez les chiffres blancs par exemple...
#calendar : pour les chiffres
#calendar caption : pour le titre (le mois du calendrier)
30 novembre 2010
Ecrire dans un cadre dans une colonne
Ça peut être pratique, voire même joli un petit cadre avec un fond ou pas dans une colonne, histoire de laisser un message de bienvenue à vos visiteurs...
Salut les gens
Voici un petit cadre pour y mettre du texte,
vous pouvez le mettre dans une de vos colonnes pour y mettre un message de bienvenue
ou encore vous en servir comme d'un post-it...
<p style="border: 1px solid; color: #00FFFF; margin: 0%; padding: 0px; font-family: century gothic; font-size: 80%; background-image: url(http://p2.storage.canalblog.com/27/32/794548/58887868.jpg); text-indent: 0px;"><font color="#000000">Salut les gens<br>Voici un petit cadre pour y mettre du texte, <br> vous pouvez le mettre dans une de vos colonnes pour y mettre un message de bienvenue<br>ou encore vous en servir comme d'un post-it...</font></p>
border: 1px solid; color: #00FFFF; : Permet de changer la couleur et la taille du cadre.
font-family: century gothic; : c'est la police du texte.
font-size: 80%; : Permet de grossir et diminuer la taille du texte.
background-image: url(http://p2.storage.canalblog.com/27/32/794548/58887868.jpg); : Permet de changer l'image de fond.
<font color="#000000"></font> : Change la couleur du texte.
Pour faire revenir votre texte à la ligne dans le cadre, tapez votre texte normalement en mode html et insérez la balise <br> à l'endroit où vous voulez faire des retours à la ligne.
Une fois que votre code est bien remanié, vous n'avez plus qu'à le coller dans une colonne de votre page d'accueil à l'endroit ou vous voulez qu'il apparaissent.
Mettre un séparateur entre les articles
Voici comment faire pour encadrer ou mettre un séparateur au dessus du Posté par en bas de vos articles, ce qui permet de bien les séparer les uns des autres...
Comme ceci :
Voici 2 méthodes, la première en passant par la feuille de style, ce qui aura pour effet d'installer le séparateur sur toutes les pages de votre blog.
Repérez le bloc suivant dans la feuille de style et ajoutez les 2 dernières lignes en collant l'adresse de votre image.
.blogbody .itemfooter {
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #404040;
font-size: x-small;
font-weight: normal;
font-style: normal;
text-transform: none;
text-align: left;
margin-bottom: 25px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-width: 2px;
border-color: #000000;
padding: 3px;
clear: both;
background: url("Adresse de votre image") no-repeat 0% 0%;
padding-top: 20px;
}
Modifier la valeur de padding-top pour placer l'image soit sous les écritures du posté par soit au dessus.
La deuxième méthode, permet de mettre le séparateur au dessus et en dessous du posté par et vous pouvez également rajouter les balises <center> </center> pour centrer votre image.
Mais vous devez répéter cette opération sur toutes vos pages html.
Ouvrez la page d'accueil et repérez le bloc suivant, qui correspond à la ligne du posté par en bas de vos articles :
<div class="itemfooter">Posté par <$BlogItemAuthorNickname<div class="itemfooter">Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]</div>
Pour mettre un séparateur au dessus du posté par, collez l'adresse de votre image entière juste avant : Posté par
et pour le mettre en dessous collez l'adresse de votre image entière juste avant : </div>
Comme ceci :
<div class="itemfooter"><p><center><img width="457" height="27" border="0" src="http://Adresse de l'image" /></center></p>Posté par <$BlogItemAuthorNickname$> à <$BlogItemDateTime$> <BlogItemCategories> - <a href="<$BlogItemCategoryLink$>" title="Autres messages dans cette catégorie"><$BlogItemCategoryName$></a> </BlogItemCategories> <BlogItemComments> - <a href="<$BlogItemCommentsURL$>" title="Commentez ce message">Commentaires [<$BlogItemCommentsCount$>]</a> </BlogItemComments> <BlogItemTrackBacks> - <a href="<$BlogItemTrackBacksURL$>" title="Rétroliens">Rétroliens [<$BlogItemTrackBacksCount$>]</a> </BlogItemTrackBacks> - Permalien [<a href="<$BlogItemURL$>" title="Lien permanent vers ce message">#</a>]<p><img width="457" height="27" border="0" src="http://Adresse de l'image" /></p></div>
Mettre de la couleur dans le formulaire des commentaires
Si vous voulez mettre un peu de couleur dans vos commentaires, c'est par ici...
Ça le fait hein...
Ouvrez votre feuille de style et collez dedans, les lignes suivantes :
.blogbody textarea {
background-color:#a5e1a6;
}
.blogbody textarea:focus {
background-color:#67cd6b
}
.blogbody input {
background-color:#a5e1a6;
}
.blogbody input:focus {
background-color:#67cd6b;
}
La première ligne colore le fond de la zone commentaire
La deuxième ligne colore le fond de la zone commentaire, lorsque vous cliquez dans la zone
La troisième ligne colore Nom du pseudo Adresse mail Site web et Titre du commentaire
la quatrième ligne colore le tout, lorsque vous cliquez dans les zones
Il faut bien sur remplacer le code couleur en place #a5e1a6 par celui de votre choix...
Pour mettre une image de fond dans le cadre des commentaire, remplacez le premier code dans le bloc par celui là :
.blogbody textarea {
background-image: url("http://Adresse de l'image de fond.jpg");
}
C'est tout...
Menu boutons liens défilants
Comme pour le menu défilant, collez vos liens à la place de "Lien ici" et vos images à la place de "Adresse image".
Dans cet exemple de menu, les boutons liens s'ouvrent dans une autre fenêtre grâce au : target="_blank"
<p><marquee behavior="scroll" direction="up" height="50"
width="160" scrollamount="1" scrolldelay="1" onmouseover="this.stop()"
onmouseout="this.start()">
<p>
<a href="Lien ici" target="_blank"><img src="Adresse de l'image"></a><br />
<a href="Lien ici" target="_blank"><img src="Adresse de l'image"></a><br />
<a target="_blank"></a><br />
<a target="_blank"></a><br />
<a target="_blank"></a><br />
</marquee>
<p>
Laissez les 3 dernières lignes <a target="_blank"></a><br /> elles servent au bon défilement du menu...
Vous pouvez agrandir ou diminuer le menu en changeant ces valeurs :
height="50" width="160"
Ainsi que la direction en mettant down à la place de up
Code à coller dans une de vos colonnes...
Un exemple sur mon blog culinaire en bas de colonne : Le grand méchant Cook !
Mettre un bouton lien à la place du Contacter l'auteur
Commencez pas trouver une image animée sympa puis ouvrez votre page d'accueil, repérer le bloc contactez l'auteur.
Collez à la place de "Contactez l\'auteur" le code de votre image comme ci-dessous :
<img alt="email18" src="http://Adresse de l'image.gif" width="48" height="45" border="0" />
Ce qui donnera ça :
<div class="item">
<script type="text/javascript">
<!--
document.write('<a href="<$BlogOwnerNoSpamEmailLink$>"><center><img alt="email18" src="http://Adresse de l'iamge.gif" width="48" height="45" border="0" /></center></a>'); // -->
</script>
</div>
La balise <center> </center> permet de centrer l'image dans votre colonne.
Mettre un titre scintillant sur son blog
Commencez par créer votre texte, .
Ensuite, ouvrez la Page d'accueil et rendez-vous sur la ligne <body>
Avancez sur cette ligne vers la droite et repérez <div id="topbar">
<$BlogTitle$> correspond au titre de votre blog.
Pour remplacez ce titre par une image, un texte ou ce que vous voulez...
Il suffit de coller à la place de ce code, le code de votre nouvelle image.
Comme ceci :
Il faut coller le code image entier :
<center><img alt="12" src="http://Adresse de l'image.gif" width="250" height="50" border="0" /></center>
à la place de : <$BlogTitle$>
J'ai ajouté la balise <center> </center> pour centrer le nouveau titre, si vous ne voulez pas que le titre soit centré, il faut enlever cette balise.
Facile non ?
« 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
