Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

31 mai 2009 7 31 /05 /mai /2009 08:28
Aujourd'hui non allons voir et comprendre les liens des éléments de navigation d'un blog over-blog.

Il y a deux types de navigations dans les blogs over-blog et ses deux types de navigations sont présentes deux fois : une fois en entête et une fois en pied de blog.


Il y a la navigation qui affiche la pagination sous forme de   début   précédent   1 2 3 4 5 6 7 8 9   suivant   fin
En css elle s'identifie ainsi : .pagination

Qui comprend aussi les éléments suivants qui permettent de tous les dissocier alors que .pagination les englobe tous :
.currentPage
qui est la page en cours affichée sur le blog

.textFirst  
qui est le lien "début" (présent lorsque le blog a beaucoup d'articles)

.textPrevious
qui est le lien "précédent"

.previousPage
les numéros qui sont avant la page courante.
Si par exemple je suis sur la page 4 d'un blog, cet élément concerne les chiffres 1 2 3

.nextPage 
les numéros qui sont après la page courante.
Si par exemple je suis sur la page 5 d'un blog, cet élément concerne les chiffres 6 7 8

.textNext
qui est le lien "suivant"

.textLast
qui est le lien "fin"




Il y a la navigation qui affiche des liens vers les articles lors de l'affichage d'un article seul : article précédent   retour à l'accueil   article suivant
En css elle s'identifie ainsi : .article_navigation

Qui comprend aussi les éléments suivants qui permettent de dissocier les éléments de .article_navigation qui les englobe tous :
.previousArticle
Qui est le lien de l'article précédent a celui qui est affiché.

.nextArticle
Qui est le lien de l'article qui suit celui qui est affiché




Exemples :
Je souhaite supprimer la pagination et la navigation du blog :
.pagination {display:none;}
.article_navigation {display:none;}

Je souhaite seulement supprimer la pagination présente en haut de mon blog et conserver celle du bas :
.before_article .pagination {display:none;}

Je souhaite mettre le lien "début" de la pagination en rouge et en gras :
.textFirst {color:#FF0000; font-weight: bold;} 

Je souhaite écrire en arial, en vert et 14px les textes de navigation :
 .article_navigation {font-family:Arial; color: #00FF33; font-size:14px;}


Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

TREExY 26/11/2009 23:43


Oh, j'ai enfin réussit!
Mais, merci pour ton blog!
Il est absolument formidable =)


Christelle Vinsonneau 06/12/2009 12:00


Tant mieux !
A bientôt


TREExY 26/11/2009 02:32


Bonsoir,
Je viens de découvrir ton travail pour la 1ere fois, et il m'a grandement était utile.
Malheureusement, j'ai un problème! Je voudrais supprimer les lien "précédent", "suivant" & "accueil" du bas des pages de mon blog. J'ai travaillé le Css pendant, Humm... Facilement 2h!! J'ai
vraiment tout essayé, tout ce que tu explique dans l'article! Mais rien ne se passe.
Merci de m'aider! =)
Et encore bonne continuation pour ce blog!

Ps : Je te laisse mon Code Css, afin de m'aider!

body, html {padding: 0px; margin: 0px;}
#global{padding: 0px; margin: 0px auto; width: 950px;}

.ln {clear:both;}
.cl {float:left;}
.clear {clear:both;}

/* modele */
#cl_0_0 {margin:0px 0px 15px 0px; padding:0px; width:100%;}
#cl_1_0 {margin:0 0px 0 0; width:0px; padding:0px}
#cl_1_1 {margin:0px; width:300px; }
#cl_2_0 {width:100%; margin:15px 0 0 0 ;}
.box {width:100%; overflow:hidden;}

/* easyblog structure 7 */
#cl_0_0 {margin-bottom: 0;}
#cl_1_0 {width:950px;}
#cl_1_1 {margin-top: 10px;}
.box {width: auto;}
#global {margin: 20px auto;}/*----------------------------------------------------------------------------*/
/* Variation */
/*----------------------------------------------------------------------------*/
/* default pink common screen */

/* @group colors */
body {
background-color: #fafafa;
color: #787878;
}

a,
.box.presentation a,
.box.presentation li a,
.box .listAll a,
.box.concours a,
.titreArticle,
.infoExtrait,
.titreArticle,
.divTitreArticle h2,
.divPageTitle h2,
.titreExtrait a,
a.linkRecomm,
.presentation h3 a,
.listArticles a,
#miniGlobal h2,
.newWindow a,
.box a,
.box a:hover {
color: #ff8d8f;
}

.calendarToday1 {

}
.calendarToday1, .calendarToday1 a, .calendarToday1 a:hover {
color: #ff8d8f;
}


a:hover,
.box.presentation a:hover,
.box.presentation li a:hover,
.box .listAll a:hover,
.box.concours a:hover,
.titreArticle:hover,
.presentation h3 a:hover,
.listArticles a:hover,
.titreArticle:hover,
.titreExtrait a:hover,
.newWindow a:hover,
a.linkRecomm:hover {
color: #ff8d8f;
}

.article {
border-bottom: 1px dotted #a7a7a7;
}

.date, box-titre {
color: #ff8d8f;
}

.afterArticle, .plusExtrait {display:none;}
color: #bebebe;
}

.afterArticle a, .afterArticle a:visited {display:none;}
text-decoration: none;
}

/* @end */

.commentOption {
}

.concours a img {border: 0px; background: transparent; margin: 0px;}
.concours {padding-right: 0px;}

/* common screen */

/* @group general */

* {
margin: 0;
padding: 0;
outline: none;
}

body {
font: normal 62.5% Georgia, serif;
}

#global {
background-repeat: repeat-x;
}

body, #miniGlobal {
}

img {
border: 0;
}

a {
text-decoration: underline;
}

a:hover {
text-decoration: underline;
}

p {
margin: .8em 0 .5em 0;
}

h1, h2, h3 {
font-weight: normal;
}

textarea {
margin: 5px 0;
}

legend {
padding-left: 5px;
padding-right: 5px;
}

/* @end */

/* @group header */

#header {
font-size: 1.2em;
border: 1px solid #ccc;
}

#top {
text-align: center;
padding: 20px;
border: 1px solid #eee;
margin: 5px;
}

#top h1 {
padding: 0px;
margin: 0px;
font-size: 4em;
letter-spacing: -1px;
}

#top a {
text-decoration: none;
}



#top .box-content {
padding: 0px;
background: transparent;
border: 0px none;
}

#top .box-titre {
display: none;
}

#top .box-footer {
display: none;
}

/* @end */

/* @group footer */

#footer p {
margin: 0;
padding: 0;
}

#footer .box-content {
padding: 0px;
background: transparent;
border: 0px none;
}

#footer .box-titre {
display: none;
}

#footer .box-footer {
display: none;
}

/*

@end */

/* @group content */

#ln_1 {
padding: 0;
background-repeat: repeat-y;
}

* html #ln_1{
float:left;
}
*+html #ln_1 {
float:left;
}

.box-content p {
margin: 0;
padding: 3px;
}

/* @end */

/* @group articles */

.article {
margin-top: 5px;
padding: 0 0 0 0;
font-size: 1.2em;
line-height: 1.4;
}

.contenuArticle, .extrait /* @group articles */

.article {
margin-top: 5px;
padding: 0 0 0 0;
font-size: 1.2em;
line-height: 1.4;
padding: 0px 0px 5px 5px;
margin: 0px;
text-align: justify;
}

.extrait {display:none;}
font-size: 1.2em;
}

.date {
text-transform: uppercase;
font: 82%/1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
letter-spacing: .2em;
}

.dateExtrait .date {
font-size: 100%;
}

.divTitreArticle h2 {display:none;}
padding: 0 0px 10px;
font-size: 1.6em;
}

