Piwigo.org

Eric · 2007-01-03 17:22:02

Salut à tous et meilleurs voeux pour 2007 !

En parlant de voeux, une petite suggestion pour l'extension News 5.0.2 :

Par défaut, la Mod installe le cadre des news en dessous des représentations de catégories. Hors, lorsque l'on dispose d'un nombre conséquent de catégories (comme moi), l'intérêt des news en fin de page devient rapidement limité.

Il est possible de "déplacer" ce cadre de news en tête de galerie (comme je l'ai fait sur mon site - voir lien en signature) en modifiant l'insertion du code "Mod News" dans le fichier PWG/Template/yoga/index.tpl.

Problème : Le cadre ainsi déplacé n'est plus du tout centré par rapport à l'ensemble. J'ai tenté plusieurs essais d'adaptation sans succès. Faut dire que je ne suis pas une flèche en CSS.

Ce problème a déjà été soulevé pour les versions 3 et 4 de cette Mod mais resté sans solution à ce jour (ou alors j'ai oublié la modération éthylique lors des fêtes et j'ai raté quelque chose ;-)).

Si Nicco ou quelqu'un d'autre a une solution à me proposer...

Nicco · 2007-01-03 22:35:23

Salut je viens de voir ton voeux de l'année 2007 ;o)

bon je ne sais pas trop ce que ca donne pour les autres mais moi j ai pas le meme resultat que toi !!!

jete un oeil sur mon site !

Nicco · 2007-01-03 22:37:41

voici le debut de mon fichier index.tpl :

Code:

<!-- $Id: index.tpl 1386 2006-06-24 09:19:40Z chrisaga $ -->
{MENUBAR}





<!-- BEGIN news -->
  <div id="content">
  <h2><a href="{news.U_NEWS}" title="{news.L_HINT_NEWS}">{news.L_NEWS_TITLE}</a></h2>
      <table class="tablecompact">
        <!-- BEGIN a_news -->
        <tr class="newsThrow">
          <td class="newsTitle">
          {news.a_news.TITLE}
          </td>
          <td class="newsInfo">
          <span class="newsAuthor">{news.a_news.NEWS_AUTHOR}</span> - <span class="newsDate">{news.a_news.NEWS_DATE}</span>
          </td>
        </tr>
        <tr >
          <td class="newsContent" colspan="2">
          <!-- BEGIN no_news_translation -->
          <div class="newsNoTranslation">({L_NO_NEWS_TRANSLATION})</div>
          <!-- END no_news_translation -->
          {news.a_news.CONTENT}
          <!-- BEGIN read_more -->
          <a class="newsReadMoreLink" href="{news.a_news.read_more.URL}" title="{L_READ_MORE}">({L_READ_MORE})</a>
          <!-- END read_more -->
          </td>
        </tr>
        <!-- END a_news -->
      </table>
    <br />
</td>
</div> <!-- content -->
<!-- END news -->







<div id="content">
  <div class="titrePage">
    <ul class="categoryActions">

si ca peut t aider ???

a+

Eric · 2007-01-04 02:54:54

Salut Nicco.

Effectivement, en plaçant le bloc News avant ou après le <div id="content"> ... </div> , il n'y a pas de problème d'alignement. Seulement, moi, je souhaite que les news s'affichent entre la barre marquée "Accueil" et les vignettes. Mon bloc news est alors positionné dans mon index.tpl après

Code:

  <!-- BEGIN calendar -->
  <h2>{calendar.TITLE}</h2>
  <!-- END calendar -->

  </div> <!-- titrePage -->

Question de gout... Perso, je trouve çà mieux. Mais le problème c'est qu'à cette position, le bloc News subit le style de <div id="content">. Ce qui empêche l'alignement centré des news. Et je n'arrive pas à trouver l'astuce pour faire en sorte d'obtenir le même résultat d'alignement que toi à cette place.

VDigital · 2007-01-04 06:42:35

Cela me fait penser à une margin-left qui mériterait d'être réduite à 1em environ.
Je n'ai pas de news... 8-)

Nicco · 2007-01-04 09:32:22

alors la evidement ... c est plus vraiment de l evolution du mod mais de la modif perso dans le mod car moi je suis un gros blairrrr en css desole

il faut supplier les guru du css :o)

a+

Eric · 2007-01-04 12:54:41

VDigital a écrit:
Cela me fait penser à une margin-left qui mériterait d'être réduite à 1em environ.

Oui, je le crois aussi mais en tripotant le CSS du template yoga (clear ou dark, peut importe), cela impacte l'affichage complet du *content* de la galerie (miniatures des catégories + news).

Je cherche plutot (pas le chien de l'autre... ) une piste du coté du code CSS du Mod lui même qui permettrait de positionner correctement le cadre des news quelque soit son insertion (avant la barre *Accueil*, entre *Accueil* et les miniatures ou après les miniatures en fin de page).
Et je cherche toujours...

Nicco a écrit:
alors la evidement ... c est plus vraiment de l evolution du mod mais de la modif perso dans le mod car moi je suis un gros blairrrr en css desole

On peut considérer çà comme une adaptation perso du Mod, oui. Mais tu admettras qu'avoir un cadre de news perdu en fin de page ne présente que peut d'intérêt lorsque le visiteur doit *scroller* à mort pour y accéder. Et la position que tu as adoptée pour ton site, bien qu'elle te convienne et c'est ton choix indiscutable, peut être discutable pour d'autre.

On peut d'ailleurs en discuter, non ? 8-)

Nicco · 2007-01-04 19:02:51

houlaaaaaaaaa loin de moi l envie de NE pas discuter BIEN au contraire j adore ca ;o)

mais je suis ok pour le deplacer avant les vignettes des categories ( d ailleurs viens sur mon site tu veras ... )
par contre je ne suis pas pour l integrer dans le meme bloc !
et c est la que je dis que c est a chacun de chercher son chat ...
maintenant ce que je peux proposer c est que des que la soluce est la je l integrer en tant que choix dans le mod !!! yes ?

a+

Eric · 2007-01-04 19:25:04

:-)

Ok, çà marche pour moi. Dès que je trouve une solution à mon pb, je la poste ici... Ou quelqu'un de plus calé que moi en CSS...

VDigital · 2007-01-04 19:52:28

Eric,

Je l'ai dit et expliqué à flipflip du temps où il s'occupait du MOD News.

Tu as dans ton index.tpl:

{MENUBAR}
<div id="content">
<div class="titrePage">

.../...


<div id="content">
<h2><a href="{news.U_NEWS}" title="{news.L_HINT_NEWS}">{news.L_NEWS_TITLE}</a></h2>
<table class="tablecompact">

Tu as deux fois <div id="content"> un id doit être unique... dans une page HTML
Mais définir son propre id ou une class="news" est resté lettre morte.

Pour te dépanner, je ne suis pas sûr du résultat mais tu peux tenter déjà:

#content #content { margin-left: 1em}

Eric · 2007-01-05 17:49:28

Excellent !

Cà fonctionne parfaitement et quelque soit l'endroit où l'on désire insérer le bloc de News (tout en haut, au milieu, à la fin,...). De belles news parfaitement centrées avec le reste, c'est super !

Merci VDigital !

Nicco : Ce serait sympa d'intégrer ceci dans la prochaine révision du Mod News. Cà ne dénature en rien les utilisations existantes (comme la tienne) et garanti une intégration à la "demande du client". AMHA !

Soit, dans le fichier install.txt du Mod, remplacer pour template/yoga/theme/clear/theme.css et template/yoga/theme/dark/theme.css:

Code:

/* BEGIN News MOD */
.tablecompact
{  
  border-collapse:collapse;
}

.table2
{  
  background-color:#EEEEEE;
}


.newsThrow
{  
  height:20px;
  border-collapse:collapse;
}

.newsTitle
{
  color:#006A8F;
  font-weight:bold;
  text-align:left;
  padding-left:5px;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  border-collapse:collapse;
}

.newsInfo
{
  text-align:right;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3; 
  border-collapse:collapse;
}

.newsAuthor
{
  font-size:12px;
  text-align:right;
  color:#696969;
  font-weight:bold;
}

.newsDate
{
  font-size:10px;
  text-align:right;
  padding: 5px;
}

.newsLanguage
{
  font-weight:bold;
  color:#696969;
}


.newsContent
{
  text-align:left;
  padding: 10px;
  background-color:#EEEEEE;
}

.newsNoTranslation
{
  font-style:italic;
  color:#EEEEEE;
}

.newsMenu
{
  text-align:center;
  color:#EEEEEE;
}

.translationMenu
{
  padding-right:5px;
  padding-bottom:5px;
  text-align:right;
  color:#696969;
}

.newsMenu a, .translationMenu a
{
  color:#696969;
}

.newsReadMoreLink
{
  font-weight:bold;
}

/* Quote & Code blocks */
.code {
  font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
  background-color: #FAFAFA; border: #797979; border-style: solid;
  border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
  background-color: #d3d3d3; border: #797979; border-style: solid;
  border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link  { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}

/* General text */
.genmed { font-size : 11px; }
.genmed { color : #E0E0E0; }
a.genmed { color: #006699; text-decoration: none; }
a.genmed:hover { color: #DD6900; text-decoration: underline; }
/* END News MOD */

Par :

Code:

/* BEGIN News MOD */

#content #content { margin-left: 1em}

.tablecompact
{  
  border-collapse:collapse;
}

.table2
{  
  background-color:#EEEEEE;
}


.newsThrow
{  
  height:20px;
  border-collapse:collapse;
}

.newsTitle
{
  color:#006A8F;
  font-weight:bold;
  text-align:left;
  padding-left:5px;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3;
  border-collapse:collapse;
}

.newsInfo
{
  text-align:right;
  border-top: 1px solid #d3d3d3;
  border-bottom: 1px solid #d3d3d3; 
  border-collapse:collapse;
}

.newsAuthor
{
  font-size:12px;
  text-align:right;
  color:#696969;
  font-weight:bold;
}

.newsDate
{
  font-size:10px;
  text-align:right;
  padding: 5px;
}

.newsLanguage
{
  font-weight:bold;
  color:#696969;
}


.newsContent
{
  text-align:left;
  padding: 10px;
  background-color:#EEEEEE;
}

.newsNoTranslation
{
  font-style:italic;
  color:#EEEEEE;
}

.newsMenu
{
  text-align:center;
  color:#EEEEEE;
}

.translationMenu
{
  padding-right:5px;
  padding-bottom:5px;
  text-align:right;
  color:#696969;
}

.newsMenu a, .translationMenu a
{
  color:#696969;
}

.newsReadMoreLink
{
  font-weight:bold;
}

/* Quote & Code blocks */
.code {
  font-family: Courier, 'Courier New', sans-serif; font-size: 11px; color: #006600;
  background-color: #FAFAFA; border: #797979; border-style: solid;
  border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}

.quote {
  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #444444; line-height: 125%;
  background-color: #d3d3d3; border: #797979; border-style: solid;
  border-left-width: 1px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px
}


/* The content of the posts (body of text) */
.postbody { font-size : 12px;}
a.postlink:link  { text-decoration: none; color : #006699 }
a.postlink:visited { text-decoration: none; color : #5493B4; }
a.postlink:hover { text-decoration: underline; color : #DD6900}

/* General text */
.genmed { font-size : 11px; }
.genmed { color : #E0E0E0; }
a.genmed { color: #006699; text-decoration: none; }
a.genmed:hover { color: #DD6900; text-decoration: underline; }
/* END News MOD */

Après çà, chaque utilisateur du Mod peut positionner le bloc News où il le souhaite. Voir le résultat sur mon site.

Nicco · 2007-01-05 19:07:27

stop stop stop !!!

vous pouvez me dire exactement vers quoi je dois aller ...
car je ne vois pas les modifs demandé par vdigital ici

pour moi vincent parle du div id content donc il faudrai revoir ca non mais je dois faire koi exactement ??

et sinon pour les 2 css on les changera en consequence ...

a+

VDigital · 2007-01-05 20:01:57

Nicolas,

Pour bien faire:
1 - Repère dans les css toutes les directives qui s'adressent à #content

2 - Certaines seulement seront à dupliquer sous #news par exemple.

3 - A dupliquer:
- sauf là où tu verras: margin ou margin-left, il faudra faire un changement sur les valeurs. mais je peux d'aider mais une recherche rapide sur le w3c, t'aidera aussi bien.
- sauf encore toute directive fille.

exemples:
BODY#thePasswordPage #content à dupliquer si ton bloc apparaitra sur la page de demande de password
#content FORM tu ne dupliqueras pas à moins que tu imagines avoir besoin de la balise form dans ton bloc

J'espère que cela te suffira.
8-)

PS: Ci-dessous quelques conseils...

Comment cela se lit:

BODY#thePasswordPage #content
La balise BODY qui a l'id="#thePasswordPage" pour tous les éléments de ce BODY qui ont un id="#content" on appliquera...

et
#content FORM
Les éléments qui ont l'id="#content" pour toute balise FORM incluse on appliquera...

Les directives s'engrangent la dernière qui parle a raison.
Par contre les navigateurs ne les interprètent pas tous de la même façon malheureusement.
IE 6 par exemple ne respecte pas les standards du W3C (le contraire serait étonnant).
Mais pire que ça, là où IE 6 était à peu près conforme, IE 7 ne l'est plus ET bien entendu certains non respects de IE 6 sont maintenant respecté par IE7. Seule solution tester et à chaque mauvaise surprise, chercher le paramètre qui convient le mieux au maximum de navigateur, trouver les paramètres qui corrigent pour chaque navigateur en faute. Faire des css d'exception qui agissent en dernier (avant on mettait en place des Hacks mais le remède était parfois pire que le mal).
Je n'en dirai pas plus.
Bon courage.

Piwigo.org

Annonce

#1 2007-01-03 17:22:02

News 5.0.2b - Evolution à envisager ?

#2 2007-01-03 22:35:23

Re: News 5.0.2b - Evolution à envisager ?

#3 2007-01-03 22:37:41

Re: News 5.0.2b - Evolution à envisager ?

Code:

#4 2007-01-04 02:54:54

Re: News 5.0.2b - Evolution à envisager ?

Code:

#5 2007-01-04 06:42:35

Re: News 5.0.2b - Evolution à envisager ?

#6 2007-01-04 09:32:22

Re: News 5.0.2b - Evolution à envisager ?

#7 2007-01-04 12:54:41

Re: News 5.0.2b - Evolution à envisager ?

VDigital a écrit:

Nicco a écrit:

#8 2007-01-04 19:02:51

Re: News 5.0.2b - Evolution à envisager ?

#9 2007-01-04 19:25:04

Re: News 5.0.2b - Evolution à envisager ?

#10 2007-01-04 19:52:28

Re: News 5.0.2b - Evolution à envisager ?

#11 2007-01-05 17:49:28

Re: News 5.0.2b - Evolution à envisager ?

Code:

Code:

#12 2007-01-05 19:07:27

Re: News 5.0.2b - Evolution à envisager ?

#13 2007-01-05 20:01:57

Re: News 5.0.2b - Evolution à envisager ?

Pied de page des forums