• Déplacer les modules

    Par Ange-54 dans CSS le 3 Septembre 2013 à 21:53

    Merci à Nagalia

    Pour l'exemple, j'ai pris le modules visiteurs.

    Regardez dans le code source de votre page: 
        •"clique droit => Code source de la page"
        •Faites Ctrl+F pour chercher votre module



    •Surligné en orange, c'est le titre du module, qui doit être le résultat de votre recherche.
    •Encadré en bleu, vous remarquez l'id
    •Et enfin, ce qui est surligné en jaune, c'est ce que nous allons mettre dans le css pour pouvoir le déplacer.

    Voici maintenant ce que vous allez mettre dans votre code CSS :

    #module_menuXXXXXX {position: absolute;
              top: Xpx;
              left: Xpx;
    }

    Remplacez XXXXXX par le nombre souligné en rouge dans le code source.

         •"position: absolute" permet de placer le module dans le coin en haut à gauche par défaut.
         •"top: Xpx" Remplacez X par un nombre de px. Cela indique à combien de px du haut de la page vous placez le module
         •"left: Xpx" Remplacez X par un nombre de px. Cela indique à combien de px de la gauche de la page vous placez le module


    Personnaliser


    Une fois que vous connaissez les id de vos modules, vous pouvez les modifier indépendamment en code CSS. Par exemple, si je veux que mon module visiteur est un fond bleu, et que le module recherche n'en ai pas :

    #module_menu2827671 {position: absolute;
              top: Xpx;
              left: Xpx;
              background: rgba(90, 188, 189, 0.2);
              border-radius: 15px;
              box-shadow: 0 0 10px #7afeff ;}

    #module_menu2821246 {position: absolute;
              top: 188px;
              margin-left: 500px;
              background: none;}

    Vous pouvez ainsi modifier tous vos modules séparément. N'oubliez pas de changer mes valeurs (en rouge) par les vôtres, sinon ça ne risque pas de fonctionner.

    A noter que pour les modules prédéfinis, on peu y accéder sans connaitre l'id du module, comme ceci:

    .module_menu_type_lastvisitors{
              position: absolute;
              top: Xpx;
              left: Xpx;
              background: rgba(90, 188, 189, 0.2);
              border-radius: 15px;
              box-shadow: 0 0 10px #7afeff ;}

    Vous voulez pouvoir personnaliser les titres de vos modules, en mettant une image par exemple? L'article est ICI.


  • Commentaires

    Aucun commentaire pour le moment

    Suivre le flux RSS des commentaires


    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :