Piwigo.org

Neutre · 2009-12-12 18:33:51

Bonjour à tous,

Y a t il un moyen simple (je dis simple car coder n'est pas à ma portée...) de modifier la bordure de l'image principale ?

En fait, je voudrais essayer ceci : garder la couleur de fond de la page de mon thème (floPure Grey-plastic) tout en créant une fine bordure noire et une large blanche. Le cadre de LLGBO un peu trop composite a mon gout et ne me convient pas trop.
Une recherche dans le forum renvoie en général à des discussions autour d'une seule bordure.

[A vrai dire, je n'arrive pas, malgré mes recherches à retrouver comment modifier la seule bordure unique. Pourtant, je me rappelle avoir fait différents essais. C'est dire si mon cas est désespéré...]

Dernière modification par Neutre (2009-12-12 18:38:57)

Gotcha · 2009-12-12 18:45:35

Etant donné que je suis une bille moi aussi dans ce domaine, je ne t'apporterai pas la solution mais mon avis c'est que c'est possible.
CSS + peux-être un template-extension (pour le multi-bordures = multi-contenants).

Regardes un peux => ici.

Neutre · 2009-12-12 18:53:21

Gotcha a écrit:
Etant donné que je suis une bille moi aussi .................
Regardes un peux => ici.

Merci Gotcha, mais une bille, non, tu es trop modeste (d'ailleurs un réalisateur de plugin ne pas être une bille, par définition) !
Sinon, s'avais cherché dans le wiki mais il renvoie à LLGBO 2 que je ne sais pas modifier.

Gotcha · 2009-12-12 18:55:23

Par contre, en modifiant l'affichage avec une bordure, quid de tes photos qui seraient déjà encadrées ...
Ca ne risque pas de te poser un problèmes ?

grum · 2009-12-12 19:02:39

A première vue avec ce template, tu ne peux pas le faire uniquement par CSS.

Il te faut un template personnel qui contiendra çà :

Code:

{if isset($high) }
<a href="javascript:phpWGOpenWindow('{$high.U_HIGH}','{$high.UUID}','scrollbars=yes,toolbar=no,status=no,resizable=yes')">
{/if}
  <div id="theImgContainer">
    <img id="theImg" src="{$SRC_IMG}" style="width:{$WIDTH_IMG}px;height:{$HEIGHT_IMG}px;" alt="{$ALT_IMG}"
      {if isset($COMMENT_IMG)}
        title="{$COMMENT_IMG|strip_tags:false|replace:'"':' '}" {else} title="{$current.TITLE|replace:'"':' '} - {$ALT_IMG}"
      {/if}>
  </div>
{if isset($high) }
</a>
  <p>{'picture_high'|@translate}</p>
{/if}

Puis dans le CSS il te faudra :

Code:

#theImage img {
   border:1px solid #000000;
}
#theImgContainer  {
   border:8px solid #d3d3d3;
}

A adapter selon les couleurs/épaisseurs souhaitées.

Je n'ai pas testé, à vérifier sur un site de test avant ;-)

Neutre · 2009-12-12 19:03:38

En fait, elle ne sont quasiment pas encadrées nativement, sauf quelque unes lors de mes débuts (récents) sur le web ;-)

Neutre · 2009-12-12 19:06:12

grum a écrit:
A première vue avec ce template, tu ne peux pas le faire uniquement par CSS.
Il te faut un template personnel

Trop fort Grum ! Je n'ai pas le temps de répondre à Gotcha que tu proposes une solution :-))

Donc si j'ai bien compris, je rentre le code dans my-picture.tpl (que j'ai déjà) et je modifie le css (euh, celui du thème ?)

Dernière modification par Neutre (2009-12-12 19:08:09)

Gotcha · 2009-12-12 19:11:46

@Grum, je viens d'essayer et ça le cadre prend toute la taille de la zone. Si tu veux, il ne s'adapte pas à la photo.

[EDIT]
Je n'ai rien dit...

Dernière modification par Gotcha (2009-12-12 19:14:26)

grum · 2009-12-12 19:13:17

Il te faut plutôt un my-picture_content.tpl pour remplacer picture_content.tpl

Gotcha · 2009-12-12 19:26:50

Voilà ce que j'obtiens (CF Capture)

[EDIT]
La capture arrive en retard ^^

Dernière modification par Gotcha (2009-12-12 19:29:12)

grum · 2009-12-12 19:26:55

Gotcha a écrit:
@Grum, je viens d'essayer et ça le cadre prend toute la taille de la zone. Si tu veux, il ne s'adapte pas à la photo.

[EDIT]
Je n'ai rien dit...

tu as raison.... ^^;

je regarde comment résoudre ce cas... :o)

Gotcha · 2009-12-12 19:30:24

A quoi il sert au fait picture_content.tpl ?
Je veux dire, vis à vis de picture.tpl...

Neutre · 2009-12-12 19:38:54

Pour ma part, j'obtiens bien le primier cadre (noir dans mon cas) mais pas le deuxième (blanc).
J'ai bien remplacé le picture qui est content par le mien modifié par le nouveau code et modfié le theme.css de grey-plastic (theImage modifié et ajouté theImgContainer)
En fait, le deuxième cadre existe bien car il éloigne (ou rapproche) l'image du haut de la page selon que je l'agrandisse ou diminue dans le theme.css, mais il est, en quelque sorte, transparent (FFFFFF en fait)

Dernière modification par Neutre (2009-12-12 19:48:26)

grum · 2009-12-12 19:40:14

picture, c'est toute la page (la barre de navigation, les miniatures prec/suiv, les commentaires, les infos...)
picture_content, c'est juste l'image et sa description.

Donc le truc exact à faire au niveau du css c'est :

Code:

#theImgContainer {
display:table;
margin:auto;
border:8px solid #d3d3d3;
}

#theImage img {
border:1px solid #000000;
margin-bottom:-4px;
}

et cette fois çà marche ^_^
(cf. capture)

Gotcha · 2009-12-12 20:03:29

Chez moi, sur Sylvia ça fonctionne :-)
Merci Grum.

Encore une bonne astuce ! :-p

Piwigo.org

Annonce

#1 2009-12-12 18:33:51

[Résolu] Modifier la bordure d'image

#2 2009-12-12 18:45:35

Re: [Résolu] Modifier la bordure d'image

#3 2009-12-12 18:53:21

Re: [Résolu] Modifier la bordure d'image

Gotcha a écrit:

#4 2009-12-12 18:55:23

Re: [Résolu] Modifier la bordure d'image

#5 2009-12-12 19:02:39

Re: [Résolu] Modifier la bordure d'image

Code:

Code:

#6 2009-12-12 19:03:38

Re: [Résolu] Modifier la bordure d'image

#7 2009-12-12 19:06:12

Re: [Résolu] Modifier la bordure d'image

grum a écrit:

#8 2009-12-12 19:11:46

Re: [Résolu] Modifier la bordure d'image

#9 2009-12-12 19:13:17

Re: [Résolu] Modifier la bordure d'image

#10 2009-12-12 19:26:50

Re: [Résolu] Modifier la bordure d'image

#11 2009-12-12 19:26:55

Re: [Résolu] Modifier la bordure d'image

Gotcha a écrit:

#12 2009-12-12 19:30:24

Re: [Résolu] Modifier la bordure d'image

#13 2009-12-12 19:38:54

Re: [Résolu] Modifier la bordure d'image

#14 2009-12-12 19:40:14

Re: [Résolu] Modifier la bordure d'image

Code:

#15 2009-12-12 20:03:29

Re: [Résolu] Modifier la bordure d'image

Pied de page des forums