COdage pop up de connexion

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu COdage pop up de connexion

Message par CathyCréation Ven 5 Oct 2012 - 12:03

Bonjour,
et oui sa fesait longtemps lol
Voila j'ai un petit service a vous demandée, je voudrais modifier ma pop up de connexion et celle d'anniversaire
pour obtenir ce style la pour que tout s'accorde avec mon forum

COdage pop up de connexion Popup-300553e

j'ai trouvé les codes qui vont avec mais le hic c'est que je ne sais pas ou placer ce code
sauf bien sur le code css pour celui la pas de soucis.

Merci de votre aide

avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Sam 6 Oct 2012 - 13:13

up Very Happy
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Dim 7 Oct 2012 - 12:17

petit up
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Lun 8 Oct 2012 - 11:49

up
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Mar 9 Oct 2012 - 13:46

up
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Jeu 11 Oct 2012 - 3:33

up
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par Manumanu Jeu 11 Oct 2012 - 6:24

Salut,

Tiens, c'est moi qui ai codé ça. Tu l'as trouvé sur quel forum ? ^^ Normalement, toutes les explications (avec images) pour faire la modification devraient suivre dans le post où tu as trouvé les codes ?

Enfin bref, c'est dans ton fichier overall_header que tu dois faire ces modifications. Trouve cette ligne :
Code:
<!-- BEGIN switch_login_popup -->
Et le code à modifier est juste en-dessous. Wink
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Jeu 11 Oct 2012 - 16:59

Merci beaucoup Manu
ben je l'ai trouvé par hasard sur ton forum en cherchant sur le net.

Je vais essayée de ce pas.
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Jeu 11 Oct 2012 - 17:05

Désolée du double poste
mais j'ai un soucis, j'ai bien installé le code
mais j'ai mas po up qui fonctionne pas et pourtant elle est activée.
Que dois je faire?
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par Manumanu Jeu 11 Oct 2012 - 18:43

Je n'ai pas de forum, c'est pourquoi je dois savoir où tu l'as trouvé, et vérifier que tu disposes bien de toutes les infos. Wink

Également, pense à mettre le lien vers ton forum pour que je puisse regarder le résultat et les éventuelles erreurs.
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Jeu 11 Oct 2012 - 20:28

Bonsoir Manu
alors sur mon fo' d'origine tous fonctionne j'ai eu juste un peu dur pour les images pour pouvoir avoir les tailles exacte lol

Voici le lien ou j'ai trouvé le code http://helpinghelps-phpbb2.forumgratuit.org/
et voici le lien de mon forum http://accrosgraph.forumactif.com

En tous cas merci beaucoup
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par Manumanu Jeu 11 Oct 2012 - 21:45

Ha mince ! Je ne me rappelais pas avoir mis ça sur ce truc. Au temps pour moi, mais il manque effectivement un petit paquet d'explications... Voici qui devrait t'aider :

Voici où vous rendre pour activer/désactiver cette pop-up et modifier le texte visible :
COdage pop up de connexion Step1-300558a

Pour tout ce qui est du html, il s'agit de ce bout de code, trouvable dans la partie template "overall_header". Pour vous rendre dans le template :

COdage pop up de connexion Step2-30055a8

Et voici le code :
Code:
<!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->
Vous pouvez à loisir modifier le code, sous réserve bien sûr de savoir ce que vous faîtes. Wink
Après chaque modification, n'oubliez pas de publier la page :

COdage pop up de connexion Step3-30055b4

Le HTML en détails

Tout d'abord, je vais commenter le code pour que vous sachiez exactement à quoi correspond chaque ligne importante.

Code:
<span class="genmed module-title">{SITENAME}</span>
Ceci correspond au titre de la popup, qui affiche par défaut le nom du site ({SITENAME}). Vous pouvez le modifier, l'agrémenter ou mettre ce que vous voulez à la place.
Exemple :
Code:
<span class="genmed module-title">Bienvenue sur {SITENAME} !</span>

Code:
<input type="submit" class="mainoption" value="{L_LOGIN}" />
Voilà de quoi modifier le bouton de connexion. La variable {L_LOGIN} correspond à un affichage automatique de la connexion en fonction de la langue. Vous pouvez encore une fois modifier ceci à votre guise, pour afficher ce que vous voulez :
Code:
<input type="submit" class="mainoption" value="Connectez-vous !" />

Code:
<input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
Cette fois, il s'agit du outon de connexion. Vous ne devez pas toucher à la variale {U_REGISTER}, sans quoi le lien vers la page d'enregistrement ne marchera plus. Vous pouvez en revanche changer {L_REGISTER} :
Code:
<input type="button" class="mainoption" value="Enregistrez-vous !" onclick="parent.location='{U_REGISTER}';" />

Code:
<input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
Enfin, ce dernier bout de code correspond au bouton "ne plus afficher". Encore une fois, vous pouvez modifier l'attribut "value".
Code:
<input id="login_popup_close" type="button" class="button" value="Arrêtez de me déranger !" />

Cas pratique
Les modifications avec exemple

Pour modifier le CSS, nous allons pouvoir utiliser l'ID sur la pop_up "login_popup", afin d'être sûrs que les modifications affectées aux éléments ne déborderont pas sur d'autres.
Vous pouvez bien entendu faire les modifications de votre choix. Pour ma part, je vais vous montrer comment arriver à ce résultat :

COdage pop up de connexion Popup-300553e

Nous allons d'abord devoir retirer la classe "forumline" et la classe catLeft dans le html, et retirer la hauteur et la largeur. Votre bout de HTML devient donc celui-ci :
Code:
<!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table border="0" cellspacing="0" cellpadding="0">
         <tr class="titre">
            <td>{SITENAME}</td>
         </tr>
                     <tr class="message">
                           <td>{LOGIN_POPUP_MSG}</td>
                        </tr>
         <tr class="boutons">
            <td>
               <form action="{S_LOGIN_ACTION}" method="get">
                  <input type="submit" class="mainoption" value="{L_LOGIN}" />
                  <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                  <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
               </form>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

Occuppons-nous maintenant du CSS, voici comment le modifier :

COdage pop up de connexion Step4-30055c0

Voici le CSS :
Code:
/*******************************************/
/* CODE DE POP-UP DE CONNEXION
/*******************************************/
#login_popup > table {
   background: url("http://img71.xooimage.com/files/d/c/0/poplogin_bg-top-30054ce.png") no-repeat;
   width: 570px;
}

#login_popup .titre td {
   height: 90px;
   font: bold italic 25px/1.5em Georgia, Arial, serif;
   color: #f9f5f1;
   text-shadow: 0 2px #532831;
   text-align: center;
}

#login_popup .message {
   background: url("http://img72.xooimage.com/files/4/1/f/poplogin_bg-layout-30054d0.png") repeat-y center top;
}

#login_popup .message td {
   min-height: 60px;
   display: block;
   width: 420px;
   margin: auto;
   color: #785547;
   text-align: center;
   font: 14px "Trebuchet MS", Arial, serif;
}

#login_popup .boutons {
   background: url("http://img69.xooimage.com/files/6/3/6/poplogin_bg-bottom-30054e3.png") no-repeat center bottom;
   margin-top: -1px;
}

#login_popup .boutons td {
   padding: 15px 0 25px;
   display: block;
   width: 430px;
   margin: auto;
   text-align: center;
}

#login_popup input {
   background: url("http://img67.xooimage.com/files/d/5/d/poplogin_bg-btn-300545a.png") repeat-x left top;
   height: 32px;
   padding: 0 10px;
   border-radius: 5px;
   border: 1px solid #5f2d37;
   box-shadow: 0 1px 0 #928276;
   color: #edd9c9;
   text-shadow: 0 1px #532831;
   font: italic 16px/1.5em Georgia, serif;
   cursor: pointer;
}

#login_popup input + input {
   margin-left: 5px;
}

#login_popup input:hover {
   background-position: left bottom;
   color: #f7f0ea;
}
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Ven 12 Oct 2012 - 3:11

Merci beaucoup,
bon voila tout est placée, mais cmt je fais pour avoir un titre comme tu as sur ton ruban et aussi pour avoir les bord arrondi?


Merci beaucoup
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par Manumanu Ven 12 Oct 2012 - 4:21

Bravo, visiblement tu l'as bien inclus. Wink

Pour le bord arrondi, remplace le CSS par celui-ci :

Code:
/*******************************************/
/* CODE DE POP-UP DE CONNEXION
/*******************************************/
#login_popup > table {
  background: url("http://img71.xooimage.com/files/d/c/0/poplogin_bg-top-30054ce.png") no-repeat;
  width: 570px;
}

#login_popup .titre td {
  height: 90px;
  font: bold italic 25px/1.5em Georgia, Arial, serif;
  color: #f9f5f1;
  text-shadow: 0 2px #532831;
  text-align: center;
}

#login_popup .message {
  background: url("http://img72.xooimage.com/files/4/1/f/poplogin_bg-layout-30054d0.png") repeat-y center top;
}

#login_popup .message td {
  min-height: 60px;
  display: block;
  width: 420px;
  margin: auto;
  color: #785547;
  text-align: center;
  font: 14px "Trebuchet MS", Arial, serif;
}

#login_popup .boutons {
  margin-top: -1px;
}

#login_popup .boutons td {
  padding: 15px 0 25px;
  display: block;
  width: 430px;
  margin: auto;
  text-align: center;
  background: url("http://img69.xooimage.com/files/6/3/6/poplogin_bg-bottom-30054e3.png") no-repeat center bottom;
  border-radius: 0 0 10px 10px;
}

#login_popup input {
  background: url("http://img67.xooimage.com/files/d/5/d/poplogin_bg-btn-300545a.png") repeat-x left top;
  height: 32px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #5f2d37;
  box-shadow: 0 1px 0 #928276;
  color: #edd9c9;
  text-shadow: 0 1px #532831;
  font: italic 16px/1.5em Georgia, serif;
  cursor: pointer;
}

#login_popup input + input {
  margin-left: 5px;
}

#login_popup input:hover {
  background-position: left bottom;
  color: #f7f0ea;
}

Pour l'image du haut, c'est à faire graphiquement sur l'image que tu as créé pour ça.

Pour le titre, c'est dans le template :
Code:
<span class="genmed module-title">{SITENAME}</span>

{SITENAME} fait apparaitre le nom du site, mais comme dit dans l'exemple plus haut, tu peux le modifier à ta guise, par exemple :

Code:
<span class="genmed module-title">Bienvenue sur {SITENAME}</span>

Ou même carrément le retirer :
Code:
<span class="genmed module-title">Inscrivez-vous vite !</span>
Manumanu

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: COdage pop up de connexion

Message par CathyCréation Ven 12 Oct 2012 - 9:56

Super merci beaucoup
bon j'ai plus qu'a refaire le haut
Un grand merci
avatar

CathyCréation
****

Messages : 282
Inscrit(e) le : 20/10/2011

http://accrosgraph.forumactif.com
CathyCréation a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum