PHPBoost

Support

Téléchargements

Développement

Communauté

Annonces
Question aléatoire

Que signifie 'x message(s) dans le bloc profil ?
Livre d'or

Par shark

Après avoir tester différents CMS pendant 1 semaine, c'est le votre qui correspond le mieux à mon mini-projet! Vous faites un bon boulot, c'est un cms [Suite...]

Livre d'or

Mini sondage
Disposez-vous de PHP 5 chez votre hébergeur ?








Résultats

 
le design.css
 
Table des matières
  1. Fixe ou extensible ?
  2. L'arrière plan, la couleur, taille de la police
  3. Le header
  4. Et div#header ça sert a quoi ?
  5. Le compteur de visite
  6. Les menus
  7. Le contenu de la page
  8. Le menu central
  9. La barre de lien rapide
  10. Le footer ( ou bas de page )



Ce fichier sert donc à modifier les conteneurs, taille, emplacement etc.

Commençons par le commencement :

Fixe ou extensible ?



Le thème peut être fixe, ou extensible.


Mais qu'est ce que cela veut dire ?




C'est simplement la taille que va prendre votre site, un thème fixe a une taille défini cela veut dire qu'en fonction de la taille de la fenêtre du visiteur ou de sa résolution, le site ne s'y adaptera pas. Un thème extensible en revanche s'adapte a la résolution d'écran et la taille de la fenêtre du navigateur, donc il va s'étirer.


La partie concernée :




Code CSS :
/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
     width:1000px;
    margin:auto;
}


Le thème base est fixe mais cela peut vite se modifier en changeant simplement la taille ( width/largeur )

Il vous suffira donc de faire ça comme ceci :

Code CSS :
/* Conteneurs 
--------------------------------------*/
/* ##### Conteneur global du site ###### */
div#global {
     width:auto;
    margin:auto;
}


L'arrière plan, la couleur, taille de la police



Code CSS :
body {
    background:#E9ECEF url(images/global.png)  repeat-x;
    font-size:12px;
    font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, 'Bitstream Vera Sans', Times, serif;
    color:#0E2A48;
    margin:0;
    padding:0;
}


Pour changer l'arrière plan ( background ) il vous suffira simplement de changer l'image global ainsi que la valeur de son code couleur :

Code CSS :
    background:#E9ECEF url(images/global.png)  repeat-x;
repeat-x veut dire que l'on va répété l'image tout le long en vertical, pour que ce soit à l'horizontal il vous suffira de mettre:

Code CSS :
repeat-y


Et pour que l'image ne soit pas répété mettre:

Code CSS :
no-repeat


Bien sur il existe encore de grande possibilité à ce niveau.

Pour la police, c'est toujours quelque chose de très simple,

Code CSS :
color:#0E2A48;


Il vous suffira de changer le code couleur, pour la taille c'est a ce niveau que ça ce passe :

Code CSS :
   font-size:12px;


Le header




Les parties concerné en css




Code CSS :
 
/* ##### Entête de la page ###### */
div#header_container,div#header_admin_container {
    background: url(images/header.png) no-repeat;
    background-position:20px 0px;
	margin-bottom:8px;
}
 
/* ##### Entête de la page ###### */
div#header,div#header_admin {
    height:90px;
}



En images




Occupons-nous d'abord du logo, les modifications ce font à ce niveau :

Code CSS :
div#header_container,div#header_admin_container {
    background: url(images/header.png) no-repeat;
    background-position:20px 0px;
	margin-bottom:8px;
}


L'image appelé se nomme "header.png" et se trouve dans le dossier "images" du dossier thème, on remarque qu'elle n'est pas répété puisqu'il y a la présence du no-repeat, la position de l'image se fait par la présence de ceci : "background-position:20px 0px;" 20 px étant la taille entre la gauche du site ( left ) et l'image 0px peut définir la taille entre le haut du site ( top ) et l'image.

Et div#header ça sert a quoi ?



Code CSS :
 
/* ##### Entéte de la page ###### */
div#header,div#header_admin {
    height:90px;
}


Il sert simplement a définir la taille entre le haut du site et body ( le corps du site ).

Le compteur de visite



Code CSS :
/* ##### Compteur de visites  ###### */
div#compteur {
    color:#E9ECD9;
    position:absolute;
    top:50px;
    right:0;
    font-size:11px;
    margin-right:15px;
    text-align:right;
}


  • - Color définit la couleur de la police,
  • - font-size la taille,
  • - text-align l'alignement du texte ( center pour centrer, left pour aligner à gauche et right pour aligner à droite ).


Pour définir l'espace entre le site et le compteur ont fait toujours appelle au margin, ici on choisit un margin-right:15px, se qui veut dire qu'on aura un décalement de 15 pixels par la gauche.

Les menus



Code CSS :
/* ##### Menu de gauche ###### */
div#left_menu {
    float:left;
    width:200px;
    margin:0;
    margin-top:10px;
    margin-right:2px !important;
    margin-right:-1px;
    padding:0;
}
 
/* ##### Menu droit ###### */
div#right_menu {
    float:right;
    width:190px;
    margin:0;
    margin-top:10px;
    margin-left:10px !important;
    margin-left:7px;
}


  • - Float définit l'emplacement du menu,
  • - left ( donc left pour celui de gauche et right pour celui de droite ),
  • - width définit la largeur du menu,
  • -margin-top l'espace entre le body et le menu,
  • - margin-right ou left l'espace entre le menu central et le menu en question.


Le contenu de la page



Code CSS :
/* #####  Contenu de la page ###### */
div#main {
    width:auto;
    min-width:450px;
    overflow:hidden !important;
    height:auto !important;
    overflow:visible;
    height:1%;
    padding:0;
    margin:0;
    float:none;
}


Le menu central



Code CSS :
/* ##### Contenu central ###### */
div#main_content {
    width:auto;
    margin-top:10px;
    padding:20px 10px;
    padding-top:5px;
    border-spacing:1px;
    border:1px #cccccc solid;
    background:#F7F8F5 url(images/contentbg.png) repeat-x;
    -moz-border-radius:12px;
    -khtml-border-radius:12px;
    -webkit-border-radius:12px;
    border-radius:12px;
}
 


La barre de lien rapide



Code CSS :
 
/* ##### Barre de lien rapide ###### */
div#links { /*width:96%;*/
    text-indent:10px;
    margin-bottom:20px;
}



Le footer ( ou bas de page )



Code CSS :
/* ##### Pied de page ###### */
div#footer {
	height:30px;
	clear:both;
    margin:auto;
    margin-top:0px;
    padding:0px;
    padding-top:36px;
    padding-right:20px;
    text-align:right;
	background:#F5F4ED url(images/footer.png) repeat-x;
}
div#footer span {
    color:#FFF;
    font-size:10px;
}
div#footer span a {
    color:#FFF;
    font-size:10px;
}


 
Cette page a été vue 2015 fois
Annonces