• Éléments sur la fenêtre

    J'ai trouvé de nouveaux codes sur la fenêtre de personnalisation que je n'ai vu nul part ailleurs sur les blogs de css.

    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

              C R O I X   P O U R   F E R M E R           
    Voici le code :


    .
    window_handle_tools .window_handle_tools_close{background: url("
    IMAGE DE VOTRE CROIX")}

    .
    window_handle_tools .window_handle_tools_close:hover{opacity:0.5;}

    IMAGE DE VOTRE CHOIX : à remplacer par une image de croix que vous prenez sur Internet et recadrez ou que vous faites vous même, format 20*20. Je vous rappelle que le fond transparent est plus esthétique, mais après c'est à vous de voir.

    background : c'est le fond de la croix, et donc là où il y a l'image d'origine. Il faut modifier le champ 'IMAGE DE VOTRE CROIX' pour changer le fond, et donc la croix.

    opacity : c'est l'opacité de la croix. J'ai modifié l'opacité au survol pour qu'il y ai un petit effet.

    Exemple :
    .window_handle_tools .window_handle_tools_close
    {background: url("
    http://ekladata.com/tvEYEHVn5iwlmv4mqdGkz75pASs/croix.png")}
    .window_handle_tools .window_handle_tools_close:hover
    {opacity:0.5;}

    Va donner ceci :
    >>clique<<


              M E S S A G E R I E           

    En premier, voyons la ligne avec Date - De - Sujet
    Éléments sur la fenêtre

    .window_membres_msg_msg th
    {background:COULEUR;color:COULEUR;
    opacity:1;font-weight:thin;
    }


     .window_membres_msg_msg th
    {background:COULEUR;
    color:COULEUR;
    opacity:1;
    font-weight:thin;
    }


    background  : c'est la couleur de fond de la barre. Choisissez un code hexadécimal sur le Color Picker Pro dans le menu et mettez le comme fond.

    color : c'est le couleur du texte de la barre. Comme le fond, choisissez un code héxadécimal.

    opacity : c'est l'opacité de la barre. Il faut y mettre un chiffre compris entre 0 et 1, et si il est décimal, il faut séparer la partie entière de la partie décimale par un . et non une , (0.2 ou 0.6 ou 1 par exemple)

    font-weight : c'est l'épaisseur des lettres, là j'ai mis "thin" pour que les lettres soient normales, mais vous pouvez mettre weight pour que ça soit en gras.

    Exemple :
    .window_membres_msg_msg th
    {background:#81d57b;
    color:#000;
    opacity:0.5;
    font-weight:thin;
    }
    Va donner ça :
    Éléments sur la fenêtre

     
    Ensuite, voyons les messages
    Éléments sur la fenêtre

    Voici le code :


    .window_membres_msg_msgline{background:COULEUR;color:COULEUR;}
    .window_membres_msg_msgline:hover{background:COULEUR;color:COULEUR;}

    :hover : c'est lorsque l'un des message est survolé, donc l'apparence que ça va avoir au survol.

     background  : c'est la couleur de fond des messages . Choisissez un code hexadécimal sur le Color Picker Pro dans le menu et mettez le comme fond. Mais je vous conseille du blanc (white ou #fff) pour les messages n'étant pas survolés.

    color : c'est le couleur du texte des message. Comme le fond, choisissez un code hexadécimal.

    Exemple :
    .window_membres_msg_msgline{background:#fff;color:#000;}
    .window_membres_msg_msgline:hover{background:#81d57b;color:#fff}
    Va donner ça :
    >>clique<<

              L I S T E S   D E   B L O G S          

     Je parle de ces listes :
    Éléments sur la fenêtre
     


     .liste_dragsort{background:none;border:0px solid black;}
    .liste_dragsort li{border:2px STYLE COULEUR; background:COULEUR;color:COULEUR;margin-bottom:NOMBREpx;}
    .liste_dragsort li:hover{ background:COULEUR;color:COULEUR;} 

    code en marron : ce code sert à désactiver le fond bleu et la bordure bleue aussi.

     background  : c'est la couleur de fond des blogs. Choisissez un code hexadécimal sur le Color Picker Pro dans le menu et mettez le comme fond.

    color : c'est le couleur du texte de la barre. Comme le fond, choisissez un code héxadécimal.

    border : La bordure des blogs. Pour que l'effet reste comme à l'origine même si on change la couleur, il vaut mieux laisser 2px.
    Il y a plusieurs champs :
    STYLE : il faut choisir entre solid qui est la bordure classique, dotted qui est la bordure en pointillés, dashed qui est la bordure en tirets.
    COULEUR : c'est la couleur de la bordure. Je me répète, mais code héxadécimal, Color Picker Pro, menu... blablabla...

    margin-bottom : cet propriété est pour espacer les blogs les uns des autres. Par conséquent, plus la valeur sera élevée, plus les blogs seront espacés.

    Exemple :
    .liste_dragsort{background:none;border:0px solid black;}
    .liste_dragsort li{border:2px solid #81d57b;background:#e7f6e6;color:#000;margin-bottom:3px;}
    .liste_dragsort li:hover{background:#81d57b;color:#fff}
    Va donner ceci
    >>clique<<

              L E   R E C T A N G L E   G R I S         
    Éléments sur la fenêtre

    Ce fameux rectangle gris... J'ai trouvé comment le modifier. Il suffit de mettre ce code :


    .window_tabs{background:COULEUR;}

     background : c'est la couleur de fond du rectangle. Choisissez un code hexadécimal sur le Color Picker Pro dans le menu et mettez le comme fond pour la énième fois.


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :