COdage pop up de connexion

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

Résolu COdage pop up de connexion

Message par CathyCréation le 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



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


CathyCréation
****

Messages : 272
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 le Sam 6 Oct 2012 - 13:13

up Very Happy

CathyCréation
****

Messages : 272
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 le Dim 7 Oct 2012 - 12:17

petit up

CathyCréation
****

Messages : 272
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 le Lun 8 Oct 2012 - 11:49

up

CathyCréation
****

Messages : 272
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 le Mar 9 Oct 2012 - 13:46

up

CathyCréation
****

Messages : 272
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 le Jeu 11 Oct 2012 - 3:33

up

CathyCréation
****

Messages : 272
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 le 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
****

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 le 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.

CathyCréation
****

Messages : 272
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 le 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?

CathyCréation
****

Messages : 272
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 le 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
****

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 le 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

CathyCréation
****

Messages : 272
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 le 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 :


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 :



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 :



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 :



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 :



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
****

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 le 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

CathyCréation
****

Messages : 272
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 le 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
****

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 le Ven 12 Oct 2012 - 9:56

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

CathyCréation
****

Messages : 272
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


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