Modifier onglets, menus

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

  • Modifier onglets, menus

    Bonjour,
    Je débute sur joomla et je rencontre le problème suivant :
    Je voudrai reproduire les onglets ci-dessous pour mon site internet que je placerai sur le droite mais en utilisant le template par défaut ''Protostar'', je n'arrive pas à personnaliser ces onglets...

    Je vous remercie de votre aide
    Cordialement,
    Fichiers joints

  • #2
    Salut,

    C'est très simple.

    Méthode 1
    • ouvre chaque module concerné et va dans l'onglet "paramètres avancés".
    • dans le champs "Classe d'en-tête/titre" ajoute une classe pour le style de chaque titre.
      > dans ton cas, le plus simple est de les nommer "rouge" et "bleu".
    • dans ta feuille de style, ajoute les classes correspondantes.
      Code:
      h3.rouge { background: #ff0000; color: #fff; padding: 5px;}
    Méthode 2
    • ouvre chaque module concerné et va dans l'onglet "paramètres avancés".
    • dans le champs "Suffixe de classe CSS" ajoute une classe pour le style de chaque titre.
      > dans ton cas, le plus simple est de les nommer "rouge" et "bleu".
    • IMPORTANT : met un espace juste avant d'écrire le nom de ta classe
    • dans ta feuille de style, ajoute les classes correspondantes.
      Code:
      .rouge h3.page-header { background: #ff0000; color: #fff; padding: 5px;}

    Petite précision, pour tes styles personnalisés, je te conseille vivement de créer un fichier nommé "user.css" dans le dossier "css" de ton template Protostar.
    Cela t'évitera à modifier le css de base, et te permettra surtout de t'y retrouver plus facilement.

    Dol.

    EDIT : au passage, ce fil de discussion n'est pas à sa place
    Dernière édition par dolmenhir à 14/10/2020, 08h48
    Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.
    Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
    Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

    Commentaire


    • #3
      Salut,
      je vous remercie pour la rapidité et la précision de votre réponse mais je suis désolé car lorsque j'applique ces codes dans les emplacements indiqués,
      je n'ai aucun changement visible sur le visuel du site..

      Commentaire


      • #4
        Les emplacements indiqués servent à nommer la classe css (rouge, bleu, lenomquevousvoulez, etc...)
        Mais cela ne suffit pas.
        Il faut ensuite la rédiger dans la feuille de style :
        - créer un fichier nommé "user.css" dans le dossier "css" du template Protostar
        - y rédiger le code de chaque classe, exemple :
        Code:
        h3.rouge { background: #ff0000; color: #fff; padding: 5px;}
        Il vous faut un minimum de connaissance pour comprendre ça (c'est pas compliqué, mais quand on l'a jamais fait, c'est du charabia).
        Dernière édition par dolmenhir à 14/10/2020, 12h30
        Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.
        Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
        Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

        Commentaire


        • #5
          D'accord je vous remercie pour l'aide car il est vrai que je n'ai jamais pratiquer le codage.
          Je vais tenter de créer la feuille de style avec vos indications

          Edit : Et est ce que je peux procéder à ces modifications depuis Wampserveur?
          Dernière édition par new user94 à 14/10/2020, 13h00

          Commentaire


          • #6
            Envoyé par new user94 Voir le message
            Edit : Et est ce que je peux procéder à ces modifications depuis Wampserveur?
            Bien sur.
            Mais le plus simple, si vous ne maitrisez pas le code, c'est de le faire directement depuis l'espace d'administration.
            1. Allez dans le menu "Extensions > Templates"
            2. Cliquez sur le titre du template "Protostar"
            3. Cliquez sur le bouton "Nouveau fichier" situé dans la partie supérieure de la page
            4. Dans la "pop-up" qui s'ouvre, cliquez sur le dossier "css" pour le sélectionner
            5. Dans le champ "nom de fichier" saisissez "user" et sélectionnez le type "css" puis cliquez sur créer
            6. Dans la zone d'édition saisissez le code selon l'exemple que je vous ai indiqué
            7. Cliquez sur le bouton "Enregistrer" ou "Enregistrer et Fermer"
            Pour revenir éditer ultérieurement ce fichier :
            1. Allez dans le menu "Extensions > Templates"
            2. Cliquez sur le titre du template "Protostar"
            3. Cliquez sur le dossier "css" situé dans la partie gauche de la page puis sur le fichier "user.css"
            4. Vous verrez alors la zone d'édition au centre de la page où vous pourrez modifier vos les classes css existantes, ou en créer de nouvelles
            Jeff71 aime ceci.
            Je préfère éclairer que briller.” - “J'ai peut-être l'air froid, mais je suis pas givré.
            Ne m'envoyez pas de message privé pour résoudre vos problèmes sans y avoir été invité.
            Dolmenhir : tailleur de site web depuis 1997. Spécialiste Joomla depuis 2005. https://www.dolmenhir.fr

            Commentaire


            • #7
              D'accord je vous remercie pour l'aide j'ai créer mon dossier
              Bonne journée à vous

              Commentaire

              Annonce

              Réduire
              Aucune annonce pour le moment.

              Partenaire de l'association

              Réduire

              Hébergeur Web PlanetHoster
              Travaille ...
              X