AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


3 résultats trouvés pour connexion_rapide

Nihil Scar Winspeare

Bloc de connexion rapide verte avec une image - Dim 6 Mar 2016 - 12:29

#css #html #connexion_rapide #auteur_Nihil_Scar_Winspeare #phpBB2


Bloc de connexion rapide verte



Ce LS remplace le bloc de connexion rapide présent sur l'index du forum.

  • Incompatible avec la connexion rapide par Facebook (Facebook Connect)
  • Modification du template index_body (il faut donc être fondateur du forum)
  • Testé sur phphbb2


Il s'agit du bloc de connexion. La partie image à gauche est un lien version l'inscription.
Tag connexion_rapide sur Never Utopia - graphisme, codage et game design UAOOHiJ

L'image fait 80px par 80px, vous pouvez mettre plus grand, mais gardez une image carrée :)

Template


Pensez à activer la connexion rapide sur le panneau d'admin :
PA > Affichage > Page d'accueil > Généralités > Affichage de la connexion rapide


Le template à modifier est index_body
PA > Affichage > Templates > Général >  index_body

Le code de connexion rapide est présent 2 fois dans le template, pour la connexion rapide en haut et celle en bas.
En fonction de ce que vous avez choisi (en haut / en bas), il faudra la remplacer au bon endroit.


Connexion rapide en haut


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->



Connexion rapide en bas


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->



Le HTML


Code:
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Playfair+Display' rel='stylesheet' type='text/css'>

<div class="cnxl-bloc">
    <form class="cnxl-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <!-- Bloc gauche - INSCRIPTION-->
       <a class="cnxl-inscription" href="/register" title="S'inscrire !">
           <img src="http://image.noelshack.com/fichiers/2016/09/1457207134-decoration.png" alt="Rejoindre le forum" />
       </a>

         <!-- Bloc milieu - LES CHAMPS A REMPLIR-->
        <div class="cnxl-input-bloc">
            <input type="text" name="username" placeholder="Pseudo" />
            <input type="password" name="password" placeholder="Mot de passe" />
        </div>

         <!-- Bloc droit - BOUTON CONNEXION-->
         <div class="cnxl-submit-bloc">
            <input type="submit" name="login" value="Connexion" />
        </div>

        <!-- En bas-->
        <div>
            <input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
            <label for="autologin">Connexion automatique</label>
        </div>
    </form>
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE VERTE NEVER UTOPIA -->


Si vous avez choisi de l'afficher en haut et en bas :
Spoiler:


CSS


PA > Affichage > Images & Couleurs > Couleurs > Onglet "Feuille de style"

Code:
/*
 * Libre service bloc de connexion rapide verte
 * NEVER UTOPIA
 */

 /* Bloc qui entoure tout */
 .cnxl-bloc {
     margin: 20px auto;

     font-family: 'Playfair Display', serif;
     text-align: center;
     font-size: 15px;
     color: #484848;
 }

 /* Aligner les 3 blocs */
 .cnxl-submit-bloc,
 .cnxl-inscription,
 .cnxl-input-bloc {
     display: inline-block;
     vertical-align: middle;
 }

 /* Style commun pour tous les champs */
 .cnxl-form input {
     padding: 10px;
     border: none;
     font-family: inherit;
     font-size: 15px;
     outline: none;
 }

 /*
  * Décoration à gauche
  * Inscription
  */

 .cnxl-inscription {
     width: 80px;
     height: 80px;
     border-radius: 50%;
     border: 2px solid #E5DB84;
     padding: 8px;
 }

 .cnxl-inscription img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 50%;
 }


 /*
  * Champs à remplir au centre
  */

 .cnxl-input-bloc {
     margin: 0 20px;
     width: 200px;
     border-radius: 5px;
     box-shadow: 0 0 0 2px #E5DB84;
     overflow: hidden;
     padding: 0 5px; /* espace entre le bord et le trait des input */
     background: #FFFFFF;
 }

 .cnxl-input-bloc input {
     color: black;
     box-sizing: border-box;
     display: block;
     width: 100%;
     border-bottom: 1px solid #E5DB84; /* bordure entre les input */
     box-shadow: 0 0 0 100px #ffffff inset; /* couleur de fond des input */
 }
 .cnxl-input-bloc input:last-of-type {
     border: none;
 }


 /*
  * Connexion à droite
  */

 /* Bouton de connexion */
 .cnxl-submit-bloc input {
     background: #E5DB84;
     border-radius: 3px;
     cursor: pointer;
     transition: all 300ms ease-out;
 }

 /* Bouton de connexion au survol */
 .cnxl-submit-bloc input:hover {
     background: #ede390;
 }

 /*
  * Zone en bas
  */

 .cnxl-form label {
     cursor: pointer;
 }

 /* Liens (Mot de passe oublié) */
 .cnxl-bloc a {
     font-size: 10px;
     text-decoration: none!important;
     color: #766e6e;
     text-decoration: none;
     transition: all 300ms ease-out;
 }

 /* Liens au survol (Mot de passe oublié) */
 .cnxl-bloc a:hover {
     color: #a79d46;
 }

 /*
  * Fin libre service Connexion rapide verte
  * Never Utopia
  */


En cas de problème, merci de vous rendre dans la section "Problème avec mon code" ou "Personnalisation"  :hudada:


Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  :lovebomb:

Nihil Scar Winspeare

Connexion rapide noire et rouge - Sam 5 Mar 2016 - 18:28

#css #html #connexion_rapide #auteur_Nihil_Scar_Winspeare #phpBB2


Bloc de connexion rapide



Ce LS remplace le bloc de connexion rapide présent sur l'index du forum.

  • Incompatible avec la connexion rapide par Facebook (Facebook Connect)
  • Modification du template index_body (il faut donc être fondateur du forum)
  • Testé sur phphbb2


Il s'agit du bloc noir
Tag connexion_rapide sur Never Utopia - graphisme, codage et game design Sa1qZNR

Template


Pensez à activer la connexion rapide sur le panneau d'admin :
PA > Affichage > Page d'accueil > Généralités > Affichage de la connexion rapide


Le template à modifier est index_body
PA > Affichage > Templates > Général >  index_body

Le code de connexion rapide est présent 2 fois dans le template, pour la connexion rapide en haut et celle en bas.
En fonction de ce que vous avez choisi (en haut / en bas), il faudra la remplacer au bon endroit.


Connexion rapide en haut


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_header -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_header -->



Connexion rapide en bas


Le code se situe entre ces deux lignes :
Code:
<!-- BEGIN switch_user_login_form_footer -->
       REMPLACEZ TOUT LE CODE ENTRE LES 2 PAR LE HTML PLUS BAS
<!-- END switch_user_login_form_footer -->



Le HTML


Code:
<!-- DEBUT LS CONNEXION RAPIDE NEVER UTOPIA -->

<!-- Ajout de la police -->
<link href='https://fonts.googleapis.com/css?family=Arapey' rel='stylesheet' type='text/css' />

<div class="connexion-bloc">
    <form class="connexion-form" action="{S_LOGIN_ACTION}" method="post" name="form_login">
        <div><input type="text" name="username" placeholder="Nom d'utilisateur"/></div>
        <div><input type="password" name="password" placeholder="Mot de passe"/></div>
        <div>
<input class="radio" type="checkbox" name="autologin" id="autologin" {AUTOLOGIN_CHECKED} />
<label for="autologin">Connexion automatique</label>
        </div>
        <input type="submit" name="login" value="Connexion" />
    </form><!-- fermeture du bloc du formulaire -->
    <a href="/profile?mode=sendpassword" title="Récupérer son mot de passe">Mot de passe oublié ?</a>
</div>
<!-- DEBUT LS CONNEXION RAPIDE NEVER UTOPIA -->


Si vous avez choisi de l'afficher en haut et en bas :

Spoiler:


CSS


PA > Affichage > Images & Couleurs > Couleurs > Onglet "Feuille de style"

Code:
/*
 * Libre service bloc de connexion rapide
 * NEVER UTOPIA
 */

/* Bloc qui entoure tout */
.connexion-bloc {
    margin: 20px auto;
    padding: 20px 0;

    background: #040004;

    font-family: 'Arapey', serif;
    color: #ffffff;
    text-align: center;

    font-size: 15px;
}

/* Formulaire */
.connexion-form {
    width: 50%;
    min-width: 190px;

    margin: auto;
    margin-bottom: 30px;

    padding: 20px;
    padding-top: 30px;

    position: relative;
    border: 2px solid #FA023C;
}

/* Les champs */
.connexion-form input {
    padding: 10px 20px;
    margin-bottom: 15px;

    background: #ffffff;
    border: none;

    font-family: inherit;
    font-size: 15px;

    outline: none;
}

.connexion-form label {
    cursor: pointer;
}

/* Bouton de connexion */
.connexion-form input[type="submit"] {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);

    background: #FA023C;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    font-size: 16px;

    padding: 10px 18px;
    margin: 0;

    cursor: pointer;
    transition: all 1000ms;
}

/* Bouton de connexion au survol */
.connexion-form input[type="submit"]:hover {
    color: #FA023C;
    background: #262323;
}

/* Liens (Mot de passe oublié) */
.connexion-bloc a {
    text-decoration: none!important;
    color: #766e6e;
    text-decoration: none;
    transition: all 300ms ease-out;
}

/* Liens au survol (Mot de passe oublié) */
.connexion-bloc a:hover {
    color: #FA023C;
}
/*
 * Fin libre service Connexion rapide
 * Never Utopia
 */


En cas de problème, merci de vous rendre dans la section "[url=/f177-probleme-avec-mon-code]Problème avec mon code[/url]" ou "[url=/f75-personnalisations]Personnalisation[/url]"  :hudada:


