Bonjour,
Nous informons nos visiteurs que tout article concernant le CSS et le HTML se fera ici même, sur Sakatruc.
Tout sur ce qui pourrait être utile sur cowblog se fera sur notre blog partenaire Bidouilles.
Merci de respecter ces règles de fonctionnement,
Anadyomene et Lara.
A bientôt :)
Il est possible de mettre un avatar différent sur chaque habillage de son blog sans bidouiller le code html libre. Pour cela, deux étapes :
1° Il faut IMPERATIVEMENT mettre un avatar sur son blog en passant par la procédure classique (uploader une image dans l'album-photos, attendre sa validation par un modérateur, et ensuite choisir "Mettre en avatar..." dans la liste déroulante toujours sur l'album-photos). MAIS cet avatar doit être une image "invisible" et très petite, par exemple un .gif transparent d'1 x 1 px. Vous pouvez en télécharger un à cette adresse.
2° Il faut maintenant mettre, sur chaque feuille CSS, l'image que vous souhaitez voir apparaître en avatar dans le background de la classe :
.avatar {
background : url(http://lien_vers_image);
width : largeur_de_imagepx;
height : hauteur_de_imagepx;
}
Voici maintenant une petite astuce pour le code html libre du blog.
Certains d'entre vous ont séparé leur menu en différends blocs, et se demandent comment faire pour que les différends éléments placés dans leur code html libre soient dans des blocs différends. Pour cela il suffit de placer le code </div></div><div class="menu-data"><div class="menu-data-txt"> entre chaque code que vous aurez vous même inséré et qui correspondent aux divers éléments que vous vouliez ajouter. Vous obtiendrez alors quelque chose comme ceci l'image ci-contre.
Alors je vais poster ici plusieurs petites astuces concernant le css :
1° - Pour que les titres ou toute autre partie de écrite de votre blog soir en petites majuscules comme ceci, vous devez ajouter le code : font-variant: small-caps; dans les paragraphes que vous souhaitez, pour les titres, dates, commentaires, catégories, liens des menus, titres de menus, etc. ( Si vous ne savez pas à quels sont les parties correspondantes de la fueille css, reportez vous à cet article )
Exemple : Pour que les titres des articles soient en petites majuscules, ajoutez le code à la partie .title :
.title {
color: #a9a9a9;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
font-style: normal;
font-variant: small-caps;
text-decoration: none;
text-align: left;
padding-top: 4px;
margin-left: 4px;
}
2° - Pour que la première lettre des mots soit en majuscule, si par exemple vous voulez que tous les pseudos de ceux qui postent dans votre tagboard aient une majuscule, même ceux qui n'en n'ont pas normalement, ( comme ici ) il faut ajouter le code text-transform: capitalize; Vous pouvez également mettre une majuscule à votre pseudo si vous ne l'avez pas fait lors de votre inscription.
Exemple : En mettant ce code dans la partie qui concerne les pseudos de la tagboard, tous les pseudos ont une majuscule.
#tagframe a {
color: #ecdb6f;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
font-style: normal;
text-transform: capitalize;
text-decoration: none;
}
3° - Pour que le texte soit barré, comme ceci, il faut remplacer le none, ou underline, dans la ligne text-decoration, par line-through ( comme ici lorsque l'on passe sur les liens ), ainsi, selon le paragraphe que vous choisissez dans votre feuille css, le texte sera barré.
Exemple : Avec ce code placé dans ce paragraphe, lorsque l'on passe le curseur sur les pseudos de la tagboard, ils sont barrés.
#tagframe a:hover {
color: #aeaacd;
font-size: 8pt;
font-weight: bold;
font-style: normal;
text-decoration: line-through;
}
1° - Pour que les titres ou toute autre partie de écrite de votre blog soir en petites majuscules comme ceci, vous devez ajouter le code : font-variant: small-caps; dans les paragraphes que vous souhaitez, pour les titres, dates, commentaires, catégories, liens des menus, titres de menus, etc. ( Si vous ne savez pas à quels sont les parties correspondantes de la fueille css, reportez vous à cet article )
Exemple : Pour que les titres des articles soient en petites majuscules, ajoutez le code à la partie .title :
.title {
color: #a9a9a9;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
font-style: normal;
font-variant: small-caps;
text-decoration: none;
text-align: left;
padding-top: 4px;
margin-left: 4px;
}
2° - Pour que la première lettre des mots soit en majuscule, si par exemple vous voulez que tous les pseudos de ceux qui postent dans votre tagboard aient une majuscule, même ceux qui n'en n'ont pas normalement, ( comme ici ) il faut ajouter le code text-transform: capitalize; Vous pouvez également mettre une majuscule à votre pseudo si vous ne l'avez pas fait lors de votre inscription.
Exemple : En mettant ce code dans la partie qui concerne les pseudos de la tagboard, tous les pseudos ont une majuscule.
#tagframe a {
color: #ecdb6f;
font-family: Tahoma;
font-size: 8pt;
font-weight: bold;
font-style: normal;
text-transform: capitalize;
text-decoration: none;
}
3° - Pour que le texte soit barré, comme ceci, il faut remplacer le none, ou underline, dans la ligne text-decoration, par line-through ( comme ici lorsque l'on passe sur les liens ), ainsi, selon le paragraphe que vous choisissez dans votre feuille css, le texte sera barré.
Exemple : Avec ce code placé dans ce paragraphe, lorsque l'on passe le curseur sur les pseudos de la tagboard, ils sont barrés.
#tagframe a:hover {
color: #aeaacd;
font-size: 8pt;
font-weight: bold;
font-style: normal;
text-decoration: line-through;
}
J'espère avoir été assez claire dans mes explications ...
La question se trouve dans tous les forums, les tagboards et les commentaires. Une réponse s'impose donc.
Les explications s'appuient sur le logiciel Photoshop, mais celà ne doit pas trop différer suivant celui que vous utilisez.
Tout d'abord, crééz un fichier image, en définissant l'arrière-plan comme "Transparent".
Ensuite, sélectionnez l'outil "Pot de Peinture" ainsi que la couleur que vous souaitez utiliser.
Réglez alors l'opacité que vous voulez donner à votre fond. (Plus le pourcentage sera élevé, moins votre fond sera transparent).
Appliqez alors l'outil "Pot de Peinture" à votre fichier et enregistrez celui-ci sous le format .PNG (ou .GIF) sinon la transparence ne sera pas prise en compte.
Uplaodez ce fichier et insérez l'url dans votre module d'habillage ou dans votre feuille de style.
Et voilà, ce n'était pas si compliqué ;)
Les explications s'appuient sur le logiciel Photoshop, mais celà ne doit pas trop différer suivant celui que vous utilisez.
Tout d'abord, crééz un fichier image, en définissant l'arrière-plan comme "Transparent".
Ensuite, sélectionnez l'outil "Pot de Peinture" ainsi que la couleur que vous souaitez utiliser.
Réglez alors l'opacité que vous voulez donner à votre fond. (Plus le pourcentage sera élevé, moins votre fond sera transparent).
Appliqez alors l'outil "Pot de Peinture" à votre fichier et enregistrez celui-ci sous le format .PNG (ou .GIF) sinon la transparence ne sera pas prise en compte.
Uplaodez ce fichier et insérez l'url dans votre module d'habillage ou dans votre feuille de style.
Et voilà, ce n'était pas si compliqué ;)
