• É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

    1
    Mercredi 27 Décembre 2017 à 22:24

    Ah mais c'est parfait ça (même si pour les listes on est d'accord que c'est vraiment sur du détail) je galérais pour formater mon image pour la croix de la fenêtre d'édition moi ^-^ en tout cas merci du partage !

    • Voir les réponses
    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :