• Modifier le contenu des fenêtres

    Sur cette partie, voyez comment on modifie tout le contenu 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

    Juste, avant les vrais parties, voici un code pour changer le fond de la fenêtre :
    .window_content{background:COULEUR DE FOND;}  

     .window_content{background:#COULEUR;}

    COULEUR : champ à modifier.

    background : la couleur du fond. Il faut mettre un code héxadécimal. 



              B O U T O N S          
    Voici le code pour modifier l'apparence :
     

    .button_win, .window input[type=button], .window input[type=submit], .window button
    {background: #COULEUR;
    border:NOMBREpx style #COULEUR;
    color:#COULEUR;}


    Pour changer les boutons au survol, il suffit de rajouter ":hover" aux sélécteurs.

     .button_win:hover, .window input[type=button]:hover, .window input[type=submit]:hover, .window button:hover
    {background: #COULEUR;
    border:NOMBREpx style #COULEUR;
    color:#COULEUR;}

    background : la couleur du fond des boutons. Il faut mettre un code hexadécimal. Vous pouvez le trouver grâce au Color Picker Pro dans le menu. 

    border : les bordures des boutons. Dans le champ "NOMBREpx", il faut mettre l'épaisseur de la bordure.
    Dans le champ "STYLE", il faut mettre l'une de ces propositions :
    Si vous voulez, vous pouvez également changer le style de la bordure, c'est à dire que :
    solid est la bordure classique
    dotted est la bordure en pointillés
    dashed est la bordure en tirets
    double est la bordure double
    Dans le champ "COULEUR", c'est comme "color" et "background". Il faut un code hexadécimal.

    color : la couleur du texte du bouton. Comme le fond, il faut mettre un code hexadécimal.


              O N G L E T S          
    Pour ceux qui ne comprennent pas, je parle de ça :
    Modifier le contenu des fenêtres

     

    Voici le code :

     .window_tabs span
    {background: #COULEUR;
    color:#COULEUR;
    font-family:NOM DE POLICE;
    font-size:NOMBREpx;}


    Et pour l'onglet sélectionné, il faut mettre un sélecteur différent, comme ceci :

     .window_tabs span.window_tab_active
    {background: #COULEUR;
    color:#COULEUR;
    font-family:NOM DE POLICE;
    font-size:NOMBREpx;}

    background : la couleur du fond de l'onglet. Il faut mettre un code hexadécimal. Vous pouvez le trouver grâce au Color Picker Pro dans le menu.

    color : la couleur du texte du bouton. Comme le fond, il faut mettre un code hexadécimal.

    font-family : la police. Il faut que vous choissiez une police proposée par eklablog : Arial, Arial Black, Comic sans ms, Courrier New, Georgia, Impact, Lucina Console, Lucina Sans Unicode, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS, Verdana, MS Sans Serif, MS Serif.
    Sinon, vous pouvez mettre une police que vous avez installé vous même. Si vous voulez faire, mais que vous ne savez pas comment, go ici !

    font-size : la taille de la police. Il vous faut un chiffre ou un nombre que vous allez placer juste avant le px selon la taille que vous souhaitez.

     

              T E X T E S  E T  L I E N S          
     

    Voici le code pour le texte normal :

      .window_content
    {color:#COULEUR;
    font-family:NOM DE POLICE;}

    Voici le code pour les liens :

      .window_content a
    {color:#COULEUR;
    font-family:NOM DE POLICE;}

    Et pour les liens survolés, il suffit d'ajouter :hover.

      .window_content a:hover
    {color:#COULEUR;
    font-family:NOM DE POLICE;}

    color : la couleur du texte du bouton. Comme le fond, il faut mettre un code hexadécimal.

    font-family : la police. Il faut que vous choissiez une police proposée par eklablog : Arial, Arial Black, Comic sans ms, Courrier New, Georgia, Impact, Lucina Console, Lucina Sans Unicode, Palatino Linotype, Tahoma, Times New Roman, Trebuchet MS, Verdana, MS Sans Serif, MS Serif.
    Sinon, vous pouvez mettre une police que vous avez installé vous même. Si vous voulez faire, mais que vous ne savez pas comment, go ici !

     

    Voici le code final (à modifier bien sûr) :
    à slider

    /*window*/
    .window_content{background:#COULEUR;}

     

    /*window buttons*/ 
    .button_win, .window input[type=button], .window input[type=submit], .window button
     {background: #COULEUR;
     border:NOMBREpx style #COULEUR;
     color:#COULEUR;}
    .button_win:hover, .window input[type=button]:hover, .window input[type=submit]:hover, .window button:hover
    {background: #COULEUR;
    border:NOMBREpx style #COULEUR;
    color:#COULEUR;}


    /*window onglets*/
    .window_tabs span
    {background: #COULEUR;
    color:#COULEUR;
    font-family:NOM DE POLICE;
    font-size:NOMBREpx;}

    .window_tabs span.window_tab_active
    {background: #COULEUR;
    color:#COULEUR;
    font-family:NOM DE POLICE;
    font-size:NOMBREpx;}


    /*window text-links*/
    .window_content{color:#COULEUR;font-family:NOM DE POLICE;}
    .window_content a{color:#COULEUR;font-family:NOM DE POLICE;} 
    . window_content a:hover{color:#COULEUR;font-family:NOM DE POLICE;}

    Si vous voulez modifier les contours des fenêtres, clique ici.

    « Modifier les contours des fenêtresModifier l'écriture du pied de page »

  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :