Créez un accès direct à votre espace Joomeo depuis votre site internet

Votre site internet est souvent le lien le plus direct avec vos clients et vos contacts. En conséquence, il paraît logique d’en faire le point d’entrée vers votre espace Joomeo pour en faciliter l’accès !

C’est pour cela que nous vous proposons d’intégrer une boite d’identification directement sur votre site. Elle renverra votre contact vers votre espace Joomeo et lui donnera accès aux partages tels que vous les avez définis pour lui.

Comment faire ?

La manipulation est simple mais elle impose que vous connaissiez un peu le langage HTML et que vous ayez accès au code des pages de votre site internet. Une fois ces pré-requis validés, suivez cette procédure :

1. Premièrement, choisissez la page de votre site dans laquelle vous souhaitez ajouter votre boite de login et ouvrez-la dans l’éditeur HTML de votre choix.
2. Ensuite, copiez le code ci-dessous et insérez-le à l’endroit souhaité dans le code de votre page

<form id="loginbox" name="loginbox" method="post" action="https://joomeo.com/NomDeVotreEspaceJoomeo/index.php">
    <fieldset id="skin_classic">
      <legend>Connection galerie</legend>

        <table>

            <tr>
                <td style="text-align:right"><label for="login">Nom :</label></td>
                <td><input name="login" type="text" id="login" /></td>
            </tr>

            <tr>
                <td style="text-align:right"><label for="passwd">Mot de passe :</label></td>
                <td><input name="passwd" type="password" id="passwd" /></td>
            </tr>

            <tr>
                <td class="submit"></td>
                <td>
                    <input type="submit" class="signin" id="button" value="Se connecter"/>
                    <input type="reset" class="reset" id="button" value="Effacer"/>
                </td>
            </tr>

        </table>

    </fieldset>
</form>

3. Dans ce code, remplacez le texte “NomDeVotreEspaceJoomeo” par le nom de votre espace Joomeo.
4. Enregistrez les modifications faites dans votre page.
5. Mettez en ligne votre nouveau fichier HTML.

Comment modifier le graphisme de cette boite de login

Voici à quoi ressemblera votre boite de login lorsque vous l’aurez intégrée à votre page si vous conservez le style CSS fourni ci-dessous :

La feuille de style qui suit permet d’obtenir le résultat ci-dessus sans intervention de votre part.

Le design est fonctionnel et suffisamment neutre pour s’adapter à la plupart des graphismes. Mais il peut être parfois préférable de personnaliser un peu le rendu de votre boite de login. Ainsi, elle s’intègrera mieux à l’univers de votre site internet.

Pour peu que vous connaissiez le fonctionnement du CSS, vous pourrez modifier le code qui suit à loisir. Vous obtiendrez un résultat conforme à vos besoins spécifiques :

<style>

fieldset {
        margin-top:20px;
        border:1px solid #a4a4a4;
}

#loginbox #skin_classic {
        padding:0px 10px 0px 10px;
        margin-left:auto;
        margin-right:auto;
        width:320px;
        height:140px;
        font-family:Tahoma, Geneva, sans-serif;
        font-size:14px;
        color:#8D8C8C;
}

#skin_classic legend {
        padding:5px 10px 5px 5px;
        background-color: #4b81b1;
        font-weight:bold;
        border:1px solid #a4a4a4;
        color:#FFF;
}

#skin_classic #button{
        padding:5px 5px 5px 5px;
        width:100px;
        font-weight:bold;
        border:1px solid #a4a4a4;
        cursor: pointer;

}

.signin {
        margin-top:5px;
        margin-left:5px;
        float:right;
        background-color: #4b81b1;
        color:#FFF;
        font-size:12px;
}

.reset {
        margin-top:5px;
        float:right;
        background-color: #4b81b1;
        color:#FFF;
font-size:12px;
}

input {
        width:200px;
        padding-left:10px;
        background-color: #E8E8E8;
        font-weight:bold;
        border:1px solid #a4a4a4;
        color:#333;
        font-size:18px;
}
</style>

Cette boite de login fonctionne sur tous les sites développés en HTML, faites-en bon usage ! 😉