AccueilFAQRechercherMembresGroupesS'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é

    Partagez
    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Mer 18 Mai 2016 - 22:38

    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 !


    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 Mar 12 Sep 2017 - 20:34, édité 10 fois



    avatar
    Youp
    FémininAge : 22Messages : 578

    le Jeu 19 Mai 2016 - 3:37

    Elle est grave classe ta PA ! Franchement bravo ^^



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Ven 27 Mai 2016 - 0:22

    C'est bien gentil, merci beaucoup
    J'ai modifié un petit peu les codes en attendant ^^



    avatar
    Nihil Scar Winspeare
    Messages : 4700

    le Dim 5 Juin 2016 - 21:45

    Haaan, qu'elle est jolie cette PA, j'adore vraiment le style :hug:
    Si tu veux, j'ai fait une petite screen au survol du cercle / survol du staff.

    J'ai jeté un petit coup d'oeil au code, je me permets quelques petites remarques pour rendre ça encore mieux / facile à modifier (même si c'est déjà du bon code hein ! Very Happy)

    Comme dans le défi avec les ronds :p, ça serait cool d'utiliser le point 7 de ce tuto [Aide] Les Erreurs les plus Courantes en Codage.
    Ca permettrait d'alléger ton code CSS ! Je pense par exemple à .vote_1, .vote_2, .vote_3 qui se ressemblent beaucoup !
    Spoiler:

    Dans le head, tu charges 3 polices :
    Code:
    <link href='https://fonts.googleapis.com/css?family=PT+Sans+Narrow|Yanone+Kaffeesatz|Josefin+Sans' rel='stylesheet' type='text/css' />
    Par contre, je ne trouve pas "Josefin Sans" dans le reste du code. C'est pas grand chose, un vestige d'une ancienne modification sûrement, mais je pense qu'on pourrait la retirer du coup !  :friends:

    D'ailleurs pendant que je parle de polices, un petit conseil qui peut faciliter la modification ensuite, ça serait de choisir l'une des 2 polices (Yanone Kaffeesatz ou PT Sans Narrow) comme police principale.
    Mettons que tu choisisses PT Sans Narrow comme police principale, tu la mets dans le CSS de la div qui englobe tout (.corps) ou même sur le body (puisque ici on est dans une page HTML)
    La police est une propriété qui s'hérite, ça veut dire que les enfants auront par défaut la même police !
    Ainsi, dans le reste du CSS ensuite, tu n'as plus besoin de préciser ceci, car tu l'auras fait pour le parent/le body :
    Code:
    font-family: 'PT Sans Narrow', sans-serif;
    Ca peut paraitre un détail, mais déjà c'est plus pratique pour personnaliser, et ça allège le code :)
    J'ai expliqué ça rapidement mais dis moi si tu veux un exemple concret !

    Autre petit détail, lié à une modification rapide je pense, ici il y a le signe = qui s'est fait la malle xD (plusieurs fois)
    Code:
    <a href="#" target"_blank">Contacter</a> | <a href="#" target"_blank">Profil</a>
    Du coup on te laisse vérifier partout que c'est bon !

    Petite info supplémentaire, si dans une page tu veux te débarrasser de devoir spécifier partout les target blank, tu peux rajouter dans la balise head ceci :
    Code:
    <base target="_blank" />
    Comme ça, plus besoin de préciser sur chaque balise a, tous les liens s'ouvriront par défaut dans un nouvel onglet Wink
    Je l'utilise rarement, mais c'est vrai que ça peut être bien utile  :toto:
    Si tu veux le voir expliqué d'une manière différente, Nyo en parle dans le tuto Créer une page HTML (pour fiche de pub, formulaires, etc,)

    Enfin dans le CSS de .news li, il y a une petite coquille qui s'est glissée, tu peux supprimer cette ligne :
    Code:
    width:box-sizing;

    Pour le CSS, ce qu'on fait habituellement avec les préfixes c'est les mettre avant la propriété en elle même.
    Exemple :
    Code:
    -webkit-transition: all 300ms;
    transition: all 300ms;

    au lieu de :
    Code:
    transition: all 300ms;
    -webkit-transition: all 300ms;
    En fait, il faut mettre d'abord les propriétés avec préfixe, et ensuite en dernier la propriété standard pour éviter de possibles bugs.

    Enfin, il me semble que ce n'est pas obligatoire, mais tu peux rajouter à la fin de ton LS un petit message dans ce genre :
    "Si jamais vous avez des problèmes avec ce Libre Service, n'hésitez pas à poster dans "Problème avec mon code" ou dans "Personnalisations" pour recevoir de l'aide."
    Perso, j'aime bien le mettre dans l'une des mises en formes proposées, c'est plus pratique pour le mettre bien en avant Very Happy



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Dim 5 Juin 2016 - 23:43

    Merci beaucoup pour les conseils Nihil, ça m'a permis de modifier et ça me fera gagner du temps à l'avenir ! :bwaha:



    avatar
    Nihil Scar Winspeare
    Messages : 4700

    le Jeu 14 Juil 2016 - 11:02

    Top o/

    Sur Safari, il y a un léger bug parfois quand on survole les ronds à côté du contexte ça affiche le contexte parfois, mais il me semble que ça vient de Safari, pas de ton code *grmblr* >->

    Si un autre architecte passe par là et à quelques minutes pour tester la PA et dire que ça marche bien chez lui, ça serait cool, ça permettra de la rendre disponible pour tout le monde plus rapidement peut-être :joie:

    EDIT : j'ai signalé en zone staff que le sujet pouvait être classé, je crois (je suppose T_T) que tout est bon <3


    Dernière édition par Nihil Scar Winspeare le Sam 16 Juil 2016 - 11:27, édité 1 fois



    avatar
    Cheshire Cat
    FémininAge : 20Messages : 873

    le Jeu 14 Juil 2016 - 16:15

    Sachant que j'ai pas Safari vu que je n'ai absolument aucun Mac, impossible de regarder :')

    D'accord, on attends alors ^^



    avatar
    Neva
    FémininAge : 26Messages : 18564

    le Sam 16 Juil 2016 - 18:15

    Je mets ça dans le LS du coup !
    Merci Ches



     
    avatar
    Kâ Lys
    MasculinAge : 54Messages : 299

    le Dim 17 Juil 2016 - 3:40

    Merci



    avatar
    missphan
    FémininAge : 34Messages : 154

    le Dim 17 Juil 2016 - 19:31

    j'adore merci =)



    + my personal brand of heroin
    You’re none of them because you’re all of them. Now that we found each other, you’ve given my past and future meaning. You are the sixth. You are the last. ©endlesslove.
    avatar
    Ryukaï
    MasculinAge : 19Messages : 613

    le Dim 17 Juil 2016 - 21:52

    Roh! c'est classe! Merci Ches!



    avatar
    Kelalin
    FémininAge : 25Messages : 1621

    le Dim 17 Juil 2016 - 23:41

    Merci pour le partage !
    avatar
    Eryu
    FémininAge : 24Messages : 40

    le Lun 18 Juil 2016 - 12:47

    J'aime énormément ce codage, très simple et esthétique en même temps.
    Du coup je vais te l'emprunter sans vergogne 8D
    Merciii !
    avatar
    Lexis
    FémininAge : 27Messages : 40

    le Lun 18 Juil 2016 - 13:31

    tellement classe ! merci du partage :)
    avatar
    ceschosesetranges
    MasculinAge : 24Messages : 13

    le Mer 20 Juil 2016 - 1:13

    Comme c'est joli, j'adore <3 !

    Merci du partage !
    avatar
    messia
    FémininAge : 19Messages : 18

    le Mer 20 Juil 2016 - 12:33

    Elle est super jolie, je vais l'utiliser !
    Merci du partage !
    avatar
    charlint
    FémininAge : 18Messages : 30

    le Mer 20 Juil 2016 - 20:28

    Mercii !
    avatar
    Wayat
    MasculinAge : 19Messages : 4

    le Ven 22 Juil 2016 - 0:04

    Merci pour le travail, elle est vraiment jolie ! o//
    avatar
    Nevr0z
    FémininAge : 28Messages : 74

    le Ven 22 Juil 2016 - 2:55

    Merci :)
    avatar
    br4nd0n
    Age : 23Messages : 50

    le Lun 25 Juil 2016 - 15:01

    La PA est magnifique, elle témoigne d'un bon travail Wink




    Kit by Adil94
    avatar
    FROSTendoloris
    FémininAge : 24Messages : 60

    le Mar 2 Aoû 2016 - 20:24

    C'est trop mignon !

    Merci du partage ! ♥



    avatar
    Hancok
    FémininAge : 33Messages : 992

    le Mer 3 Aoû 2016 - 11:14

    PA vraiment très sympathique et jolie, merci beaucoup.





    avatar
    alas
    FémininAge : 26Messages : 20

    le Jeu 4 Aoû 2016 - 1:19

    Excellent. xD
    avatar
    NanoiHime
    FémininAge : 18Messages : 557

    le Mar 9 Aoû 2016 - 1:17

    merciii



    avatar
    lala zhang
    FémininAge : 26Messages : 342

    le Mar 9 Aoû 2016 - 19:02

    Elle est super belle la pa. Merci du partage =)
    Contenu sponsorisé


      La date/heure actuelle est Mar 26 Sep 2017 - 5:33