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

    « Modifier "Lire la suite..."PHOTOS : Faire ressortir une couleur »

  • Commentaires

    1
    Lundi 31 Juillet à 08:49

    Merci pour ses codes uniques! Même si je les utiliserai pas c'est super d'avoir trouvé des nouveaux codes.

    2
    Mardi 22 Août à 12:05

    En fait je voudrais utiliser le code pour la croix. J'aimerai mettre une croix noir avec un fond transparent sauf que j'y arrive pas. Est ce que tu pourrais me la faire s'il te plait?

    3
    Mardi 22 Août à 18:04

    Oui, après c'est vraiment dommage que tu n'y arrives pas toi-même :)
    Le problème étant que je n'ai pas un débit de wi-fi assez puissant pour aller sur mes logiciels, donc je vais te filer un tuto juste en-dessous, et si tu n'y arrives vraiment pas, je te le ferai à mon retour en France.

    4
    Mardi 22 Août à 18:14

    Il y a deux techniques (perso je préfère largement la deuxième)
    PREMIÈRE
    1/ Choisis ton image sur internet et enregistre-là dans ton ordinateur
    2/ Vas sur Pixlr Edior. Là, tu crées une image 20*20 et (IMPORTANT) tu coches 'transparent'.
    3/ Tu fais 'Calque' (sur la barre en haut) puis 'Ouvrir l'image en tant que calque' puis tu sélectionnes l'image que tu as choisi sur Internet. Là très logiquement, elle est trop grande pour ta dimension.
    4/ Tu fais 'Editer' puis 'Transformation libre', et tu recadre ton image de croix.
    5/ Maintenant qu'elle est recadrée, tu prends la baguette magique(j'espère que tu vois ce que c'est), et sélectionnes la partie blanche (tu peux augmenter la tolérance en haut qui supprimera plus de blanc).
    6/ Tu prends la gomme et tu effaces. Là il n'y a que la partie blanche qui s'enlève.
    7/ Voilà,tu peux faire 'Fichier' et 'Enregistrer'. N'OUBLIE PAS : mets en format .png sinon l'image ne sera pas transparente.

    DEUXIEME
    1/ Ouvre Pixlr Editor. Crées une image 20*20 et (IMPORTANT) tu coches 'transparent'.
    2/ Tu cliques sur le crayon (attention, pas le pinceau) dans le menu des outils.
    3/ Tu traces ta croix en faisant un premier trait puis un deuxième tout simplement.
    4/ Et tu peux déjà enregistrer (n'oublie pas, format .png) !

    5
    Mercredi 23 Août à 08:54

    Merci! Je t'ai demandé de la faire mais c'est normal que je la fasse moi. Donc merci et je fais choisir la deuxième qui est plus rapide. En tout cas bonne fin de séjour en Algérie!

    6
    Mercredi 23 Août à 10:15

    Ella, je crois qu'il y a eu un malentendu :)
    Je t'ai dis que j'étais absolument d'accord pour te le faire, mais que je ne peux pas ouvrir mes logiciels ici (en Algérie) par faute de débit trop bas.
    Si tu veux que je te le fasse, il faut que tu attendes le 26 ou le 27, quand je serai arrivée en France.

    7
    Mercredi 23 Août à 13:26

    Non je voulais juste dire que maintenant je sais comment faire donc c'est normal que je le fasse moi. Juste une question lors de la création de mon img je coche "transparent" et le fond n'est pas transparebt mais blanc 

    8
    Mercredi 23 Août à 17:04

    Mais normalement il y a des carrés gris et blancs, c'est bizarre... Tu peux me dire comment tu fais pour créer ton img ?

    9
    Mercredi 23 Août à 17:34

    Oui justement. Quand je la crée il y a des carré gris blanc et quand je fais les manoeuvre et je mets l'url de l'image de fond est blanc et non transparent.

    Pour créer l'image j'appuie sur "créer une image" et je coche transparent regarde:

    Url de la capture d'écran

    10
    Mercredi 23 Août à 18:43

    AAAAAH OK !
    Donc le problème est quand tu enregistres.
    QUand tu fais 'fichier' puis 'enregistrer',tu sais, une fenêtre apparaît avant que tu ne choisisses ton emplacement. Et bien là il y a écrit par défaut .JPEG, et tu dois cliquer dessus et mettre .PNG

    11
    Jeudi 24 Août à 09:34

    D'accord merci je vais essayer!

    Edit: Merci ca marche parfaitement. Ce logiciel est très pratique!

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :