AccueilRechercherS'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.


    Page d'accueil pause café

    Cheshire Cat
    Cheshire Cat
    FémininAge : 23Messages : 1000

    le Mer 18 Mai 2016 - 22:38

    Rappel du premier message :

    Bonjour à vous tous !
    Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.
    Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

    En action !
    Page d'accueil pause café - Page 4 38704aab49

    Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Modules > HTML & Javascript > Gestion des pages HTML > Création en mode avancé (HTML) et copiez le code qui va suivre. N'oubliez pas d'enregistrer votre page et d'y mettre un titre.
    Code:
    <!DOCTYPE html>
     <html lang="fr">
     <head>
     <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz' rel='stylesheet' type='text/css' />
     <meta charset="utf-8" />
                       <base target="_blank" />
     <title>Page d'accueil Café par Cheshire Cat</title>
     <style type="text/css">
     .corps{
     position:relative;
     width:720px;
     height:400px;
     margin:auto;
     background: #D8B06C;
     border:10px solid #C19249;
     font-family:'Yanone Kaffeesatz', sans-serif;
     }
     .vote_1{
     position:absolute;
     left:20px;
     bottom:130px;
     display:block;
     width:55px;
     height:45px;
     padding-top:23px;
     padding-left:15px;
                               }
     .vote_2{
     position:absolute;
     bottom:80px;
     left:100px;
     display:block;
     width:100px;
     height:35px;
     padding-top:50px;
                               text-align:center;
     }
     .vote_3{
     position:absolute;
     bottom:130px;
     left:220px;
     display:block;
     width:25px;
     height:50px;
     padding-top:25px;
     padding-left:50px;
     }
                               .vote{
     border-radius:50%;
     background:#A86D3F;
     font-size:30px;
     color:#F3D8AC;
     text-decoration:none;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
                               }
     .vote:hover{
     color:#A86D3F;
     background:#F3D8AC;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
     }
     .contexte{
     position:absolute;
     overflow:hidden;
     top:20px;
     left:20px;
     width:250px;
     height:250px;
     border-radius:50%;
     border:10px solid #F3D8AC;
     }
     .contexte img{
     z-index:1;
     width:250px;
     border-radius:50%;
     }
     .contexte p{
     position:absolute;
     top:-13px;
     left:0px;
     width:170px;
     height:170px;
     border-radius:50%;
     background:#C19249;
     padding:40px;
     overflow:auto;
     text-align:justify;
     color:#4D2D22;
     font-size:13px;
     font-family: 'PT Sans Narrow', sans-serif;
     opacity:0;
     visibility:hidden;
     -webkit-transform:rotate(30deg) scale(0);
     transform:rotate(30deg) scale(0);
     -webkit-transition:all ease 0.6s;
     transition:all ease 0.6s;
     }
     .contexte:hover p{
     opacity:1;
     visibility:visible;
     -webkit-transform:rotate(0deg) scale(1);
     transform:rotate(0deg) scale(1);
     -webkit-transition:all ease 0.6s;
     transition:all ease 0.6s;
     }
     .contexte a{
     text-decoration:none;
     color:#F3D8AC;
     }
     .staff{
     position:absolute;
     overflow:hidden;
     top:10px;
     right:35px;
     }
     .infobulle{
     display:inline-block;
     overflow:hidden;
     width:100px;
     height:100px;
     margin-right:10px;
     }
     .infobulle img{
     width:100px;
     }
     .contenu{
     position:absolute;
     bottom:0px;
     width:100px;
     height:74px;
     line-height:24px;
     font-size:15px;
     background:#F3D8AC;
     text-align:center;
     color:#A86D3F;
     font-family: 'PT Sans Narrow', sans-serif;
     opacity:0;
     -webkit-transform:translate(0px, 74px);
     transform:translate(0px, 74px);
     -webkit-transition:all ease 0.5s;
     transition:all ease 0.5s;
     }
     .contenu a{
     color:#4D2D22;
     text-decoration:none;
     }
     .infobulle:hover .contenu{
     opacity:1;
     -webkit-transform:translate(0px, 0px);
     transform:translate(0px, 0px);
     -webkit-transition:all ease 0.5s;
     transition:all ease 0.5s;
     }
     #barre{
     position:absolute;
     top:40px;
     right:10px;
     width:400px;
     height:40px;
     background:#F3D8AC;
     }
     .nav{
     position:absolute;
     right:208px;
     bottom:35px;
                               padding:0px;
     list-style-type:none;
     }
     .nav li a{
     display:block;
     width:165px;
     margin-bottom:10px;
     background:#A86D3F;
     text-align:center;
     letter-spacing:1px;
     font-size:23px;
     color:#F3D8AC;
     text-decoration:none;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
     }
     .nav li a:hover{
     color:#A86D3F;
     background:#F3D8AC;
     -webkit-transition:all linear 0.4s;
     transition:all linear 0.4s;
     }
     .news{
     position:absolute;
     top:105px;
     right:10px;
     width:178px;
     height:250px;
                               padding:0px;
     background:#D8B06C;
     border:10px solid #F3D8AC;
     overflow:auto;
     list-style-type:none;
     }
     .news li{
     position:relative;
                               top:0px;
                               left:0px;
     box-sizing:border-box;
     padding-left:5px;
     padding-right:5px;
     color:#4D2D22;
     font-size:15px;
     font-family: 'PT Sans Narrow', sans-serif;
     border-bottom:2px solid #A86D3F;
     }
     .partenaires{
     position:absolute;
     left:15px;
     bottom:5px;
     }
     .partenaires img{
     margin-right:5px;
     width:40px;
     height:40px;
     }
     </style>
     </head>
     <body>
     <div class="corps">
     <a href="#" class="vote vote_1">1</a>
     <a href="#" class="vote vote_2">2</a>
     <a href="#" class="vote vote_3">3</a>
     <div class="contexte">
     <img src="http://www.tshirtvortex.net/wp-content/uploads/Coffee-Time-A.gif" alt="image contexte"/>
     <p class="texte">
     Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad praetorium cum pompa sollemni perrexit morbosque diu causatus nec regiam introiit nec processit in publicum, sed abditus multa in eius moliebatur exitium addens quaedam relationibus. <a href="#">Plus ?</a>
     </p>
     </div>
     <div id="barre"></div>
     <div class="staff">
     <div class="infobulle">
     <div class="contenu">
     Pseudo<br />
                                                            Rôle<br />
     <a href="#">Contacter</a> | <a href="#">Profil</a>
     </div>
     <img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
     </div>
     <div class="infobulle">
     <div class="contenu">
     Pseudo<br />
     Rôle<br />
     <a href="#">Contacter</a> | <a href="#">Profil</a>
     </div>
     <img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
     </div>
     <div class="infobulle">
     <div class="contenu">
     Pseudo<br />
     Rôle<br />
     <a href="#">Contacter</a> | <a href="#">Profil</a>
     </div>
     <img src="http://i64.tinypic.com/33mbw3c.png" alt="Membre du staff" />
     </div>
     </div>
     <ul class="nav">
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     <li><a href="#">Lien</a></li>
     </ul>
     <ul class="news">
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     <li>Date: texte</li>
     </ul>
     <div class="partenaires">
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     <a href="#"><img src="http://i86.servimg.com/u/f86/16/24/44/02/pa_ico11.png" alt="Partenaire" /></a>
     </div>
     </div>
     </body>
     </html>

    Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et ajoutez-y le lien de votre page HTML.
    Code:
    <iframe name="Page d'accueil par Cheshire Cat" src="URL DE LA PAGE HTML" frameborder="0" scrolling="no" style="width: 755px; height: 435px;"></iframe>

    Vous n'êtes pas obligés de poster pour voir les codes, mais un petit "Merci" fait toujours plaisir :)


    Dernière édition par Cheshire Cat le Dim 26 Aoû 2018 - 16:44, édité 11 fois
    Dearborn
    Dearborn
    FémininAge : 26Messages : 112

    le Mar 28 Fév 2017 - 9:47

    Merci!
    Lalia
    Lalia
    FémininAge : 20Messages : 45

    le Dim 12 Mar 2017 - 17:48

    Merci ♥
    Dydy
    Dydy
    FémininAge : 30Messages : 493

    le Jeu 16 Mar 2017 - 11:13

    merci du partage!



    Page d'accueil pause café - Page 4 27978_signature_never_utopia_dydy_2
    Luxuria
    Luxuria
    FémininAge : 23Messages : 83

    le Ven 17 Mar 2017 - 20:24

    merci <3
    Nearween
    Nearween
    FémininAge : 22Messages : 213

    le Dim 26 Mar 2017 - 17:49

    merchi



    Page d'accueil pause café - Page 4 Tumblr_static_tumblr_static_e0bc42ijrzwc84o84s4s8o0g_640

    Stand by Me
    Elwana
    Elwana
    FémininAge : 23Messages : 42

    le Mer 29 Mar 2017 - 11:38

    Plus je fouille plus je trouve des choses magnifiques Oo Merci!
    The A.
    The A.
    FémininAge : 23Messages : 38

    le Dim 2 Avr 2017 - 22:10

    Merci !



    Page d'accueil pause café - Page 4 Tumblr_mma46f4SJM1qjqvo3o1_500
    Jamais contente.
    mijako
    mijako
    FémininAge : 28Messages : 83

    le Jeu 6 Avr 2017 - 2:09

    merci
    Caly.s
    Caly.s
    FémininAge : 21Messages : 13

    le Sam 8 Avr 2017 - 18:47

    Waouw, c'est super bien travaillé. J'aime beaucoup
    Saik
    Saik
    MasculinAge : 24Messages : 65

    le Sam 8 Avr 2017 - 18:48

    Merci :
    Plume Rusée
    Plume Rusée
    FémininAge : 14Messages : 13

    le Sam 15 Avr 2017 - 18:00

    Merci c'est juste magnifique ! =D
    Asa Ikeda
    Asa Ikeda
    FémininAge : 26Messages : 35

    le Lun 17 Avr 2017 - 13:47

    Merci pour ce code ^^
    Darkeye
    Darkeye
    FémininAge : 20Messages : 56

    le Lun 17 Avr 2017 - 15:40

    Très joli, merci !



    Page d'accueil pause café - Page 4 Signan10
    Firamary
    Firamary
    FémininAge : 22Messages : 15

    le Sam 29 Avr 2017 - 0:02

    J'ai trouvé la perle rare qui correspondra parfaitement avec un forum dont je mettrai le lien ici quand il sera terminé, pour que tu puisses voir à quel point ça embelli tout :heart:
    IdefixB
    IdefixB
    FémininAge : 31Messages : 10

    le Dim 14 Mai 2017 - 17:19

    merci
    defenrir
    defenrir
    MasculinAge : 37Messages : 76

    le Sam 3 Juin 2017 - 17:42

    merchi =)
    Likilou
    Likilou
    MasculinAge : 27Messages : 307

    le Lun 12 Juin 2017 - 0:03

    Merci =)



    Page d'accueil pause café - Page 4 707828SignArthur2
    Örmée
    Örmée
    MasculinAge : 33Messages : 139

    le Mer 14 Juin 2017 - 18:55

    merci
    Nutop
    Nutop
    FémininAge : 18Messages : 254

    le Mar 20 Juin 2017 - 0:26

    Mercii, c'est tres bien fait dis donc **




    Page d'accueil pause café - Page 4 Mini_597402Sceaufinal

    YoshinoYuki
    YoshinoYuki
    FémininAge : 18Messages : 10

    le Mar 20 Juin 2017 - 16:45

    Merci Wink
    ByulYong
    ByulYong
    FémininAge : 27Messages : 5

    le Mar 12 Sep 2017 - 17:27

    Trop chou ! Merci !
    Anonymous
    Invité

    le Mer 20 Juin 2018 - 16:30

    Merci beaucoup, je me suis permise de l'adapter à mon forum Wink
    Ely Kyuh
    Ely Kyuh
    FémininAge : 27Messages : 31

    le Jeu 13 Sep 2018 - 10:51

    Elle est très cool, merci =)
    alysszen
    alysszen
    FémininAge : 24Messages : 19

    le Mer 19 Sep 2018 - 21:36

    Vraiment un gros coup de coeur, merci beaucoup c'est magnifique !
    Yumeki
    Yumeki
    FémininAge : 28Messages : 147

    le Jeu 10 Oct 2019 - 19:51

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 22 Oct 2020 - 23:12