26/09/10

Back to basics #3

Voilà un petit montage vite fait et assez moche, en complément du "Back to basics #1" :

http://cow-vault.cowblog.fr/images/ILLUS/comments2.png

Voilà un zoom sur la structure des commentaires :

http://cow-vault.cowblog.fr/images/ILLUS/commentsdetail2.png
Si vous avez des questions, ou si vous avez trouvé des erreurs, n'hésitez pas à vous exprimer dans les commentaires.

Ps. Je vous rappelle qu'il y a plusieurs ".article-top", ".article-body".. parce qu'ils sont différents selon l'élément. Il faudra donc intégrer dans le css :

#comments .article-top { }

ou

#post .article-top { }

...

Catégorie / CSS 2 commentaires || Ajouter un commentaire

11/05/10

Back to basics #1

http://cow-vault.cowblog.fr/images/ILLUS/basics5-copie-1.png
Ne sera pas utile à grand monde, mais peut-être aux gens qui tombent sur la feuille de style CSS de Cowblog pour la première fois.

Catégorie / CSS 10 commentaires || Ajouter un commentaire

06/05/10

Les balises HTML en CSS.

Pareil que précédemment, ce n'est pas une liste exhaustive. J'en trouve de nouvelles tous les jours, et je mettrai les mises à jour en évidence si jamais j'en fais.

body {}
img {} : donne les caractéristiques des images. Peut être cumulé avec un id, exemple :
#camboard-pics img {}
#module-groups img {}

div.error {}
div.confirm {}
div.warning {}

Les id

- Général

#page {}
#content {}

- Contenu

#blog {}
#top {} LE HAUT DU BLOG
#top h1 {}
#top h3 {}
#left #right {} LES COLONNES DE GAUCHE & DE DROITE
#left-content {}
#right-content {}
#left ul, #right ul {}
#module-title img {}
#module-tagboard {}
#tagframe {}
#tag-cloud {}
#module-twitter li {}
#module-twitter a {}
#module-twitter a.twitter-time {}
#contact-mail p {}
#dialog-camboard {}
#module-camboard p {}
#camboard-pics table {}
#camboard-pics td {}
#camboard-pics img {}
#center {}
#container {} CE QUI CONTIENT LES ARTICLES
#bottom {} LE BAS DU BLOG
#bottom-select {}
#pub728x90 {}
#email_content {}
#static-page {}

Les class

.article-body ul {}
.archive-li ul {}
.avatar {}
.menu-data {} LES MODULES
.menu-data-top {}
.menu-data-txt {}
.menu-data-bottom {}
.menu-data-select {}
.menu-data h1 {}
.menu-data h3 {}
.article {}
.article-top {}
.article-body {} LE CORPS DU BLOG
.article-body ul {}
.article-bottom {}
.comment-link {}
.commentaire {}
.commentarea {}
.comment-date {}
.commentaire-txt {}
.commentaire-odd {}
.commentaire-pair {}
.commentaire-header {}
.comment-author {}
.owner {} COMMENTAIRES DE L'AUTEUR
.reply {} COMMENTAIRES REPONSES
.zeButton {}
.previous-page {}
.next-page {}
.search-result {}

Note : pareil que pour "img", dès qu'un élément contient un lien, les propriétés de ce lien sont à gérer en plaçant un "a". Exemple :

.article-body a {}



    modifie les propriétés des liens des articles.

.article-body a:hover {}


    modifie les propriétés des liens lorsqu'on passe la souris
    dessus.
 
http://cow-vault.cowblog.fr/images/ICONS/add16.png"ul" et "li" modifient les propriétés des listes.

Remarque : les lignes peuvent s’additionner. Par exemple,
#module-categories .menu-data-top {} définira les caractéristiques du haut du module catégories seulement.
#static-page .article-body {} définit le corps de l’article de la page statique et non du reste du blog.
Etc.

Catégorie / CSS 4 commentaires || Ajouter un commentaire

06/05/10

