Customisation dans un skin dérivé

digital et aqua button

Problem has been recorded

Issue description

Bonjour,

bon et bien j'ai eu beau comparer une feuille de style dérivée de Digital, et celle de Digital elle-même, en 8.3, impossible d'obtenir le même effet bouton "aqua". 4400 lignes de codes et des poussières

Ce que je peux en voir dans la feuille de style originale :

Digital original

a.button { /* a link that mimic a form button -- [button]url[/button], label */


display: -moz-inline-box; /* mandatory for firefox 2 */
display: inline-block;
cursor: pointer;
border: none;
font-size: 0;
font-style: normal;
text-decoration: none;
color: #2e523b;
line-height: 0;
background: transparent url('images/button_yellow.png') 0 0 no-repeat;
height: 30px;
margin: 0 6px 0 0;
padding: 0 10px 0 0;
vertical-align: middle;
}
 
a.button span {
display: inline-block;
cursor: pointer;
border: none;
font-family: "Arial" !important;
font-size: 12px !important;
font-style: normal;
white-space: nowrap;
letter-spacing: 0 !important;
color: #222;
line-height: 16px;
background: transparent url('images/button_yellow.png') 100% 0 no-repeat;
height: 30px;
margin: 0 -16px 0 10px;
padding: 8px 20px 0 10px;
vertical-align: middle;
}
 
 
span.button { /* a button in a form */
display: -moz-inline-box; /* mandatory for firefox 2 */
display: inline-block;
cursor: pointer;
border: none;
font-size: 0;
font-style: normal;
text-decoration: none;
color: #2e523b;
line-height: 0;
background: transparent url('images/button_yellow.png') 0 0 no-repeat;
height: 30px;
margin: 0 6px 0 0;
padding: 0 10px 0 0;
vertical-align: middle;
}
 
span.button button {
display: -moz-inline-box;
display: inline-block;
cursor: pointer;
border: none;
font-family: "Arial" !important;
font-size: 12px !important;
font-style: normal;
white-space: nowrap;
letter-spacing: 0 !important;
color: #222;
line-height: 16px;
background: transparent url('images/button_yellow.png') 100% 0 no-repeat;
height: 30px;
margin: 0 -16px 0 10px;
padding: 0 20px 0 10px;
vertical-align: text-top;
}
 
a.button:hover,
span.button:hover {
background-position:0 -60px;
color:#222;
text-decoration:none;
}
 
a.button:hover span,
span.button:hover button {
background-position:100% -60px;
}
 
a.button:active span, span.button:focus button {
color:#444;
}

Mais rien à faire, ça suffit pas.

Est-ce qu'il y a autre chose à rechercher, dans template.php par exemple ?

Comments

Lasares from L'Île-Bizard à Montréal, Québec 697 posts	on Jul. 6 Regarde si dans ta feuille de style dérivé tu n'as pas une autre instance de `button`, peut-être avec une spécificité supérieure, quelque chose comme `#myid button` ou `.myclass button`. Il faut savoir qu'en CSS la règle qui s'applique est celle qui a le plus de "poids" et que chaque sélecteur ajoute du poids, les ID plus encore que les CLASS. Alors si, dans la feuille de style dérivé, tu as une seconde instance du sélecteur `button` qui a plus de poids, c'est elle qui s'appliquera, remplaçant celle copiée de la feuille de style de référence, peu importe leur ordre de décalaration. À poids égal, la dernière décalaration a préséance. ----- On a si peu d'idée de ce qui est possible...
Moi-même from Entre chaise et clavier... 1387 posts	on Jul. 6 De button, tout ce que j'ai dans ma feuille dérivée actuellement est : Click to fold/unfold a.button { /* a link that mimic a form button -- [button]url[/button], label / border-color: #dcdcdc #696969 #696969 #dcdcdc; border-style: solid; border-width: 2px; text-align: center; padding: 4px; line-height: 2em; } a.button, a:visited.button { background-color: #c0c0c0; color: #202020; text-decoration: none; } a:active.button { / click on button / background-color: #cfcfcf; color: #202040; border-color: #696969 #dcdcdc #a9a9a9 #696969; } a:hover.button { / hover a button */ background-color: #cfcfcf; color: #202040; } Lorsque j'ai ajouté tout ce qui concerne a.button ainsi que les span.button issus de la feuille de style originale en 8.3, je n'ai pas eu de bug particulier, simplement le bouton n'apparaissait pas, seul le texte affiché dessus apparaîssait. Peut-être un mélange malvenu entre les `span.` et les résidus de règle tels que `a:` ----- Râââ mais... c'te bête sur l'écran..pffff! Un parasite d'animal poilu encore. Annuaire des sites YACs (new) Plugin Firefox de recherche dans Yetanoz Nouvelles fonctions suggérées
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	on Jul. 6 Pourquoi as-tu supprimé `display: inline-block;` ? Rajoute cette règle (et l'autre `display` pour FF2 qu'on trouvait dans la feuille originale) pour voir si ça ne règlerait pas ton problème. ----- On a si peu d'idée de ce qui est possible...
Moi-meme from Entre chaise et clavier... 1387 posts	on Jul. 8 Ce n'est pas moi qui l'ai supprimé, mais yacs qui le transforme lorsqu'on l'insère entre des [ code ][ /code ] ... (parce que le CSS contient des codes yacs qui sont interprétés ici, je les ai pas enlevés) Je suppose que tu parles de display: -moz-inline-box; /* mandatory for firefox 2 / et de display: inline-block;* aux lignes 1913 et 1915 du CSS original. Si c'est le cas, je les ai bien dans ma feuille dérivée. Et j'ai compris mon erreur, mais alors l'erreur du mec qui a la tête dans le guidon en fait... Je le dis, je le dis pas ? Je recommence. Voilà ma feuille dérivée : Click to fold/unfold a.button { /* a link that mimic a form button / display: -moz-inline-box; / mandatory for firefox 2 / display: inline-block; cursor: pointer; border: none; font-size: 0; font-style: normal; text-decoration: none; color: #2e523b; line-height: 0; background: transparent url('images/button_yellow.png') 0 0 no-repeat; height: 30px; margin: 0 6px 0 0; padding: 0 10px 0 0; vertical-align: middle; } a.button span { display: inline-block; cursor: pointer; border: none; font-family: "Arial" !important; font-size: 12px !important; font-style: normal; white-space: nowrap; letter-spacing: 0 !important; color: #222; line-height: 16px; background: transparent url('images/button_yellow.png') 100% 0 no-repeat; height: 30px; margin: 0 -16px 0 10px; padding: 8px 20px 0 10px; vertical-align: middle; } span.button { / a button in a form / display: -moz-inline-box; / mandatory for firefox 2 / display: inline-block; cursor: pointer; border: none; font-size: 0; font-style: normal; text-decoration: none; color: #2e523b; line-height: 0; background: transparent url('images/button_yellow.png') 0 0 no-repeat; height: 30px; margin: 0 6px 0 0; padding: 0 10px 0 0; vertical-align: middle; } span.button button { display: -moz-inline-box; display: inline-block; cursor: pointer; border: none; font-family: "Arial" !important; font-size: 12px !important; font-style: normal; white-space: nowrap; letter-spacing: 0 !important; color: #222; line-height: 16px; background: transparent url('images/button_yellow.png') 100% 0 no-repeat; height: 30px; margin: 0 -16px 0 10px; padding: 0 20px 0 10px; vertical-align: text-top; } a.button:hover, span.button:hover { background-position:0 -60px; color:#222; text-decoration:none; } a.button:hover span, span.button:hover button { background-position:100% -60px; } a.button:active span, span.button:focus button { color:#444; } Elle est parfaite. Y'avait plus qu'à mettre effectivement button_yellow.png* dans `images/` Pas tapé ! ----- Râââ mais... c'te bête sur l'écran..pffff! Un parasite d'animal poilu encore. Annuaire des sites YACs (new) Plugin Firefox de recherche dans Yetanoz Nouvelles fonctions suggérées
Lasares from L'Île-Bizard à Montréal, Québec 697 posts	on Jul. 8 Dis donc, t'es distrait, mais t'es matinal. Ce n'est même pas encore l'heure de mon dodo ici ! ----- On a si peu d'idée de ce qui est possible...
Moi-meme from Entre chaise et clavier... 1387 posts	on Jul. 8 Plutôt noctambule... et puis tellement de boulot que j'en néglige le sommeil. Dut dur la préparation des vacances ----- Râââ mais... c'te bête sur l'écran..pffff! Un parasite d'animal poilu encore. Annuaire des sites YACs (new) Plugin Firefox de recherche dans Yetanoz Nouvelles fonctions suggérées

6 comments

Tags: buttons aqua digital

Rate this page
Posted by Moi-même on Jul. 6, commented by Moi-meme on Jul. 8, (popular)