.divTitreArticle h2 a {display:none;}
text-decoration: none;
}

.titreExtrait {display:none;}
padding: 0 0px 10px;
font-size: 1.3em;
display: block;
font-weight: normal;
}

.topic {

}

.topic a {
text-transform: lowercase;
}
border-style: solid;
border-width: 1px;
padding: 3px;
background-color: #494949;
border-color: #3A3A3A;
}

.contenuArticle img.GcheTexte {display:none;}
float: left;
margin: 3px 10px 3px 0;
}

.beforeArticle {display:none;}
padding: 0;
margin: 25px 0 0 0;
width: 100%;
}

.cl ul {
margin: 0;
padding: 0;
}

.contenuArticle p {
margin: 10px 0;
padding: 0;
}

.contenuArticle ul {
margin: 10px 15px;
padding: 0;
}
.contenuArticle ol {
margin: 10px 15px;
padding: 0;
}

.contenuArticle ul li {
margin: 0;
padding: 0;
background-repeat: no-repeat;
background-position: 0 4px;
}

.extraitArticle {
margin-top: 10px;
margin-bottom: 20px;
border-bottom: 1px dotted #a7a7a7;
}

.hrExtrait {
display: none;
}

.afterArticle, .plusExtrait {display:none;}
text-transform: uppercase;
font: 82%/1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
margin: 0px;
padding: 6px 0 2px 0;
font-size: .95em;
text-align: right;
}

.afterArticle a, .plusExtrait a {display:none;}
text-decoration: underline;
text-transform: uppercase;
font-weight: normal;
font-style: normal;
margin-left: 5px;
}

.afterArticle a:hover, .plusExtrait a:hover {display:none;}
text-decoration: none;
}

.afterReactions {
margin-top: 20px;
padding: 2px 10px 2px 0px;
font-size: 1.1em;
}

/* @end */

/* @group sidebar */

.box {
font-size: 1.1em;
line-height: 1.3;
/*margin: 0 15px 10px 15px;*/
margin: 0 0 15px 0;
padding-bottom: 10px;
border-bottom: 1px dotted;
}

.box.pub {display:none;}
padding-left: 0;
padding-right: 0;
}

.box.pub .box-titre {display:none;}

}

.box.pub .box-content h2 {display:none;}
font: 78%/1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
}

.box.pub .box-content div div h2, .box.pub .box-content div div div {display:none;}
padding: 0 10px;
}

.box img {
background: #FFF;
}

.box-titre h2 {
padding-bottom: 5px;
font: 1.4em 'Trebuchet MS', Trebuchet, Arial, Verdana, sans-serif;
text-transform: uppercase;
}

.box li {
list-style-type: none;
}

.box.articlerecent li,
.box.articlerecent li:hover,
.box.album li,
.box.album li:hover,
.box.categorie li,
.box.categorie li:hover,
.box.commentrecent li,
.box.commentrecent li:hover,
.box.archive li ,
.box.archive li:hover {
display: block;


GL 09/06/2009 14:06

Merci :D
J'ai essayé de faire cela!
En faite, j'avais effacé l'entrée :
.article_navigation

que j'ai du réinsérer :)

MERCI

Christelle Vinsonneau 10/06/2009 14:54


Avec plaisir !


Eric & Laure 08/06/2009 20:48

Ah, une petite coquille s'est glissée dans ton article : il faut bien sûr remplacer ".textFirts" par ".textFirst"...

Christelle Vinsonneau 09/06/2009 11:40


Exact... !
C'est corrigé, merci !


Eric & Laure 08/06/2009 01:34

Un commentaire... oui ! Un grand merci pour ces précisions qui permettent de comprendre la CSS et sa logique tout en utilisant les bons termes pour personnaliser seul son blog.
Initiative drôlement sympa, que je salue ! !

Christelle Vinsonneau 09/06/2009 11:35


Merci ! très gentil de prendre le temps de mettre un commentaire simplement pour faire un compliment !
A bientôt