[Problème] Protostar menu

[phelibre]

Bonjour,

J’administre ce site http://www.admlarochelle.com avec le template Protostar un peu modifié.
J’ai également ce site http://phelibre.free.fr personnel complètement obsolète, car il n’est pas responsive.

J’aimerai donc passer ce dernier sous Joomal avec le thème Protostar modifié et j’ai donc quelques questions à vous poser. Vous m’avez déjà aidé d’autres files je vous en remercie.

Au niveau du menu j’aurai besoin de votre savoir, comme pouvez le voir avec les deux images en P.J. J’ai les liens en vert et le focus me passe la couleur à fff !

- L’idéal serait de pouvoir refaire ce que j’avais fait dans le menu du site static. C’est-à-dire une autre image en superposition pour le focus et rien autrement. Je ne vois pas vraiment comment faire … J’ai vu dans l’onglet « type de lien » qu’il y a deux champs « style css » J’ai regarde l’aide, mais je reste sec.

- Autrement ce serait, de pouvoir gérer les deux couleurs actuelles le vert donc lié à la déclaration dans le template et le blanc dont je ne sais pas ou il est déclaré.


Je vous remercie de votre aide,

Cordialement

[Kirigol]

Bonjour,
De mémoire dans protostar les modifications css se font dans un fichiers user.css (extensions > templates >protostar...)
Avec firefox un clic droit > examiner l'élément te donnera les attributs css liées, à modifier donc dans le fichiers users.css de protostar

Pour l'image en "roll-over", à brûle pourpoint, peut être passer par une image décalée de 1000px sur le lien, et bien positionnée au survol (:hover ou :focus)
ou sinon un background pour a, et un autre background-image pour a:hover...

[phelibre]

Merci Kirigol,

J'avais déjà effectué ces recommandations, merci.

Pour la deuxième phrase, j'ai du mal à saisir une image décalée de 1000 pixels sur le lien !!! De même pour le background j'en fais quoi dans le user.css ...

[Kirigol]

En gros tu pourrais définir une image de fond dans la div contenant le a et une autre pour le a au survol.
et tu ajoutes ton code css dans le fichier user.css (parfois ce peut être custom.css suivant les versions), qui sera prééminent.
Les images sont dans le dossier images du dossier template, et non dans le dossier image racine (enfin de souvenir)

div#conteneur a {height:100%;width:100%;background-image: url ('../images/ton_image_a'); background-repeat:no-repeat; background-position:center center;}
div#conteneur a:hover {height:100%;width:100%;background-image: url ('../images/ton_image_ahover'); background-repeat:no-repeat; background-position:center center;}

ou sinon une seule image mais décalée hors écran (donc non visible) pour a et bien positionnée pour a:hover
dans ce cas pas d'image sous lien seul et image si survol, c'est juste pour que l'image de background soit téléchargée au préalable et affichée plus rapidement au survol.

div#conteneur a {height:100%;width:100%;background-image: url ('../images/ton_image_a'); background-repeat:no-repeat; margin-right:2000px;}
div#conteneur a:hover {margin-right:0;}

[phelibre]

Merci, je vais essayer de le mettre pratique ...

[phelibre]

Avant d'essayer la proposition de Kirigol, je me suis penché sur le template.css et ligne 2991 j'ai :

.nav > li > a:focus {
text-decoration: none;
background-color: #eee;
}

Cette déclaration je l'ai recopié dans mon user.css :

.nav > li > a:focus {
text-decoration: none;
background-color: #596959;
}

sans succès avec !important ou pas !

Par contre si je modifie dans le template.css la valeur de la couleur de fond, c'est pris en compte ...
Avez-vous une explication ?

Cordialement,

[lomart]

Bonjour,

user.css est-il bien chargé ?

[phelibre]

Complètement les autres directives sont bien prises en compte, mais là non !!!

Merci,

[lomart]

Une erreur de syntaxe bloque la règle.
Vérifie le fichier avec http://www.css-validator.org/validator.html.fr

[phelibre]

Mon site d'essai est en local et je n'ai pas d'URL ...

Voilà mon user.css
/* Pour avoir un peu de marge en mode fluid */
.container-fluid {
margin: auto;
width: 80%;
}

/* couleur de fond en mode fluid */
body.site.fluid {
background-color: #595959;
}

/* le corps */
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
color: #ededed;
background-color: #595959;
}

/* Les liens */
a {
color: #ededed;
text-decoration: none;
}
a:hover,
a:focus {
color: #adea8d;
text-decoration: underline;
}

/* 2922 modification du focus du menu */
.nav > li > a:focus {
text-decoration: none;
background-color: #606060;
}

Cordialement,

[lomart]

Mon site d'essai est en local et je n'ai pas d'URL ...

Il suffisait de coller le code dans la fenêtre
Il n'y a pas d'erreur

mettre en tête du fichier user.css
body {color:red !important}

Si le texte n'est pas rouge, c'est que le fichier n'est pas lu

[phelibre]

Mais c'est déjà fait avec ce code
* le corps */
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 18px;
color: #ededed;
background-color: #595959;
}

et donc les couleurs affichées correspondent au code ... réellement (template.css ne connait pas #ededed et #595959)