Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

    Bonjour,

    j'aimerais réaliser des modules menus comme :

    VOS INFORMATIONS
    Cliquez sur l'image pour l'afficher en taille normale

Nom : info.jpg 
Affichages : 1 
Taille : 9,3 Ko 
ID : 1820637

    comment dois je m'y prendre, svp ??

    Mon template : T3 Bs3 Blank Framework sous Joomla! 3.3

    Merci par avance pour votre aide

    Salutations
    Dernière édition par OttOfans à 24/08/2014, 13h55
    Pour Info :
    Version de Joomla! : 3.3.3 Stable
    Navigateur Web : Mozilla Firefox

  • #2
    Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

    Bonsoir

    UP svp
    Pour Info :
    Version de Joomla! : 3.3.3 Stable
    Navigateur Web : Mozilla Firefox

    Commentaire


    • #3
      Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

      Bonjour OttOfans,

      Le style des modules passe par du code CSS.

      1) Création du code
      Créer un fichier custom.css (s'il n'existe pas déjà) dans templates/t3_bs3_blank/css/ avec le code suivant.
      Le code doit être édité avec un éditeur "propre" comme Notepad++ (surtout pas Word) et sauvegardé en mode UTF-8 sans BOM.
      Code:
      .t3-module.blue {
          border: 1px solid #00005a;
      }
      .t3-module.blue .module-title {
          margin: 0;
          padding-top: 10px;
          padding-bottom: 30px;
          width: 100%;
          height: 25px;
          background-color: #00005a;
          color: white;
          font-size: 15px;
          line-height: 20px;
          font-weight: bold;
          text-transform: uppercase;
          text-align: center;
      }
      .t3-module.blue .module-ct {
          margin: 15px 10px;
          text-align: justify;
      }
      .t3-module.blue a, a:visited, a:link, a:focus {
          color: #00005a;
          font-weight: bold;
      }
      Explication du code:
      • .t3-module : classe utilisée pour les modules par le template JA T3 BS3 Blank
      • .blue : nouvelle classe crée pour les les modules en bleu (nom arbitraire) -> voir utilisation ci-après
      • .t3-module.blue : CSS de la bordure bleue autour du module
      • .t3-module.bleu .module-title : CSS pour l'affichage du titre du module
      • .t3-module.bleu .module-ct : CSS pour l'affichage du contenu du module
      • .t3-module.blue a, ... : CSS pour l'affichage des liens du module

      2) Utilisation
      Pour appliquer cette nouvelle classe "blue" à un module, aller dans les paramètres avancés du module (Extensions > Gestion des modules > [nom-du-module] > Paramètres avancés) et mettre (ou ajouter) dans le paramètre "Suffixe de classe CSS" la valeur " blue" (attention à l'espace devant).

      3) Note importante
      J'ai donné l'explication pour l'aspect "didactique" de comment changer le style d'un module.
      En pratique, pour "copier" le style d'un site web, il faut en demander l'autorisation au propriétaire du copyright du site.

      Amicalement,
      Rajoz

      Commentaire


      • #4
        Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

        [EDIT]OOPS, grillée par Rajoz.
        Deux approches ....[/EDIT]

        Salut,
        avant tout, réfère-toi à la doc d'origine :
        T3 Bootstrap 2 - T3 - Joomla Template Framework


        * mesures à prendre avant d'entamer la modif (propres à ce template)
        1-Dans Gestion des templates : Styles--> t3_bs3_blank - Default-->
        Général -->Optimize CSS->OFF

        2-Dans le répertoire templates/t3_bs3_blank/css
        ajouter un fichier custom.css

        * Tuto
        Là, il faut prendre avantage d'une spécificité de ce template.
        L'ID de chaque module est reprise dans l'html de la page (des pages) où il apparait, sous la forme:
        #Mod[ID du module]

        Prenons le cas d'un module avec l'ID 113.
        Pour réaliser ce que tu veux, tu peux ajouter ceci dans la feuille CSS custom.css

        #Mod113{border: 1px solid #cacaca;}
        #Mod113 .module-title {background: #000;padding: 5px;color: #fff;}
        #Mod113 .module-ct{padding: 10px;}
        Il y a encore d'autres possibilités de transformer un module via les surcharges (overrides).
        Dernière édition par ghazal à 24/08/2014, 11h41
        Un message d’erreur sur votre site Joomla ... ayez le reflexe de consulter lla base de connaissance : https://kb.joomla.fr

        Ce forum, vous l'aimez ? il vous a sauvé la vie ? Vous y apprenez chaque jour ? Alors adhérez à l'AFUJ https://www.joomla.fr/association/adherer

        Commentaire


        • #5
          Re : Design Menu Module sur T3 Bs3 Blank Framework - Joomla! 3.3

          Bonjour,

          parfait merci

          Salutations
          Pour Info :
          Version de Joomla! : 3.3.3 Stable
          Navigateur Web : Mozilla Firefox

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X