Merci de penser à créditer Never Utopia, avec un lien vers le forum, merci  :lovebomb:

Nemesis

Connexion rapide « flottante » (Templates+CSS) - Mer 20 Mai 2015 - 23:42

#html #css #connexion_rapide #auteur_Nemesis #phpBB2



Connexion Rapide dans un bloc flottant

Bonjour à tous les N'Utopiens et N'utopiennes =)
Voici un petit tuto qui va vous aider à faire ce qui est indiqué dans le titre, inutile de le répéter je suppose, c'est assez clair =D

PHBB2
Vous devez être : Fondateur
Difficulté : Facile
Apercu : Ici



Puisqu'il est question de CONNEXION, il est impératif que vous soyez DÉCONNECTÉS chaque fois que vous voulez voir le rendu Wink en ce qui me concerne, je visualisais à partir d'un autre navigateur pour éviter de me connecter/déconnecter à chaque fois !


Pour éviter de retrouver la connexion rapide 2 fois sur le forum, vérifiez que l'option « connexion rapide » est décochée ! (Panneau d'admin -> affichage -> page d'accueil -> généralités -> affichage de la connexion rapide : ne pas afficher


Étape 1 - Template

Allez dans les templates -> général -> overall header.

Allez vers la fin du template, juste avant ceci :
Code:
<!-- BEGIN html_validation -->


Et collez ceci :
Code:
<!-- BEGIN switch_user_logged_out -->
<div class="fastconnex">
  <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form">
    <tr>
        <td width="100%" valign="top" align="center" class="row1"> 
            <label><span class="genmed">{L_USERNAME}:</span> <input class="post" type="text" size="20" name="username" /></label><br />
            <label><span class="genmed">{L_PASSWORD}:</span> <input class="post" type="password" size="20" name="password" /></label><br /><br />
            <input class="mainoption" type="submit" name="login" value="{L_LOGIN}" />
        </td>
    </tr>
</table>
</form>
  </div>
<!-- END switch_user_logged_out -->


Enregistrez et n'oubliez pas de publier le template !

Étape 2 - CSS

Collez ceci dans votre feuille de styles (CSS)

Code:
.fastconnex {
width:200px;/*largeur du bloc*/
height:200px;/*hauteur du bloc*/
background-color:#ABA9A6;/*couleur du fond*/
position:absolute;/*le bloc ne bougera pas*/
top:80px;/*on place le bloc a 100px du haut*/
right:30px;/*on place le bloc a 30px de la droite*/
border:5px solid #755b8e; /*bordure facultative*/
box-shadow: 3px 0px 5px #3d2f4a; /*ombre facultative*/
border-radius: 5px; /*Les bordures arrondies, facultatif*/
color: #555555; /*Couleur du texte*/
}


Si vous souhaitez que le bloc suive la page au scroll, remplacez la donnée « absolute » par « fixed ».

Vous pouvez placer le bloc où vous le souhaitez dans la page. Si vous voulez qu'il s'affiche à gauche, changez « right » par « left». De même, si vous souhaitez qu'elle soit plus au bas de la page, changez « top » par « bottom ».


Vous avez jusqu'ici toutes les informations nécessaires au bon fonctionnement du bloc, mais voici quelques trucs supplémentaires.

Modifier le texte


Modifier « Nom d'utilisateur »
Ciblez ceci dans le code template donné plus haut :
Code:
{L_USERNAME}
supprimez-le et écrivez tout simplement ce que vous voulez.

Modifier « Mot de passe »
Ciblez ceci dans le code template donné plus haut :
Code:
{L_PASSWORD}
supprimez-le et écrivez tout simplement ce que vous voulez.

Modifier « Connexion »
Vous commencez à saisir le principe Wink
Code:
{L_LOGIN}
supprimez-le et écrivez tout simplement ce que vous voulez.

Avoir une forme plus originale


Forme en cercle
Changez cette partie du CSS
Code:
border-radius: 5px;


Et remplacez par ceci
Code:
border-radius: 100px;



Modifier la forme avec une image

Ceci s'adresse à ceux qui savent grapher ou qui ont un graphiste sous la main ! =D
Pour plus de facilité, essayez d'établir d'avance la taille de votre bloc pour créer votre image au bon format.

Vous devez créer la forme vous-même dans un logiciel comme photoshop !
Dans le CSS, enlevez le « background-color » et changez-le pour ceci :

Code:
background-image:url("adressedevotreimage");
background-repeat:no-repeat


Exemple absolument magnifique (not)

Voilà ! Il y a une tonne de possibilités de modifications alors amusez-vous avec le CSS ! =)
J'espère que cela vous seras utile !

©️tuto by nemesis AKA wave



Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^


Revenir en haut

La date/heure actuelle est Ven 10 Mai 2024 - 3:17