Mettre des icônes de forums plus grandes Intermédiaire

Mettre des icônes de forums plus grandes

[Prosilver]


- Mettre des folders plus grands
Tuto de Danny-dev


tout d'abord, un folder est l'image qui est situé devant le nom des forums et qui en donne l'état (lu, non lu, notes, annonces, etc.)
Vous voulez personnaliser les folders de votre page d'index, ceux ci sont plus grands que les folders d'origine.
Vous avez changé les valeurs des images dans le fichier
/imageset/imageset.cfg mais si ceux ci sont bien passés à la bonne taille, ils sont coupés, le texte vient par dessus etc.
Voici comment ajuster la place de vos folders:


    - Calcul de la différence de taille entre l'image originale et votre nouvelle image

    Imageexemple avec des images de taille 51px x 51px.
    Il faut calculer la différence de taille donc :
    51-27 (taille d'origine) = 24px Souvenez vous de cette valeur, elle sera utilisée pour les calculs des valeurs de remplacement
    Vous devez bien sur adapter cette valeur à votre cas personnel!!

    Image

    - Ouvrez le fichier content.css

    ImageOn va commencer par la largeur en ajoutant du padding-left au lien du forum.
    Cherchez et modifiez comme suit:

    Code: Tout sélectionner
    dl.icon dt {
    	padding-left: 45px;					/* Space for folder icon */
    	background-repeat: no-repeat;
    	background-position: 5px 95%;		/* Position of topic icon */
    }

    Dans ce code, il faut modifier la ligne padding_left: 45px; et remplacer le 45 par sa nouvelle valeur qui vaudra 45 + 24 = 69, vous aurez donc ceci, il est préférable de garder la ligne originale et de la passer en commentaires (ajout de /* et */ en debut et fin de ligne) pour un éventuel retour au style de base, voici votre fichier après modifications:
    Code: Tout sélectionner
    dl.icon dt {
    	/*padding-left: 45px;*/					/* Space for folder icon */
            padding-left: 69px;					/* Space for folder icon */
    	background-repeat: no-repeat;
    	background-position: 5px 95%;		/* Position of topic icon */
    }


    ImageOn réduit la taille du lien du forum et en même temps celui du titre (forum ou categories).
    Cherchez:

    Code: Tout sélectionner
    ul.topiclist dt {
    	display: block;
    	float: left;
            width: 50%;
    	font-size: 1.1em;
    	padding-left: 5px;
    	padding-right: 5px;
    }

    on remplace width: 50%; par une valeur un peu plus petite : width: 46%;, vous aurez donc ceci
    Code: Tout sélectionner
    ul.topiclist dt {
    	display: block;
    	float: left;
            /*width: 50%;*/
            width: 46%;
    	font-size: 1.1em;
    	padding-left: 5px;
    	padding-right: 5px;
    }

    Image

    ImageLà on remarque que les titres sont décalés donc on va rajouter du padding-right.
    Cherchez et modifiez comme suit:
    le 68 de la ligne modifié vient de 44 + 24 = 68
    Code: Tout sélectionner
    li.header dl.icon dt {
    	/* Tweak for headers alignment when folder icon used */
    	padding-left: 0;
    /*	padding-right: 44px;*/
    	padding-right: 68px;
    }


    ImageOn finit par la hauteur, toujours dans le fichier content.css.
    Cherchez et modifiez comme suit:
    le 59 de la ligne modifiée vient de 35 + 24 = 59
    Code: Tout sélectionner
    /* Forum list column styles */
    dl.icon {
    /*	min-height: 35px;*/
    	min-height: 59px;
    	background-position: 10px 50%;		/* Position of folder icon */
    	background-repeat: no-repeat;
    }


    -tweaks.css pour bug IE6
    ImageIci on va remplacer pour bien préciser qu'il s' agit seulement du lien du forum pour IE6
    trouver:
    Code: Tout sélectionner
    /* Simple fix so forum and topic lists always have a min-height set, even in IE6
    	From http://www.dustindiaz.com/min-height-fast-hack */
    dl.icon {
    	min-height: 35px;
    	height: auto !important;
    	height: 35px;
    }


    remplacer par:
    35 + 24 = 59

    Code: Tout sélectionner
    /* Simple fix so forum and topic lists always have a min-height set, even in IE6
    	From http://www.dustindiaz.com/min-height-fast-hack */
    * html li.row dl.icon {
    	min-height: 59px;
    	height: auto !important;
    	height: 59px;
    }


    et voilà le résultat vu par IE6 :
    Image

    Vous pouvez réduire l'espacement en modifiant les valeurs "background-position: 10px 50%;" de l'image ...

si, malgré ces modifications vous avez un bug persistant sous ie6, voici une modification supplémentaire proposée par MissGeek;
Code: Tout sélectionner
    * html li.row dl.icon dt
    {
         height: taille choisie en px;
         overflow: visible;
    }


07/10/2015 - modifié par cabot pour remplacer le terme "post-it" par note.
06/05/2014 - modifié par cabot pour modifier les mots-clés
21/02/2014 - modifié par cabot pour modifier titre et description.
21/02/2014 - modifié par cabot pour modifier le titre
Avatar de l’utilisateur
abble
Floodeur universel
Floodeur universel
 
Rédigé le: 12 Fév 2014 à 00:24
Articles: 6
Noter cet article: 123456 Votants: 2
Mots-clés: Icônes, folders, forums, plus, grands

Retourner vers Styles