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

[Laurent L]

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

[Laurent L]

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;

[Laurent L]

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.

[ghazal]

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

[Laurent L]

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

[Laurent L]

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.

[ghazal]

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.

[lefabdu51]

Re : Modifications sur Protostar, suite (et fin)

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

[ghazal]

Re : Modifications sur Protostar, suite (et fin)

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

Autre possibilité ...

[Laurent L]

Re : Modifications sur Protostar, suite (et fin)

Ok, c'est fait et je travaille bien sur une copie de Protostar.
Merci infiniment,
L.

[ghazal]

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/properties/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.

[Laurent L]

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.

[Laurent L]

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.

[Laurent L]

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.