Personnalisation du thème water_drop

[triclair]

Suite à l'excellent support apporté hier sur mon problème de dates, je me lance sur une autre question   !

Voilà, j'utilise le thème water_drop (voir ici). Je galère pour personnaliser ce thème   (notament les couleurs de fond que je n'arrive pas à repérer dans la feuille de style).

Il y a énormément d'éléments dans cette css et je n'ai pas trouvé de guide.

Alors, plutôt que tatonner pendant des heures, si vous avez des tuyaux ou les références d'une doc sur ce thème... ça m'intéresse !

[Pascal YAP]

Triclair,

plutôt que tatonner pendant des heures, si vous avez des tuyaux ou les références d'une doc

Il y a beaucoup d'éléments capitaux dans les CSS des Thèmes Coppermine, plutôt que d'en citer au hasard, il serait mieux de nous signaler quels éléments visibles sur ta surface écran tu désires modifier !

  La première CLASS qui saute aux yeux dans le CSS c'est BODY ou BACKGROUND ce passe de commentaires 

Pascal

[chtito]

À ma connaissance il n'y a pas de bons guides pour personnaliser sa gallerie. À dire vrai, le système de thèmes de coppermine n'est pas vraiment au point. Les feuilles de styles ne sont que modérément utilisées, et le fichier theme.php est long et difficile à personnaliser.

J'ai mis au point un thème dont le fichier theme.php est beaucoup moins long (car toute la personnalisation est faite en css) mais du coup, le fichier style.css devient vraiment énorme . Ce thème sera disponible à la sortie de la prochaine version de coppermine (1.4).

Bon courage quand même !

[triclair]

Merci pour ces réponses.
Pour préciser ma demande, sur la copie d'écran ci-dessous, j'ai mis un coup d'aérographe rouge sur les zones dont je voudrais changer la couleur.
(https://coppermine-gallery.com/forum/proxy.php?request=http%3A%2F%2Fwww.triclair.com%2Fforum%2Fdocuments%2Fecran-coppermine.jpg&hash=38b9125ac3d9c526a7c9753354afc96d45eb056f)

[Pascal YAP]

Triclair,

Pour répondre à ce message, voici ce que j'ai fait.

Tous les internautes désirant modifier les CSS peuvent faire la même chose.

1/ J'ai fait une capture d'écran du navigateur avec le Theme Water-Drop
2/ J'ai ouvert PaintShop et coller la Capture d'écran, et mesuré avec l'outil DROPPER les valeurs hexadecimal des couleurs de ce Theme
3/ Avec un éditeur de texte de base, j'ai ouvert STYLE.CSS et recherché les valeurs trouvées sous PaintShop !
C'est hyper simple à faire, et cela va vous demander le même temps qu'à moi-même !!

Si je reprends ta capture d'écran de haut en bas, cela va t'obliger à éditer :
Attention, je n'ai pas tout recherché !

Code Select Expand

body {
      /* background: url("images/bg.gif"); */
      /*  background-color: #f2f5f7; */
background-color: White;
font-family: "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
font-size : 12px;
color: #000666;
margin: 0px;
}
puis

Code Select Expand

.tableh1 {  background : Black;
}
puis

Code Select Expand

.tableh2 {
       background: #66FF00;
}
puis

Code Select Expand

.tableh2_compact {
       background: #66FF00;
}
puis

Code Select Expand

.thumbnails {
       background: #66FF00;
       padding: 5px;
}
puis

Code Select Expand

bon courage !

Pascal

[triclair]

  Merci ! Mais je suis déjà plus ou moins passé par ces étapes sans arriver à repérer les class à modifier !

En désespoir de cause, j'ai même fait un rechercher/remplacer de tous les FFFFFF pour les changer en FFFFCC dans la CSS. Je me suis dit que comme ça, ce fond blanc allait bien disparaître !!! Eh ben non !

J'ai dû foirer quelque part (d'ailleurs, à la réflexion, le fond blanc que je cherche à remplacer n'est peut-être pas si blanc que ça  :-\\). Je vais revoir ma copie et je vous tiens au courant.

Au fait, pour trouver les code hexa des couleurs, j'utilise un freeware qui s'appele Pixies qui donne directement l'info (pas besoin de passer par une copie d'écran). Voilà, si ça peut servir à d'autres...

[Pascal YAP]

Triclair,

ATTENTION il y a un truc tout bête qui pourrait t'empêcher de vor tes modifs, as-tu modifier la ligne suivante en GRAS-ROUGE dans le fichier TEMPLATE.HTML de ton THEME.

..
<meta http-equiv="Pragma" content="no-cache" />
{META}
<link rel="stylesheet" href="themes/TON-THEME/style.css" />
..

Pascal

[chtito]

Une façon très facile de repérer quelles classes css sont utilisées est d'utiliser Firefox en y ajoutant l'extension web developer.

[Pascal YAP]

Chtito,

Oui, excellent lien pour les possesseur de FIREFOX, comme moi depuis peu !
Justement pour ce genre de fonctionnalités très sympathiques, que l'on ne trouve pas chez d'autres plus "massif" 
Les CSS n'ont plus de secret !

Je citerai aussi le célébrissime CSS TopSTYLE 3.10 de Bradbury Software. TOP 

Pascal

[triclair]

ATTENTION il y a un truc tout bête qui pourrait t'empêcher de vor tes modifs, as-tu modifier la ligne suivante en GRAS-ROUGE dans le fichier TEMPLATE.HTML de ton THEME.

Le template pointe bien sur la bonne CSS. Mais en vérifiant, j'ai trouvé une partie de la solution   !

Template.htm :

<body>
<table width="100%" height="100%" border="0" cellpadding="20" cellspacing="20">
<tr>
       <td valign="top" bordercolor="#666666" bgcolor="#FFFFCC" style="border: 1px solid #ccd7e0; background-color: #FFFFCC;">

Bon, ça progresse... Le truc avec Firefox va sûrement m'aider aussi.

Merci pour tout en tous cas !  

[Pascal YAP]

Triclair,

Mais en vérifiant, j'ai trouvé une partie de la solution

 Template.htm :

<body>
<table width="100%" height="100%" border="0" cellpadding="20" cellspacing="20">
<tr>
       <td valign="top" bordercolor="#666666" bgcolor="#FFFFCC" style="border: 1px solid #ccd7e0; background-color: #FFFFCC;">

Je te prie de bien vouloir accepter nos remerciements pour ce TIP's !!!
Franchement ? ce n'est pas ce qui est le plus simple, qui est le plus délicat à trouver ? On rigole bien

Pascal

[triclair]

Effectivement, c'est ce qui crève les yeux qui est le plus dur à trouver !

Sinon, je viens d'installer Firefox + web developer : c'est génial   !

Pour ceux qui veulent essayer : clic droit sur la page - web developer - information - Display Id & Class details. Et là, c'est magique ! On visualise précisément où sont les Class.

Donc, encore un problème SOLVED en ce qui me concerne !

Merci les gars.