Les attributs CSS.

Une liste que j'ai concoctée de quelques attributs CSS à insérer dans votre feuille de style. Elle n'est pas exhaustive, c'est juste ceux dont je me sers le plus souvent. Entre les /* */ c'est ce que vous pouvez mettre comme propriétés. Je risque de la mettre à jour, on n'arrête jamais d'apprendre.

-moz-border-radius:px;
-moz-transform: rotate(-90deg);

background-attachment:; /*scroll fixed*/
background-color:#;
background-image:url();
background-position:;
background-repeat:; /*repeat no-repeat*/
border-color:#;
border-style:; /*solid dotted dashed none*/
border-width:px px px px;

color:#;

display:; /*block none*/

float:; /*left right*/
font-family:;
font-size:pt;
font-style:; /*italic oblique normal*/
font-variant:; /*normal small-caps*/
font-weight:; /*normal bold bolder lighter*/

height:px;

line-height:px;
letter-spacing:px;

margin:px px px px;
margin-bottom:;
margin-left:;
margin-right:;
margin-top:;

opacity:; /*entre 1 et 10*/
overflow:; /*scroll hidden*/
overflow-x:;
overflow-y:;

padding:px px px px;
padding-bottom:;
padding-left:;
padding-right:;
padding-top:;
position:; /*relative fixed absolute*/

text-align:; /*left right center justify*/
text-decoration:; /*underline overline none*/
text-indent:px;
text-transform:; /*capitalize uppercase lowercase none*/

visibility:; /*visible hidden*/

width:px;
word-spacing:;

Catégorie / CSS 10 commentaires || Ajouter un commentaire

25/04/10

Haut & Bas d'article.

Chaque élément du haut ou du bas de l'article est indépendant et personnalisable. Pour savoir quel attribut il faut mettre dans sa feuille de style, il suffit d'aller dans Administration > Modules et appuyer sur le http://cow-vault.cowblog.fr/images/ICONS/add.png de "Articles". L'organisation est la suivante :

http://cow-vault.cowblog.fr/images/ILLUS/leftright.png
Pour personnaliser ces éléments il suffit donc de se servir de ces codes :

.article-top .left-1 { }
.article-top .left-2 { }
.article-top .right-1 { }
.article-top .right-2 { }
..

.article-bottom .left-1 { }
.article-bottom .left-2 { }
.article-bottom .right-1 { }
..

http://cow-vault.cowblog.fr/images/ICONS/warning16.pngSi la case contient ce qui correspond à un lien (comme (titre) ou (catégorie) ou (commentaires)..), il faudra rajouter un "a" de cette façon :

.article-top .left a { }
.article-top .right a { }

.article-bottom .left a { }
.article-bottom .right a { }

Catégorie / CSS 3 commentaires || Ajouter un commentaire

25/04/10

Cacher des parties du blog.

Comment faire pour qu'un module apparaisse dans un habillage et pas dans un autre ?
Par exemple, si vous voulez que la tagboard apparaisse dans l'habillage 1 et non dans l'habillage 2, il suffit d'insérer dans la feuille de style de l'habillage 2 :

#module-tagboard {
display:none;
}

Rappel : les noms des modules sont visibles en allant dans Administration > Modules et en cliquant sur les http://cow-vault.cowblog.fr/images/ICONS/add.png

Dans le même esprit, vous pouvez cacher seulement une partie d'un module. Par exemple, vous pouvez gérer deux menus pour deux habillages différents dans un seul et même module HTML libre. Il suffit de créer votre module sur ce modèle :

<div id="menu1">Contenu du menu 1</div>
<div id="menu2">Contenu du menu 2</div>


Il suffit alors d'insérer la ligne suivante dans la feuille de style de l'habillage 1

#menu2 { display:none; }

Et celle-ci dans la feuille de style de l'habillage 2

#menu1 { display:none; }

Catégorie / CSS 6 commentaires || Ajouter un commentaire

<< < | 1 | > >>

Créer un podcast