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.


    PA simple en trois parties

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 5018

    le Lun 30 Juin 2014 - 23:50

    Page d'accueil



    Ceci est un code de PA crée suite à la Demande de LinaK, ici.

    Testé sous phbb2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    Vous DEVEZ avoir le portail activé pour pouvoir afficher les derniers sujets! Sinon, modifiez ce bloc pour qu'il contienne autre chose!


    Les images


    LEs seules images de la PA sont celles à droite (les blanches). Leur taille est de 243px de largeur et 26px de hauteur.

    Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Généralités :
    Code:
    <div id="contour_pa">
     
      <div id="bloc_gauche_pa">
         
          <h1>
              ~ Le Chicaneur de Pottermore ~
          </h1>
         
          <div id="texte_gauche_pa">
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit risus sed leo fringilla, ac fermentum ligula mollis. Ut tincidunt quis sem lobortis hendrerit. Nullam ligula orci, hendrerit et ante sed, volutpat condimentum dui. Aenean iaculis quis arcu sit amet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mauris, mollis vitae bibendum pharetra, vehicula id ipsum. Morbi bibendum velit mauris, sit amet molestie dui commodo pretium. Proin id urna in eros commodo adipiscing id eu mi. Donec consectetur metus quam, a mollis turpis venenatis eget. Vivamus venenatis purus a scelerisque aliquam. Praesent volutpat nibh sed dolor vestibulum vestibulum. Sed venenatis et nisl ornare imperdiet. Etiam sed nisi aliquet, facilisis lorem id, egestas mauris. Nam lobortis mauris dui. Phasellus tempus lobortis imperdiet. Duis quis ullamcorper lacus.<br /><br />Quisque a ultrices justo, in gravida ante. Praesent blandit sagittis pellentesque. Vivamus eget aliquet odio. Nam adipiscing mauris arcu, in interdum mi molestie vel. Ut vel augue bibendum, dapibus felis vel, pulvinar orci. Nam porttitor enim vitae nisi sodales aliquam. Cras at eros non metus mollis accumsan eu eget libero. Maecenas lectus tortor, varius sed volutpat id, elementum at justo.<br /><br />Vivamus tristique eros vel enim blandit, sit amet accumsan nisl gravida. Integer bibendum libero a justo cursus ornare. Fusce a adipiscing purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut pulvinar porta nunc, vel aliquam lectus elementum et. Fusce imperdiet mauris sed euismod consequat. Suspendisse consectetur, lorem id tristique lobortis, tortor justo molestie leo, non adipiscing dui lorem et ipsum. <br />
          </div>
         
      </div>
     
      <div id="bloc_droite_pa">
         
          <h1>
              ~ En ce moment sur le forum ~
          </h1>
         
          <h2 id="gauche_titre_pa">
              Derniers Sujets
          </h2>
         
          <h2 id="droite_titre_pa">
              Titre
          </h2>
         
          <div id="marquee_latest_pa">
           
            <marquee behavior="scroll" direction="up" scrollamount="1">
               
                <div id="recent-topics">
                 
                </div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
            </marquee>
           
          </div>
         
          <div id="droite_moment_pa">
           
            <div class="case_info_pa">
                <img src="http://i39.servimg.com/u/f39/09/03/38/36/test10.png" />
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit risus sed leo fringilla, ac fermentum ligula mollis. Ut tincidunt quis sem lobortis hendrerit. Nullam ligula orci, hendrerit et ante sed, volutpat condimentum dui. Aenean iaculis quis arcu sit amet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mauris, mollis vitae bibendum pharetra, vehicula id ipsum. Morbi bibendum velit mauris, sit amet molestie dui commodo pretium. Proin id urna in eros commodo adipiscing id eu mi. Donec consectetur metus quam, a mollis turpis venenatis eget. Vivamus venenatis purus a scelerisque aliquam. Praesent volutpat nibh sed dolor vestibulum vestibulum. Sed venenatis et nisl ornare imperdiet. Etiam sed nisi aliquet, facilisis lorem id, egestas mauris. Nam lobortis mauris dui. Phasellus tempus lobortis imperdiet. Duis quis ullamcorper lacus.<br /><br />Quisque a ultrices justo, in gravida ante. Praesent blandit sagittis pellentesque. Vivamus eget aliquet odio. Nam adipiscing mauris arcu, in interdum mi molestie vel. Ut vel augue bibendum, dapibus felis vel, pulvinar orci. Nam porttitor enim vitae nisi sodales aliquam. Cras at eros non metus mollis accumsan eu eget libero. Maecenas lectus tortor, varius sed volutpat id, elementum at justo.<br />
                </p>
               
            </div>
           
            <div class="case_info_pa">
                <img src="http://i39.servimg.com/u/f39/09/03/38/36/test10.png" />
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit risus sed leo fringilla, ac fermentum ligula mollis. Ut tincidunt quis sem lobortis hendrerit. Nullam ligula orci, hendrerit et ante sed, volutpat condimentum dui. Aenean iaculis quis arcu sit amet sollicitudin. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ante mauris, mollis vitae bibendum pharetra, vehicula id ipsum. Morbi bibendum velit mauris, sit amet molestie dui commodo pretium. Proin id urna in eros commodo adipiscing id eu mi. Donec consectetur metus quam, a mollis turpis venenatis eget. Vivamus venenatis purus a scelerisque aliquam. Praesent volutpat nibh sed dolor vestibulum vestibulum. Sed venenatis et nisl ornare imperdiet. Etiam sed nisi aliquet, facilisis lorem id, egestas mauris. Nam lobortis mauris dui. Phasellus tempus lobortis imperdiet. Duis quis ullamcorper lacus.<br /><br />Quisque a ultrices justo, in gravida ante. Praesent blandit sagittis pellentesque. Vivamus eget aliquet odio. Nam adipiscing mauris arcu, in interdum mi molestie vel. Ut vel augue bibendum, dapibus felis vel, pulvinar orci. Nam porttitor enim vitae nisi sodales aliquam. Cras at eros non metus mollis accumsan eu eget libero. Maecenas lectus tortor, varius sed volutpat id, elementum at justo.<br />
                </p>
               
            </div>
           
          </div>
         
          <div id="barre_moment_pa">
           
          </div>
         
      </div>
     
      <div id="bloc_liens_pa">
          <a href="#">Crédits et Remerciements</a> ¤ <a href="#">Le Staff du Chicaneur</a> ¤ <a href="#">Notre section RPG</a> ¤ <a href="#">Autre Lien</a> ¤ <a href="#">Autre Lien</a> ¤
      </div>
    </div>

    Le CSS:
    Code:
    /********** DÉBUT PA **********/
    /* Entoure toute la PA */
    #contour_pa {
      width: 895px;
      padding: 10px 0 10px 0;
      margin: auto;
      /* Couleur de fond */
      background-color: #1D1A19;
    }

    /* Mise en forme des titres (Chicaneur de Pottermore et En ce moment) */
    #contour_pa h1 {
      /* Annulation des effets de FA */
      display: block;
      margin: 0px;
      border-width: 0px;
      background: none;
      margin-top: 10px;
      /* Taille */
      width: 100%;
      font-weight: normal;
      text-align: center;
      /* Taille puis couleur du texte */
      font-size: 15pt;
      color: #E0D0A6;
    }

    /* Met en place le bloc de gauche (Chicaneur de Pottermore) */
    #bloc_gauche_pa {
      display: inline-block;
      vertical-align: bottom;
      /* Taille */
      width: 345px;
      height: 307px;
      margin-right: 2px;
      padding: 5px;
      /* Bordure */
      border: 1px solid #E0D0A6;
      border-radius: 10px;
    }

    /* Mise en place du carré de texte dans la partie gauche (Chicaneur de Pottermore) */
    #texte_gauche_pa {
      /* Taille */
      width: 320px;
      height: 240px;
      margin: auto;
      margin-top: 15px;
      padding: 5px;
      overflow: auto;
      /* Alignement puis couleur du texte */
      text-align: justify;
      color: #FFFFFF;
      /* Bordure */
      border: 2px solid #E0D0A6;
    }

    /* Met en place le bloc de gauche (En ce moment) */
    #bloc_droite_pa {
      display: inline-block;
      vertical-align: bottom;
      /* Taille */
      width: 525px;
      height: 317px;
      margin-left: 2px;
      /* Bordure */
      border: 1px solid #E0D0A6;
      border-radius: 10px;
      /* Pour le placement interne des blocs */
      text-align: left;
    }

    /* Met en forme le texte des sujets récents */
    #recent-topics {
      /* Couleur puis taille du texte */
      color: black;
      font-size: 9pt;
    }

    /* Met en forme les liens des sujets récents */
    #recent-topics a {
      /* Couleur puis taille */
      color: #E0D0A6;
      font-size: 12pt;
      text-decoration: none;
    }

    /* Met en forme les petits titres (Derniers sujets et Titre) de la partie de droite (En ce moment) */
    #contour_pa h2 {
      display: inline-block;
      vertical-align: middle;
      margin: 0px;
      margin-top: 10px;
      margin-bottom: 10px;
      /* Alignement du texte puis couleur */
      text-align: center;
      color: white;
    }

    /* Taille du titre Derniers Sujets pour l'aligner au centre du bloc correspondant */
    #contour_pa h2#gauche_titre_pa {
      width: 200px;
      /* Correspond à la marge du bloc derniers sujets */
      margin-left: 20px;
    }

    /* Taille du titre Titre pour l'aligner au centre du bloc correspondant */
    #contour_pa h2#droite_titre_pa {
      width: 268px;
      /* Correspond à la marge du bloc */
      margin-left: 10px;
    }

    /* Mise en forme du bloc contenant les derniers sujets */
    #marquee_latest_pa {
      display: inline-block;
      vertical-align: top;
      /* Taille */
      height: 190px;
      width: 190px;
      padding: 5px;
      margin-left: 20px;
      margin-right: 5px;
      /* Alignement du texte */
      text-align: justify;
      /* Couleur de fond puis bordure */
      background-color: #7F6C53;
      border: 1px dotted white;
      overflow: hidden;
    }

    /* Création du bloc de droite dans le bloc En ce moment */
    #droite_moment_pa {
      display: inline-block;
      vertical-align: top;
      /* Taille */
      width: 268px;
      height: 205px;
      margin-left: 10px;
      overflow: hidden;
    }

    /* Création des cases dans ce même bloc */
    .case_info_pa {
      /* Taille */
      width: auto;
      height: 81px;
      padding: 5px 10px 5px 10px;
      margin-bottom: 10px;
      /* Bordure */
      border: 2px solid #E0D0A6;
    }

    /* Mise en forme du texte dans ces cases */
    .case_info_pa p {
      /* Taille */
      width: 233px;
      height: 30px;
      padding: 5px;
      margin: 0px;
      margin-top: 10px;
      overflow: auto;
      /* Couleur puis alignement du texte */
      color: #FFFFFF;
      text-align: justify;
    }

    /* Barre dans le bloc En ce moment */
    #barre_moment_pa {
      /* Taille */
      width: 480px;
      height: 15px;
      margin: auto;
      margin-top: 10px;
      padding: 5px;
      /* Couleur de bordure */
      border: 2px solid #E0D0A6;
    }

    /* Création de la barre de liens en bas de la PA */
    #bloc_liens_pa {
      /* Taille */
      width: 885px;
      height: 27px;
      margin-top: 5px;
      padding-top: 5px;
      /* Bordure */
      border: 2px solid #E0D0A6;
      /* Couleur du texte */
      color: #FFFFFF;
      overflow: hidden;
    }

    /* Mise en forme des liens dans la barre de liens */
    #bloc_liens_pa a, #bloc_liens_pa a:link, #bloc_liens_pa a:active, #bloc_liens_pa a:visited {
      /* Couleur puis taille */
      color: #FFFFFF;
      font-size: 13pt;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /* Mise en forme des liens dans la barre de liens au passage de la souris */
    #bloc_liens_pa a:hover {
      /* Couleur */
      color: #E0D0A6;
      text-decoration: none !important;
      transition: all ease 1s;
    }

    /********** FIN PA **********/


    Comment retirer les derniers sujets?


    Le bloc des derniers sujets dans le HTML est celui-ci:
    Code:
          <div id="marquee_latest_pa">
           
            <marquee behavior="scroll" direction="up" scrollamount="1">
               
                <div id="recent-topics">
                 
                </div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
            </marquee>
           
          </div>

    Il vous suffit de supprimer ceci:
    Code:
     
            <marquee behavior="scroll" direction="up" scrollamount="1">
               
                <div id="recent-topics">
                 
                </div><script type="text/javascript">jQuery.get('/portal.forum?pid=1',function(data){jQuery('#recent-topics').html(jQuery(data).find('#comments_scroll_div').html());});</script>
            </marquee>

    Et remplacer par n'importe quoi, par exemple un texte:
    Code:
          <div id="marquee_latest_pa">
           
            Je suis un texte.
           
          </div>

    Je rappelle que pour la changement de la mise en forme de ce bloc, même avec les derniers sujets retirés, est ceci dans le CSS:
    Code:
    /* Mise en forme du bloc contenant les derniers sujets */
    #marquee_latest_pa {
      display: inline-block;
      vertical-align: top;
      /* Taille */
      height: 190px;
      width: 190px;
      padding: 5px;
      margin-left: 20px;
      margin-right: 5px;
      /* Alignement du texte */
      text-align: justify;
      /* Couleur de fond puis bordure */
      background-color: #7F6C53;
      border: 1px dotted white;
      overflow: hidden;
    }

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    Vos commentaires et remerciements sont toujours bienvenus ^^
    Si vous avez des problèmes avec ce LS, venez poster ici.



    avatar
    Halloween
    FémininAge : 24Messages : 9754

    le Mar 22 Juil 2014 - 19:53

    Merci Nyo, je déplace Wink




    < / Libre service codage >
    avatar
    Smokerlilitrope
    FémininAge : 29Messages : 45

    le Mar 22 Juil 2014 - 20:00

    magnifique **
    avatar
    Nord
    MasculinAge : 18Messages : 169

    le Jeu 7 Aoû 2014 - 15:38

    C'est très jolie, merci pour le partage !
    avatar
    Elf-of-Nature
    FémininAge : 24Messages : 152

    le Jeu 7 Aoû 2014 - 16:25

    Merci :-)



    avatar
    moiettoilove
    FémininAge : 23Messages : 32

    le Ven 8 Aoû 2014 - 12:08

    Merci !!
    avatar
    Hellow
    MasculinAge : 24Messages : 33

    le Sam 9 Aoû 2014 - 12:18

    Très joli ! :)
    avatar
    Draly
    FémininAge : 25Messages : 109

    le Lun 8 Sep 2014 - 20:23

    Pas mal du tout.:p
    avatar
    Xyldan
    MasculinAge : 22Messages : 12

    le Sam 13 Sep 2014 - 19:10

    Sobre et classe, merci !
    avatar
    Susu-chan
    FémininAge : 28Messages : 78

    le Jeu 18 Sep 2014 - 12:19

    Merci.
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Lun 27 Oct 2014 - 10:40

    Merci !



    Just want to be yours.
    avatar
    Kaamee
    FémininAge : 22Messages : 110

    le Dim 9 Nov 2014 - 16:51

    Merci o/



    avatar
    Lutine
    FémininAge : 31Messages : 102

    le Jeu 20 Nov 2014 - 21:48

    merci!
    avatar
    Nominia
    FémininAge : 27Messages : 67

    le Ven 21 Nov 2014 - 18:01

    Merci à toi !
    avatar
    The One Pandemonium
    FémininAge : 25Messages : 97

    le Ven 21 Nov 2014 - 19:00

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    avatar
    BUISSEN
    FémininAge : 22Messages : 11

    le Jeu 27 Nov 2014 - 14:47

    Merci ! Very Happy
    J'vais tester ça pour voir ce que cela donnes. *-*
    avatar
    Moro-PM
    FémininAge : 16Messages : 149

    le Ven 28 Nov 2014 - 13:18

    Meurchii ! :3
    avatar
    Obsidienne*
    FémininAge : 24Messages : 13

    le Dim 14 Déc 2014 - 15:10

    Joli merci :)
    avatar
    Invité

    le Dim 14 Déc 2014 - 15:18

    Merci!
    avatar
    Chèlha
    FémininAge : 25Messages : 121

    le Sam 20 Déc 2014 - 19:04

    Merci
    avatar
    Féhéla
    FémininAge : 45Messages : 238

    le Dim 21 Déc 2014 - 1:31

    merci
    avatar
    Tropik
    MasculinAge : 24Messages : 58

    le Dim 21 Déc 2014 - 21:21

    Merci !!




    lovedesign

    avatar
    Deed01
    MasculinAge : 40Messages : 340

    le Jeu 15 Jan 2015 - 6:00

    simple mais efficace !merci Very Happy
    avatar
    Professeur Felyne
    MasculinAge : 32Messages : 84

    le Dim 18 Jan 2015 - 22:29

    Merci ^^



    .
    avatar
    Colorful
    MasculinAge : 28Messages : 15

    le Lun 16 Fév 2015 - 4:10

    Merci, c'est très joli
    Contenu sponsorisé


      La date/heure actuelle est Lun 22 Oct 2018 - 23:23