• CSS

  • Copier/Coller le code ci-dessous dans vos CSS:

    ::-webkit-scrollbar-thumb:vertical {background-color: #823826;height: 6px;}

    ::-webkit-scrollbar {height:5px;width: 8px;background-color: white;}

     

    white correspond à la couleur de fond de votre scrollbar, vous pouvez la remplacer par #FFFFFF par exemple. #823826 correspond à la couleur de la barre qui bouge en fonction de l'endroit où vous êtes sur la page. 

    Il ne vous reste plus qu'à enregister votre code et à recharger la page :)

     

    Vous pouvez également mettre une scrollbar dans vos articles, pour cela consulter cet article : "Cadre avec scrollbar"


    votre commentaire
  • Collez ceci dans Ajouter du CSS:

    .commentavatar {
        background-color: #FFFFFF;
        border: 2px solid #FFFFFF;
        padding: 0;
    }
     

    background-color c'est la couleur de fond, elle doit être de la même couleur que votre cadre. Pour changer sa couleur, changez #FFFFFF. border c'est la bordure, ici 2px, vous pouvez changer cette mesure selon votre choix, pour la couleur, vous remplacez #FFFFFF par celle de votre choix. padding évite simplement d'avoir un espace entre la bordure et l'image.

    Plus d'approfondissement

     

    Pour positionner l'avatar à gauche au lieu de le positionner à droite du commentaire

    .commentavatar {
        float: left;
    }
     

    Pour arrondir les coins de la bordure

    .commentavatar {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

       
    background-color: #FFFFFF;
        border: 2px solid #FFFFFF;
        padding: 0;
    }
     

    Pour mettre de l'ombre derrière la bordure

    .commentavatar {
        box-shadow: 0 0 7px #000000; 
       
    background-color: #FFFFFF;
        border: 2px solid #FFFFFF;
        padding: 0;
    }
     

    Remplacez #000000 pour changer la couleur de l'ombre et réglez le 7px pour son étendue, plus le chiffre sera petit plus l'ombre sera nette et proche de la bordure, et inversement.


    2 commentaires
  • Si vous voulez que votre fond soit répété et fixe copiez/collez ce code:

     

    #body{

    background:transparent url(URLrepeat  fixed

    }

    Si vous voulez votre fond ne soit pas répété et fixe copiez/collez ce code:

     

    #body{

    background:transparent url(URLno-repeat fixed;

    }

     

    Il suffit ensuite de remplacer URL par l'url de votre image.


    votre commentaire
  • L'header ne pouvant pas dépasser les 400 KO, si vous souhaitez mettre un header plus lourd que cela, il vous faudra utiliser le code ci-dessous

    #header{

     height: HAUTEURpx;
    background:transparent url(URLcenter top no-repeat

    }

    Remplacez:

    HAUTEUR par la hauteur de ton image.

    URL par l'url de ton image.

    Si vous voulez mettre l'image à gauche ou à droite il suffit de remplacer center par left (gauche) ou right (droite). De plus, si vous voulez répété (mosaïque) votre image il suffit d'enlever le no- de no-repeat.


    votre commentaire
  • La première étape, c'est changer le degrès d'arrondissement des cases de formulaire qui sont par défaut carrées. Pour ce faire, collez les codes suivants :

    #form_cavom {
        border-radius: 20px 10px;
    }

    #background input[type="text"], #background select, #background textarea {
        border-radius: 20px 10px;
    }

    #menubar_signin input {
        border-radius: 20px 10px;
    }

    #menubar_signin_username {
        border-radius: 20px 10px;
    }

    #menubar_signin_username, #menubar_signin_password {
        border-radius: 20px 10px;
    }

    Les valeurs 20px s'appliquent au côté supérieur gauche et inférieur droit de la case.
    Les valeurs 10px s'appliquent au côté inférieur gauche et supérieur droit de la case.
    Ces deux valeurs sont modifiables.


    Maintenant, il faut mettre un fond à ces cases de formulaire. Il va falloir modifier l'une des lignes précédemment collées. Retrouvez celle-ci

    #background input[type="text"], #background select, #background textarea {
        border-radius: 20px 10px;
    }

    Remplacez-la comme ceci :

    #background input[type="text"], #background select, #background textarea {
    border-radius: 20px 10px;
    background: url("urldel'image");
    }

    Il vous suffit ensuite de remplacer urldel'image par l'url de l'image de fond souhaitée (cette image sera répétée).

    Si la répétition de l'image n'est pas souhaitée, transformez à nouveau la ligne de la façon suivante :

    #background input[type="text"], #background select, #background textarea {
    border-radius: 20px 10px;
    background: url("urldel'image") no-repeat;
    }

    votre commentaire


    Suivre le flux RSS des articles de cette rubrique
    Suivre le flux RSS des commentaires de cette rubrique