Joomladay francophone 2018 à Paris 18 et 19 mai

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
        Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
        Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

        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.
              Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
              Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

              Commentaire


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

                le plus simple est de dupliquer le template et de travailler sur la copie.......
                Mon site de documentation sur Joomla et le CCK K2 : http://documentation.informaticien51.fr
                Une notice pour le CCK K2 ( mise à jour le 01/06/2015) :
                http://documentation.informaticien51...couverte-de-k2

                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é ...
                  Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                  Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                  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
                      http://www.w3schools.com/cssref/pr_font_weight.asp

                      font-weight | CSS-Tricks
                      https://css-tricks.com/almanac/prope...f/font-weight/

                      CSS Reference | Codrops
                      http://tympanus.net/codrops/css_reference/
                      http://tympanus.net/codrops/css_reference/font-weight/

                      Open+Sans, une fonte google avec démo des diiférentes possiblité font-weight
                      Google Fonts Open Sans
                      https://www.google.com/fonts/specimen/Open+Sans

                      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.
                      Une journée entière pour se former à la gestion d'un site et parler de son futur site avec des experts Joomla!
                      Ghazal, Lomart, Manu93fr et pleins d'autres vous attendent le 19 mai pour la journée Grands Débutants au https://www.joomladay.fr de Paris

                      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
                            1 sur 2 < >

                            C'est [Réglé] et on n'en parle plus ?

                            A quoi ça sert ?
                            La mention [Réglé] permet aux visiteurs d'identifier rapidement les messages qui ont trouvé une solution.

                            Merci donc d'utiliser cette fonctionnalité afin de faciliter la navigation et la recherche d'informations de tous sur le forum.

                            Si vous deviez oublier de porter cette mention, nous nous permettrons de le faire à votre place... mais seulement une fois
                            Comment ajouter la mention [Réglé] à votre discussion ?
                            1 - Aller sur votre discussion et éditer votre premier message :


                            2 - Cliquer sur la liste déroulante Préfixe.

                            3 - Choisir le préfixe [Réglé].


                            4 - Et voilà… votre discussion est désormais identifiée comme réglée.

                            2 sur 2 < >

                            Assistance au forum - Outil de publication d'infos de votre site

                            Compatibilité: PHP 4.1,PHP4, 5, 6DEV MySQL 3.2 - 5.5 MySQLi from 4.1 ( @ >=PHP 4.4.9)

                            Support Version de Joomla! : | J!3.0 | J!2.5.xx | J!1.7.xx | J!1.6.xx | J1.5.xx | J!1.0.xx |

                            Version française (FR) D'autres versions sont disponibles depuis la version originale de FPA

                            UTILISER À VOS PROPRES RISQUES :
                            L'exactitude et l'exhaustivité de ce script ainsi que la documentation ne sont pas garanties et aucune responsabilité ne sera acceptée pour tout dommage, questions ou confusion provoquée par l'utilisation de ce script.

                            Problèmes connus :
                            FPA n'est actuellement pas compatible avec des sites Joomla qui ont eu leur fichier configuration.php déplacé en dehors du répertoire public_html.

                            Installation :

                            1. Téléchargez l'archive souhaitée : http://afuj.github.io/FPA/

                            Archive zip : https://github.com/AFUJ/FPA/zipball/master

                            2. Décompressez le fichier de package téléchargé sur votre propre ordinateur (à l'aide de WinZip ou d'un outil de décompression natif).

                            3. Lisez le fichier LISEZMOI inclus pour toutes les notes de versions spécifiques.

                            4. LIRE le fichier de documentation inclus pour obtenir des instructions d'utilisation détaillées.

                            5. Téléchargez le script fpa-fr.php à la racine de votre site Joomla!. C'est l'endroit que vous avez installé Joomla et ce n'est pas la racine principale de votre serveur. Voir les exemples ci-dessous.

                            6. Exécutez le script via votre navigateur en tapant: http:// www. votresite .com/ fpa-fr.php
                            et remplacer www. votresite .com par votre nom de domaine


                            Exemples:
                            Joomla! est installé dans votre répertoire web et vous avez installé la version française du fichier FPA:
                            Télécharger le script fpa-fr.php dans: /public_html/
                            Pour executer le script: http://www..com/fpa-fr.php

                            Joomla! est installé dans un sous-répertoire nommé "cms" et vous avez installé la version française du fichier FPA:
                            Télécharger le script fpa-fr.php dans: /public_html/cms/
                            Pour executer le script: http://www..com/cms/fpa-fr.php

                            En raison de la nature très sensible de l'information affichée par le script FPA, il doit être retiré immédiatement du serveur après son utilisation.

                            Pour supprimer le script de votre site, utilisez le lien de script de suppression fourni en haut de la page du script. Si le lien de suppression échoue pour supprimer le script, utilisez votre programme FTP pour le supprimer manuellement ou changer le nom une fois que le script a généré les données du site et le message publié sur le forum. Si le script est toujours présent sur le site, il peut être utilisé pour recueillir suffisamment d'informations pour pirater votre site. Le retrait du script empêche des étrangers de l'utiliser pour jeter un oeil à la façon dont votre site est structuré et de détecter les défauts qui peuvent être utilisé à vos dépends.
                            Voir plus
                            Voir moins
                            Travaille ...
                            X