phpBB-fr.com

[tigran]

Bonjours,
Enfaite je veut que le style *milk way* aie le même système d'icônes que celui du style *prosilver*
C'est à dire quand ont passe la sourie dessu la 2 ième image monte


Il faut faire un réglage au niveau du CSS, mais le problème je n'est pas de class pour donnée les valeurs
Quelqu'un aurait une idée ?

Voici avec firebug:
Image
- image mise en lien par Morgyanne -
Motif :

Afin d'obtenir une navigation optimale pour tous, il est fortement déconseillé d'inclure dans vos messages, des images dont la taille en largeur et/ou hauteur dépasse 500 pixels et dont le poids dépasse 150 ko. Ces messages seront susceptibles d'être édités par les modérateurs, et ceci, sans aucun appel.

[micka76]

Bonjour,

Oui j'ai bien mon idée pour le faire avec du css mais y a du taf
par ce qu'as l'heure actuel ce n'est pas prévu par subsilver2, il faut passer par du javascript

en tout premier il faudrait que tu ais tes images (c'est le point de départ) et ensuite viendras le codage

A bientôt...

[tigran]

Ok merci je voie mieux
Mais c'est bizzard que le style milky way utilise du javascript car je ne voie aucun effet au niveau des boutons etc ...

Pouvez vous me montrez un exemple avec du CSS

Dans le dossier template je regard les 3 fichier en java ... Mais je ne voit pas ou pourrai être les boutons (enfain c'est un peu du charabia )

[micka76]

il n'y en a pas

a l'heure actuel ce n'est pas prévu par subsilver2, il faut passer par du javascript

celui ci par ex ==> twilightBB ou celui la ==> AeroBlue tous deux utilisent différents moyen pour le survol (css) et celui ci en javascript ==> X-Treme

[tigran]

Au final je croie je vais laissé tombé... car faudrait tout re-modifié ... au pire voire comment marche ce script ... mais c'est une autre histoire
En gros le mieux c'est de choisir le meilleurs style du début au lieu de ce rendre fou
--------------------------------------------------------------------------------------------------------------------------------

Merci micka76 j'ai regardez le X-xtrême style donc :
J'ai essayé de prendre le code php(java) du X-Trême Mais ca na pas marcher (le boutton s'affiche mais il n'y a pas l'effet attendu)

Pourtant il n'est vraiment pas compliqué, je me demande ou j'ai pu me trompé ...



Celui de X-trême :

Code: Tout sélectionner

         </script>
         <!-- ELSE -->
         <a
             href="{U_POST_REPLY_TOPIC}"
             onmouseover = "rollover('post_reply')"
             onmouseout  = "rollout('post_reply')"
             ><img
             src="{T_THEME_PATH}/images/buttons/post_reply1.png"
             name="post_reply"
             alt="Post Reply" border="0"
             height="45" width="120"
             /></a>
         <script type="text/javascript">
         <!--
         setrollover("{T_THEME_PATH}/images/buttons/post_reply2.png");
         //-->
         </script>
         <!-- ENDIF -->
         <!-- ENDIF -->
         <!-- ENDIF -->

Le modifier :

Code: Tout sélectionner

         <a
             href="{U_POST_BUTTON_REPLY_TOPIC}"
             onmouseover = "rollover('button_topic_reply')"
             onmouseout  = "rollout('button_topic_reply')"
             ><img
             src="{T_IMAGESET_PATH}/fr/button_topic_reply1.png"
             name="button_topic_reply"
             alt="button_topic_reply" border="0"
             height="45" width="120"
             /></a>
                     <script type="text/javascript">
         <!--
         setrollover("T_IMAGESET_PATH}/fr/button_topic_reply2.png");
         //-->
         </script>
         <!-- ENDIF -->
      <!-- ENDIF -->

[micka76]

Salut,

Tu as le script à mettre dans le fichier overall_header.html juste avant </head>

Code: Tout sélectionner

<script type="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</script>

ensuite il te faut remplacer les portions de code dans le fichier viewforum_body.html
cherche (2 fois)

Code: Tout sélectionner

         <!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
            <td align="{S_CONTENT_FLOW_BEGIN}" valign="middle"><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a></td>
         <!-- ENDIF -->

remplace par

Code: Tout sélectionner

         <!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
         <td align="{S_CONTENT_FLOW_BEGIN}" valign="middle">
         <a
          href="{U_POST_NEW_TOPIC}"
          onmouseover = "rollover('new_topic')"
          onmouseout  = "rollout('new_topic')"
          ><img
          src="{T_THEME_PATH}/images/buttons/new_topic1.png"
          name="new_topic"
          alt="New Topic" border="0"
          height="45" width="120"
          /></a>
         <script type="text/javascript">
         <!--
         setrollover("{T_THEME_PATH}/images/buttons/new_topic2.png");
         //-->
         </script>
         </td>
         <!-- ENDIF -->

et dans cette portion tu as jute a changé le nom de l'image (au besoin)
idem dans le fichier viewtopic_body.html
cherche (2 fois)

Code: Tout sélectionner

      <!-- IF not S_IS_BOT -->
         <!-- IF S_DISPLAY_POST_INFO --><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>&nbsp;<!-- ENDIF -->
         <!-- IF S_DISPLAY_REPLY_INFO --><a href="{U_POST_REPLY_TOPIC}">{REPLY_IMG}</a><!-- ENDIF -->
      <!-- ENDIF -->

remplace par

Code: Tout sélectionner

         <!-- IF not S_IS_BOT -->
         <!-- IF S_DISPLAY_POST_INFO -->
         <a
             href="{U_POST_NEW_TOPIC}"
             onmouseover = "rollover('new_topic')"
             onmouseout  = "rollout('new_topic')"
             ><img
             src="{T_THEME_PATH}/images/buttons/new_topic1.png"
             name="new_topic"
             alt="New Topic" border="0"
             height="45" width="120"
             /></a>
         <script type="text/javascript">
         <!--
         setrollover("{T_THEME_PATH}/images/buttons/new_topic2.png");
         //-->
         </script>
          <!-- ENDIF -->
         <!-- IF S_DISPLAY_REPLY_INFO --> 
         <!-- IF S_IS_LOCKED -->
         <a
             href="{U_POST_REPLY_TOPIC}"
             onmouseover = "rollover('post_reply_lock')"
             onmouseout  = "rollout('post_reply_lock')"
             ><img
             src="{T_THEME_PATH}/images/buttons/button_topic_locked.png"
             name="post_reply_lock"
             alt="Locked" border="0"
             height="45" width="120"
             ></a>
         <script type="text/javascript">
         <!--
         setrollover("{T_THEME_PATH}/images/buttons/button_topic_locked2.png");
         //-->
         </script>
         <!-- ELSE -->
         <a
             href="{U_POST_REPLY_TOPIC}"
             onmouseover = "rollover('post_reply')"
             onmouseout  = "rollout('post_reply')"
             ><img
             src="{T_THEME_PATH}/images/buttons/post_reply1.png"
             name="post_reply"
             alt="Post Reply" border="0"
             height="45" width="120"
             /></a>
         <script type="text/javascript">
         <!--
         setrollover("{T_THEME_PATH}/images/buttons/post_reply2.png");
         //-->
         </script>
         <!-- ENDIF -->
         <!-- ENDIF -->
         <!-- ENDIF -->

mais le mieux aurait été de faire pareil que le style AeroBlue qui lui est entièrement en css

[tigran]

OMG alors que je finissé le poste j'ai tout perdu ca fait ragé , j'ai la flème de tout re-ecrire mais bon ...


Alors Merci pour ton poste, je ne savait pas qu'il y avait d'autre fichier a changé...
Comme vous l'avez dit c'est mieux de changé le CSS que le PHP car il faut que je fasse pour tout les boutons (une vrai galère)



Venons au CSS

Entre les deux styles pas grande chose les différencie :
- L'emplacement des icônes sont les même (sauf en et le fr )
- Les noms des icônes sont les même oçi
- Les dans un les icônes sont en .PNG est l'autre .GIF (rien de dramatique )


Dans le CSS je vais faire le teste avec poste reply(reply-icone)
Voici les morceaux qui le concerne (peut-etre que j'en oublie d'autre ):

Code: Tout sélectionner


/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*.buttons div span      { display: none; }*/
/*.buttons div a:hover   { background-image: none; }*/
.buttons div span         { position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span   { background-position: 0 100%; }

/* Big button images */
.reply-icon span, { background: transparent none 0 0 no-repeat; }


/* Set big button dimensions */
.buttons div.reply-icon, { width: 100px; height: 30px; }


/* Set profile icon dimensions */
.reply-icon span   { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_reply.png"); }



le problème c'est que je n'ai pas de class = reply-icone donc je ne sait pas par quoi les remplacé

[micka76]

dans la stylesheet.css
il faut que tu copie tous ce qui ce trouve de la ligne 1127 à la fin
puis il faut que tu compare les fichier viewforum et viewtopic_body.html
par ex:

Code: Tout sélectionner

         <!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
            <td align="{S_CONTENT_FLOW_BEGIN}" valign="middle"><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a></td>
         <!-- ENDIF -->

est a remplacé par

Code: Tout sélectionner

         <!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
            <td align="{S_CONTENT_FLOW_BEGIN}" width="100" valign="middle">
        <div class="buttons">
         <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><span></span></a></div>
      </div>
                </td>
         <!-- ENDIF -->

[tigran]

Malheureusement le logo s'affiche un peu en haute du *nouveau* et il n'a pas d'effet...

Dans viewforum_body le code est identique donc aucun souci pour le changer

Dans le viewtopic_body j'ai ça (normalement il ne faut pas changer le REPLY_TOPIC )

Code: Tout sélectionner

      <!-- IF not S_IS_BOT -->
         <!-- IF S_DISPLAY_POST_INFO --><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>&nbsp;<!-- ENDIF -->
         <!-- IF S_DISPLAY_REPLY_INFO --><a href="{U_POST_REPLY_TOPIC}">{REPLY_IMG}</a><!-- ENDIF -->
      <!-- ENDIF -->


Il manque pas grand chose ...

[micka76]

oui tu fait pareil,
tu remplace

Code: Tout sélectionner

      <!-- IF not S_IS_BOT -->
         <!-- IF S_DISPLAY_POST_INFO --><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>&nbsp;<!-- ENDIF -->
         <!-- IF S_DISPLAY_REPLY_INFO --><a href="{U_POST_REPLY_TOPIC}">{REPLY_IMG}</a><!-- ENDIF -->
      <!-- ENDIF -->

par

Code: Tout sélectionner

        <div class="buttons">
   <!-- IF not S_IS_BOT and S_DISPLAY_REPLY_INFO -->
      <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span></a></div>
   <!-- ENDIF -->
        </div>

[tigran]

malheursement ca ne fonctionne toujours pas, les fichier viewtopic_body sont trop différente...
dans tout les cas on n'a essayé (y me manque oci un peu de connaissance dans ce domaine )
Enfin Merci quand même mika

[micka76]

trouve un pack de bouton et je te le fait

[sub60]

salut,

voila le tit tuto, sur les fichiers d'origine du style (et tester avec les boutons de prosilver)

viewforum_body
chercher 2fois (ligne 142 et 241)

Code: Tout sélectionner

<!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
            <td align="{S_CONTENT_FLOW_BEGIN}" valign="middle"><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a></td>
         <!-- ENDIF -->

remplacer par 2fois

Code: Tout sélectionner

<!-- IF S_DISPLAY_POST_INFO and not S_IS_BOT -->
            <td align="{S_CONTENT_FLOW_BEGIN}" valign="middle">
            <div class="buttons">
         <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->post-icon<!-- ENDIF -->" title="<!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF -->"><a href="{U_POST_NEW_TOPIC}"><span></span><!-- IF S_IS_LOCKED -->{L_FORUM_LOCKED}<!-- ELSE -->{L_POST_TOPIC}<!-- ENDIF --></a></div>

viewtopic_body
chercher 2 fois (ligne 37 et 280)

Code: Tout sélectionner

<td align="{S_CONTENT_FLOW_BEGIN}" valign="middle" nowrap="nowrap">
      <!-- IF not S_IS_BOT -->
         <!-- IF S_DISPLAY_POST_INFO --><a href="{U_POST_NEW_TOPIC}">{POST_IMG}</a>&nbsp;<!-- ENDIF -->
         <!-- IF S_DISPLAY_REPLY_INFO --><a href="{U_POST_REPLY_TOPIC}">{REPLY_IMG}</a><!-- ENDIF -->
      <!-- ENDIF -->
      </td>

remplacer par 2fois

Code: Tout sélectionner

<td align="{S_CONTENT_FLOW_BEGIN}" valign="middle" nowrap="nowrap">
      <!-- IF not S_IS_BOT and S_DISPLAY_POST_INFO -->
      <div class="buttons">
         <div class="<!-- IF S_IS_LOCKED -->locked-icon<!-- ELSE -->reply-icon<!-- ENDIF -->"><a href="{U_POST_REPLY_TOPIC}" title="<!-- IF S_IS_LOCKED -->{L_TOPIC_LOCKED}<!-- ELSE -->{L_POST_REPLY}<!-- ENDIF -->"><span></span></a></div>


dans la css
ajoute a la fin

Code: Tout sélectionner

 .buttons {
   float: left;
   width: auto;
   height: auto;
}

/* Rollover state */
.buttons div {
   float: left;
   margin: 0 5px 0 0;
   background-position: 0 100%;
}

/* Rolloff state */
.buttons div a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
   position: relative;
   overflow: hidden;
}

.review-icons {
   float: right;
   width: auto;
   height: auto;
}

/* Rollover state */
.review-icons div {
   float: right;
   margin: 5px 5px 5px 0;
   background-position: 0 100%;
}

/* Rolloff state */
.review-icons div a {
   display: block;
   width: 100%;
   height: 100%;
   background-position: 0 0;
   overflow: hidden;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*.buttons div span      { display: none; }*/
/*.buttons div a:hover   { background-image: none; }*/
.buttons div span         { position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span   { background-position: 0 100%; }

/* Big button images */
.reply-icon span, .qreply-icon span, .post-icon span, .locked-icon span   { background: transparent none 0 0 no-repeat; }
.pmreply-icon span, .newpm-icon span, .forwardpm-icon span   { background: none 0 0 no-repeat; }

/* Set big button dimensions */
.buttons div.reply-icon, .buttons div.qreply-icon, .buttons div.post-icon, .buttons div.locked-icon, .buttons div.pmreply-icon, .buttons div.newpm-icon, .buttons div.forwardpm-icon   { width: 100px; height: 25px; }

.reply-icon span   { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_reply.gif"); }
.qreply-icon span   { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_qreply.gif"); }
.post-icon span      { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_new.gif"); }
.locked-icon span   { background-image: url("{T_IMAGESET_LANG_PATH}/button_topic_locked.gif"); }
.pmreply-icon span   { background-image: url("{T_IMAGESET_LANG_PATH}/button_pm_reply.gif"); }
.newpm-icon span    { background-image: url("{T_IMAGESET_LANG_PATH}/button_pm_new.gif"); }
.forwardpm-icon span   { background-image: url("{T_IMAGESET_LANG_PATH}/button_pm_forward.gif"); }


pour finir n'oublie pas de rafraichir tout les composant du style via acp

[tigran]

A ben ca serai super sympa

Vue que je n'est pas encore crée de double boutons(l'un au dessus de l'autre)
Mais pour pas en abusé, je souhaiterai que vous modifié que 3 boutons (comme ca les autres j'essayerai de les faire seule )

-Moi j'utilise le style Milky way
-Je veut utilisé les 3 boutons du style : AeroBlue]

Les boutons sont :
-button_topic_new (nouveau)
-button_topic_reply (répondre)
-icon_post_edit (edit)


THANKS

[sub60]

ah bin pour modifier les boutons c'est pas ici hein..

ça ce passe ici creation-graphique-phpbb/

eidt: ah bin il sont la imageset/sujet167009.html