Changer le bouton "Lire la suite"

[phelibre]

Bonjour,

J’administre ce site sous Joomla 3.6.4. La charte graphique du site fédérateur d’Artisans du Monde est passé en flat designe et j’adapte doucement celui de La Rochelle.

Il me reste à vouloir passer les boutons ‟Lire la suite” en flat designe et donc à les modifier pour avoir un gris clair uni.
Je crois que c’est la class readmore qui définie le bouton mais pas trop sur et impossible de trouver cette classe*!!

Pouvez-vous m’aider*?

Merci,

[lefabdu51]

Re : Changer le bouton "Lire la suite"

p.readmore a.btn {
mes modifs
}
et au survol 
c'est la classe ci dessous qui est utilisée :
.btn:hover, .btn:focus {
    color: #333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position .1s linear;
    -moz-transition: background-position .1s linear;
    -o-transition: background-position .1s linear;
    transition: background-position .1s linear;
}

Les deux classes sont à ajouter en bas du fichier css du template (ou custom.css si vous en utilisez un).

[phelibre]

Re : Changer le bouton "Lire la suite"

Pour essai, j'utilise un site local sur mon Mac mini avant de valider sur le net.

Le site test est un Joomla d'origine en 3.6.4 avec le template d'origine etc ...
J'ai fait l'ajout à la fin du fichier template.css qui se trouve donc /templates/protostart/css/
Mais le bouton a conservé sont apparence initiale après avoir rechargé la page

D'ou vient mon erreur ?

Merci

[phelibre]

Re : Changer le bouton "Lire la suite"

Finalement vous m'avez éclairé et j'ai mis en commentaire cette partie :
.btn {
display: inline-block;
*display: inline;
*zoom: 1;
padding: 4px 12px;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
background-color: #f5f5f5;
/*background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);*/
background-repeat: repeat-x;
/*filter: progidXImageTransform.Microsoft.gradient(startColorstr=' #ffffffff', endColorstr='#ffe5e5e5', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
*background-color: #e6e6e6;
filter: progidXImageTransform.Microsoft.gradient(enabled = false);*/
border: 1px solid #bbb;
*border: 0;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
*margin-left: .3em;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}

Qu'en pensez vous ?
Il y a certainement mieux ou à compléter ?

Cordialement,