Modifications sur Protostar, suite (et fin)

Réduire
Ce sujet est fermé.
X
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] Modifications sur Protostar, suite (et fin)

    Bonjour,

    Protostar sur Joomla 3.4 est à mon goût beaucoup mieux fait que Beez2 que j'utilisais avant ; par contre je n'arrive plus à repérer les modifications que je souhaite faire avec l'inspecteur.
    Bref, j’ai encore quelques questions afin de modifier des éléments de Protostar sur mon site :

    - J’aimerai centrer un peu plus le titre et mettre le nom seul en gras, est-ce que cela est possible ?
    - Le site est en noir et blanc, comment faire pour supprimer la couleur bleue foncée lors du survol du titre ?
    - Le menu latéral est à mon avis un peu trop tassé verticalement ; est-il possible de créer un peu plus d’espace entre les liens du menu et des sous-menus ?
    - Lors du survol des 3 liens principaux du menu apparait un surlignement gris, je ne trouve pas la solution pour le supprimer ; idem pour le soulignement des liens des sous-menus.

    Merci.
    Laurent

  • #2
    Re : Modifications sur Protostar, suite (et fin)

    J'ai déjà trouvé pour l'espacement entre les liens des menus et sous-menus :
    /www/templates/protostar/css/template.css
    Ligne 671, remplacer
    line-height: 18px;
    par
    line-height: 25px;

    Commentaire


    • #3
      Re : Modifications sur Protostar, suite (et fin)

      Et supprimer le soulignement des sous-menus :
      Ligne 200, remplacer
      text-decoration: underline;
      par
      text-decoration: none;

      Supprimer le surlignement gris des sous-menus
      /www/templates/protostar/css/template.css
      Ligne 2848, remplacer
      background-color: #eee;
      par
      background-color: #fff;

      Supprimer le surlignement bleu du titre
      /www/templates/protostar/css/template.css
      Ligne 7000, remplacer
      color: #08c;
      par color: #717171;

      Plus que la première question.
      Dernière édition par Laurent L à 05/08/2015, 13h57

      Commentaire


      • #4
        Re : Modifications sur Protostar, suite (et fin)

        Salut,
        très joli site minimaliste et super photos.
        Belle customisation de Protostar.

        Réponse à :
        J’aimerai centrer un peu plus le titre et mettre le nom seul en gras, est-ce que cela est possible ?
        * Petite astuce, dans le gestionnaire de templates->Protostar, Paramètres avancés,
        tu as :
        Titre
        Description
        Tu peux mettre le prénom dans l'un et le nom dans le second.
        Après cela, c'est juste une question de CSS avec :
        .site-title
        .site-description

        Si tu veux encore améliorer la technique,
        dans index.php, ligne +-141
        <?php echo '<div class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</div>'; ?>
        <?php echo '<span class="site-description">' . htmlspecialchars($this->params->get('sitedescription')) . '</span>'; ?>
        tu remplaces la div par un span (pour le inline).

        HTML généré :
        <span title=jxxxx" class="site-title">Laurent</span>
        <span class="site-description">Lafolie</span>
        * Centrage du titre
        possible, mais je trouve que cela gacherait l'équilibre de la page, mais bon, avis perso.
        Essaie avec
        .header-inner a {
        margin: 0 0 0 35%;
        }
        NB : .header-inner n'est pas spécifié dans template.css
        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 : Modifications sur Protostar, suite (et fin)

          Salut,

          merci.
          Oui, j'avais essayé ça ; par contre ça met le nom et le prénom l'un au dessus de l'autre et de tailles différentes.
          En fait je n'aimerai pas tant centrer le titre que le décaler de quelques cm par rapport à l'alignement sur la barre de menu.

          J'avais réussi ça sur Joomla 2,5/Beez2 avec une bannière comme ci-dessous (et j'avais aussi pu facilement mettre le nom en gras); l'inconvenient de la bannière c'est qu'elle apparait minuscule sur les mobiles.



          Ceci dit rien de très important, ça peut aussi aller comme ça et le plus gros est fait.

          Laurent

          Commentaire


          • #6
            Re : Modifications sur Protostar, suite (et fin)

            J'ai compris, il suffit de changer le pourcentage...
            Encore merci.
            Laurent

            J'attends encore de savoir si il est possible de mettre le nom en gras ; j'ai fait une recherche avec l'éditeur dans tous les dossiers de www afin d'essayer de l'encadrer par des balises <b> et </b> et je n'ai pas trouvé où il était écrit.

            Commentaire


            • #7
              Re : Modifications sur Protostar, suite (et fin)

              Oui, j'avais essayé ça ; par contre ça met le nom et le prénom l'un au dessus de l'autre et de tailles différentes.
              Je t'ai expliqué comment contourner cela --> en remplaçant la div par un span dans index.php.
              Les tailles différentes se règlent par les CSS, ainsi que le gras du texte.

              Pour cela, encore une autre modif sur l'index.php de protostar :
              +-ligne 88
              remplacer
              <link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>' rel='stylesheet' type='text/css' />
              par
              <link href='//fonts.googleapis.com/css?family=<?php echo $this->params->get('googleFontName'); ?>:300,400,700,800' rel='stylesheet' type='text/css' />
              Avec cette manip, tu rajoutes des valeurs de font-weight à la fonte/police choisie pour les titres via le gestionnaire du template :
              300,400,700,800
              Essaie:
              .site-description{font-size: 35px; font-weight: 800;}

              IMPORTANT
              Si tu fais ces manips, n'oublie de faire une copie de ton index.php, en cas de mise à jour.
              Faire les modifs sur template.css n'est pas non plus une bonne idée, toujours en cas de mise à jour, fais aussi une copie de ce fichier.
              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


              • #8
                Re : Modifications sur Protostar, suite (et fin)

                le plus simple est de dupliquer le template et de travailler sur la copie.......

                Commentaire


                • #9
                  Re : Modifications sur Protostar, suite (et fin)

                  le plus simple est de dupliquer le template et de travailler sur la copie.......
                  Autre possibilité ...
                  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


                  • #10
                    Re : Modifications sur Protostar, suite (et fin)

                    Ok, c'est fait et je travaille bien sur une copie de Protostar.
                    Merci infiniment,
                    L.
                    Dernière édition par Laurent L à 07/08/2015, 14h50 Raison: Résolu

                    Commentaire


                    • #11
                      Re : Modifications sur Protostar, suite (et fin)

                      "font-weight" est une propriété CSS qui gère le gras +- des fontes.

                      Voici 3 grands sites de référence des propriétés CSS indispensables :

                      CSS font-weight property
                      W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.


                      font-weight | CSS-Tricks
                      The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by


                      CSS Reference | Codrops

                      Some font families usually come with different faces that have varying amounts of thickness or boldness; this thickness


                      Open+Sans, une fonte google avec démo des diiférentes possiblité font-weight
                      Google Fonts Open Sans
                      Open Sans is a humanist sans serif typeface designed by Steve Matteson, Type Director of Ascender Corp. This version contains the complete 897 character set, wh


                      Dans ton cas, j'ai paramétré différentes valeurs pour ta fonte
                      de Light (300) à Extra Bold (800)

                      IMPORTANT : il faut que tu aies choisi :
                      "Polices Google des titres" : oui
                      dans le gestionnaire de Template de protostar
                      et
                      "Nom de police Google" : Open+Sans
                      ou autre
                      -->https://www.google.com/fonts

                      Il est possible d'utiliser ces specs CSS :
                      font-weight: 300;
                      font-weight: 900;
                      font-weight: normal
                      font-weight: bold;
                      font-weight: bolder;
                      font-weight: lighter;

                      NB : <strong> ou <b> sont presque obsolètes (ou du moins encore utilisés seulement pour les templates d'email)

                      Pour mémo je souhaite que le nom de famille soit de même taille que l'actuel prénom et que lui seul soit en gras.
                      Je me cite:
                      Après cela, c'est juste une question de CSS avec :
                      .site-title
                      .site-description
                      donc
                      .site-title, .site-description{font-size: 35px} //valeur au hasard
                      puis
                      .site-title{font-weight: 300;}
                      .site-description{font-weight: 800;}
                      ou inversement.
                      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


                      • #12
                        Re : Modifications sur Protostar, suite (et fin)

                        Super, merci beaucoup pour les précisions et les liens, je risque de m'en servir plus tard.

                        Désolé, j'ai encore une dernière question: est-ce qu'il est possible de mettre plus d'espace entre les lettres ?
                        J'ai essayé en mettant un blanc entre chaque lettre ; ça fonctionne par contre le prénom et le nom paraissent collés.
                        L.

                        Commentaire


                        • #13
                          Re : Modifications sur Protostar, suite (et fin)

                          J'ai trouvé ces indications : http://www.css-faciles.com/liste-pro...er-spacing.php

                          J'ai rentré ces lignes dans template.css :
                          .site-description{font-size: 24px; font-weight: 500; letter-spacing: 0.5em;}
                          .site-title{letter-spacing: 0.5em;}

                          ça fonctionne, pour le moment le nom et le prénom restent toujours rapprochés.
                          Dernière édition par Laurent L à 07/08/2015, 15h57

                          Commentaire


                          • #14
                            Re : Modifications sur Protostar, suite (et fin)

                            J'ai trouvé sur le même site des infos pour espacer avant ou après les mots en utilisant la barre d'espace : http://www.css-faciles.com/liste-pro...hite-space.php

                            J'ai donc ces deux lignes de codes ajoutées à la fin de template.css :
                            .site-description{font-size: 24px; font-weight: 500; letter-spacing: 0.5em;}
                            .site-title{letter-spacing: 0.5em; white-space: pre}

                            Si quelqu'un veut bien les valider puis je clôture la discussion.
                            Merci.
                            L.

                            Commentaire

                            Annonce

                            Réduire
                            Aucune annonce pour le moment.

                            Partenaire de l'association

                            Réduire

                            Hébergeur Web PlanetHoster
                            Travaille ...
                            X