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.

Le Deal du moment : -19%
PC portable MSI Gaming Pulse 16” -Ultra7 155H ...
Voir le deal
1299 €

    Page d'accueil pause café

    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    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 !
    Page d'accueil pause café 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
    • Revenir en haut
    Youp
    Youp
    FémininAge : 29Messages : 579

    Jeu 19 Mai 2016 - 3:37

    Elle est grave classe ta PA ! Franchement bravo ^^



    Page d'accueil pause café 262632clip20160315at092522
    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    Ven 27 Mai 2016 - 0:22

    C'est bien gentil, merci beaucoup
    J'ai modifié un petit peu les codes en attendant ^^
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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

    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    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:
    • Revenir en haut
    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5244

    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

    • Revenir en haut
    Cheshire Cat
    Cheshire Cat
    FémininAge : 27Messages : 975

    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 ^^
    • Revenir en haut
    Neva
    Neva
    FémininAge : 33Messages : 18565

    Sam 16 Juil 2016 - 18:15

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



     
    • Revenir en haut
    Kâ Lys
    Kâ Lys
    MasculinAge : 32Messages : 299

    Dim 17 Juil 2016 - 3:40

    Merci



    Page d'accueil pause café Bug
    • Revenir en haut
    missphan
    missphan
    FémininAge : 41Messages : 156

    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.
    • Revenir en haut
    Ryukaï
    Ryukaï
    MasculinAge : 26Messages : 629

    Dim 17 Juil 2016 - 21:52

    Roh! c'est classe! Merci Ches!



    Page d'accueil pause café 15796010 Page d'accueil pause café 14749110
    • Revenir en haut
    Anonymous
    Invité

    Dim 17 Juil 2016 - 23:41

    Merci pour le partage !
    • Revenir en haut
    Eryu
    Eryu
    FémininAge : 32Messages : 55

    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 !
    • Revenir en haut
    Lexis
    Lexis
    FémininAge : 34Messages : 40

    Lun 18 Juil 2016 - 13:31

    tellement classe ! merci du partage :)
    • Revenir en haut
    ceschosesetranges
    ceschosesetranges
    MasculinAge : 31Messages : 14

    Mer 20 Juil 2016 - 1:13

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

    Merci du partage !
    • Revenir en haut
    messia
    messia
    FémininAge : 27Messages : 18

    Mer 20 Juil 2016 - 12:33

    Elle est super jolie, je vais l'utiliser !
    Merci du partage !
    • Revenir en haut
    charlint
    charlint
    FémininAge : 25Messages : 30

    Mer 20 Juil 2016 - 20:28

    Mercii !
    • Revenir en haut
    Wayat
    Wayat
    MasculinAge : 26Messages : 4

    Ven 22 Juil 2016 - 0:04

    Merci pour le travail, elle est vraiment jolie ! o//
    • Revenir en haut
    Nevr0z
    Nevr0z
    FémininAge : 36Messages : 74

    Ven 22 Juil 2016 - 2:55

    Merci :)
    • Revenir en haut
    br4nd0n
    br4nd0n
    Age : 30Messages : 50

    Lun 25 Juil 2016 - 15:01

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



    Page d'accueil pause café Pourbrandonob6
    Kit by Adil94
    • Revenir en haut
    FROSTendoloris
    FROSTendoloris
    FémininAge : 31Messages : 206

    Mar 2 Aoû 2016 - 20:24

    C'est trop mignon !

    Merci du partage ! ♥



    Page d'accueil pause café 3oov
    • Revenir en haut
    Hancok
    Hancok
    FémininAge : 40Messages : 1495

    Mer 3 Aoû 2016 - 11:14

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




    Page d'accueil pause café A67g
    • Revenir en haut
    alas
    alas
    FémininAge : 33Messages : 20

    Jeu 4 Aoû 2016 - 1:19

    Excellent. xD
    • Revenir en haut
    NanoiHime
    NanoiHime
    FémininAge : 26Messages : 566

    Mar 9 Aoû 2016 - 1:17

    merciii



    • Revenir en haut
    lala zhang
    lala zhang
    FémininAge : 33Messages : 377

    Mar 9 Aoû 2016 - 19:02

    Elle est super belle la pa. Merci du partage =)
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 9:59