• Modifier les contours des fenêtres

    Sur cette partie de codage des fenêtres de personnalisation, voyez comment on modifie le contour des fenêtres.

    RAPPELS :
    - Vous pouvez cliquer sur TOUTES les images pour les voir en plus grand
    - Le code CSS est à placer ici :

    Installer une police et l'utiliser

              T I T R E          
    Premièrement, on va s'occuper de cette partie de la fenêtre :
    Modifier les contours des fenêtres

    Ce code est pour modifier le titre de chaque fenêtre :

    .window_title
    {color: COULEUR;
    font-family:POLICE;
    font-size:TAILLEpx;
    line-height:HAUTEUR DE LIGNE%;
    text-align:ALIGNEMENT DU TEXTE (left, center, right); 
    }

     
    Ces codes permettent de colorer le fond. Il faut mettre la même couleur aux 3 pour que ça soit uniforme et pas bizarre.
    .
    window_handle_content{background:COULEUR;}  
    .window_handle_left{background:COULEUR (IDENTIQUE);}
    .window_handle_right{background:COUELUR (IDENTIQUE);}

              C O N T O U R S           
    Deuxièmement, on va colorer les contours :

    Modifier les contours des fenêtres

    Pareil, il faut mettre la même couleur partout, sinon vous aurez quelque chose de particulier...
    .window_content_wrapper1{background:COULEUR;}
    .window_content_wrapper2{background:COULEUR (IDENTIQUE) ;}
    .window_bottom_wrapper1{background:COULEUR (IDENTIQUE) ;}
    .window_bottom_wrapper2{background:COULEUR (IDENTIQUE) ;}
    .window_bottom{background:COULEUR (IDENTIQUE) ;}

             A R R O N D I S             
    Voici le code pour arrondir les coins de la fenêtre (vous remplacez le 50px par autre chose si cet arrondi ne vous convient pas ^^) :
    .window_handle_left {border-radius: 50px 0px 0px 0px;
    -moz-border-radius:  50px 0px 0px 0px;
    -webkit-border-radius:  50px 0px 0px 0px}
    .window_handle_right {border-radius: 0px 50px 0px 0px;
    -moz-border-radius:  0px 50px 0px 0px;
    -webkit-border-radius:  0px 50px 0px 0px}
    .window_bottom_wrapper1 {border-radius: 0px 0px 50px 50px;
    -moz-border-radius:  0px 0px 50px 50px;
    -webkit-border-radius:  0px 0px 50px 50px}
    .window_bottom_wrapper2 {border-radius: 0px 0px 50px 50px;
    -moz-border-radius:  0px 0px 50px 50px;
    -webkit-border-radius:  0px 0px 50px 50px}
    Ce code vous permet d'arrondir le contenu par rapport aux contours :
     .window_content {border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px}


    Voici le code en entier (à modifier bien évidemment) :
    à slider

    /*window title*/
    .window_title
    {color: COULEUR;
    font-family:POLICE;
    font-size:TAILLEpx;
    line-height:HAUTEUR DE LIGNE%;
    text-align:ALIGNEMENT DU TEXTE (left, center, right); 
    }
    .window_handle_content{background:COULEUR;}  
    .window_handle_left{background:COULEUR (IDENTIQUE);}
    .window_handle_right{background:COUELUR (IDENTIQUE);}

    /*window contours*/
    .window_content_wrapper1{background:COULEUR;}
    .window_content_wrapper2{background:COULEUR (IDENTIQUE) ;}
    .window_bottom_wrapper1{background:COULEUR (IDENTIQUE) ;}
    .window_bottom_wrapper2{background:COULEUR (IDENTIQUE) ;}
    .window_bottom{background:COULEUR (IDENTIQUE) ;}

    /*window arrondis*/
    .window_handle_left {border-radius: 50px 0px 0px 0px;
    -moz-border-radius:  50px 0px 0px 0px;
    -webkit-border-radius:  50px 0px 0px 0px}
    .window_handle_right {border-radius: 0px 50px 0px 0px;
    -moz-border-radius:  0px 50px 0px 0px;
    -webkit-border-radius:  0px 50px 0px 0px}
    .window_bottom_wrapper1 {border-radius: 0px 0px 50px 50px;
    -moz-border-radius:  0px 0px 50px 50px;
    -webkit-border-radius:  0px 0px 50px 50px}
    .window_bottom_wrapper2 {border-radius: 0px 0px 50px 50px;
    -moz-border-radius:  0px 0px 50px 50px;
    -webkit-border-radius:  0px 0px 50px 50px}


    Si vous voulez modifier "l'interieur" des fenêtres, cliquez ici.

    « Modifier la couleur à la séléction de texteModifier le contenu des fenêtres »

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :