Besoin d'aide pour placer les "css-sprites"

**bonbon** · 08/04/2018, 17h37

bonjour a tous,
Je veux installer des css-sprites,
Où mettre l'image "css-sprites combined"
Où mettre le fichier css-sprites.css
Où mettre les codes pour le style
et le code pour "body" rn sachant que je n'ai pas l'index html

Merci d'avance

**Body194** · 08/04/2018, 21h16

Bonsoir

sans voir ton code dure de te donné un coup de main

je peux toujours te dire que ton code css dois etre dans additional css de ton style

**bonbon** · 08/04/2018, 22h06

Envoyé par Body194

Bonsoir

sans voir ton code dure de te donné un coup de main

je peux toujours te dire que ton code css dois etre dans additional css de ton style

Merci de m'avoir répondu aussi vite,
Voici l'exemple du code css

.css-sprite-arrow
{
background:url('css-sprite-combined.png.png') -10px -83px;
width:15px;height:21px;
}

que j'ai placé dans additional comme vous me l'avez dit

mon image comporte le nom de css-sprite-combined.png.png
je voudrais savoir où est-ce que je peut placer cette image

et j'ai également ce code html ou je ne sais pas non plus où le placer

<html>
<head>

<style>
.css-sprite-arrow
{
background:url('css-sprite-combined.png.png') -10px -83px;
width:15px;height:21px;
}
</style>
</head>

et ce code aussi
<body>
<div style="display:inline-block;" class="css-sprite-arrow"></div>

</body>
</html>

Merci de votre aide !

***Ombre*** · 11/04/2018, 18h52

Bonsoir,

Sujet déplacé, car le salon ne sert pas au support.

L'emplacement du CSS est à mettre effectivement dans le template additional.css

La partie HTML n'est pas correct, si tu compte ajouter du HTML dans un template spécifique ou tu vises l'ajout, il faut mettre que la partie HTML sans la partie BODY ET HTML, ces balises étant déjà en place, tu risques d'invalider ton style au norme w3c et en plus engendrer des problèmes d'affichages.

Le contenu de la balise STYLE, c'est du CSS, que tu as déjà ajouté dans le template additional.css, donc inutile de le remettre dans le template HTML. Et juste pour info si tu utilises le template additional.css il ne devrais pas avoir de CSS dans la partie HTML il suffit juste de créer une class au conteneur afin de la cibler.

Après sans plus d'infos sur ce que tu veux faire c'est pas évident.

**bonbon** · 14/04/2018, 16h13

Merci ombre

je confirme les CSS à mettre que dans le template additional.css
j'ai modifié les class

Example pour image (navbithome)
navbar

<li class="navbithome"><a href="index.php{vb:raw session.sessionurl_q}" accesskey="1"><img src="{vb:stylevar imgdir_misc}/navbit-home.png" width="12" height="12" alt="{vb:rawphrase home}" /></a></li>

par

<li class="css-sprite-navbit-home"><a href="index.php{background:url('css-sprite-combined.png.') -359px -92px;
width:12px;height:12px;"alt="{vb:rawphrase home}" /></a></li>

et j arrive pas a trouver l'emplacement des class pour les image suivante

images/gradients/selected-tab-gradient-with-top-alpha.png

images/gradients/gradient-grey-down.png

style par défaut

Merci de votre aide !

***Ombre*** · 14/04/2018, 17h02

Regarde pour les class que tu trouves pas dans le template stylegenerator.css par contre il est préférable d'utiliser la priorité de template pour modifier un style histoire d'avoir toujours une base d'origine, en gros si tu ajoutes une class existante avec tes nouveaux attributs de class CSS donc remplacement d'images, dans le template additional.css, cela aura pour effet d'annuler la class d'origine et de faire apparaitre celle que tu ajoutes.

En gros, si dans le template test.css j'ai cette class d'origine du style:

Code:

.css-sprite-arrow
{
background:url('css-sprite-combined.png.png') -10px -83px;
width:15px;height:21px;
}

Et que j'ajoute cette class avec le même nom de class dans le template additional.css:

Code:

.css-sprite-arrow
{
background:url('css-mon-image.png') -19px -80px;
width: 30px;height: 12px;
}

Et bien la class de base sera désactivé et celle que tu ajoutes apparaitra, c'est juste une histoire d'ordre de lecture.

**bonbon** · 14/04/2018, 18h31

bonsoir
j'ai fait comme ca, et ca marche pas

.navtabs li.selected span.navtab {
-moz-background-clip: border;
-moz-background-inline-policy: continuous;
-moz-background-origin: padding;
background: #7192A8 url('css-sprite-combined.png.png') -495px -0px;
width:50px;height:104px;
repeat-x scroll 0 0;
color: #111111;
padding-top: 4px;
position: relative;
top: -4px;
z-index: 10;
position: relative;
top: -4px;
z-index: 10;
font-size: 10px;
}