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.

-10%
Le deal à ne pas rater :
PC Portable Gamer ASUS TUF Gaming F15 | 15,6″ FHD IPS 144 Hz – ...
599.99 € 669.99 €
Voir le deal

    PA simple en trois parties

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

    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.



    Anonymous
    Invité

    Mar 22 Juil 2014 - 19:53

    Merci Nyo, je déplace Wink
    Anonymous
    Invité

    Mar 22 Juil 2014 - 20:00

    magnifique **
    Nord
    Nord
    MasculinAge : 24Messages : 169

    Jeu 7 Aoû 2014 - 15:38

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

    Jeu 7 Aoû 2014 - 16:25

    Merci :-)



    PA simple en trois parties 216988Renardssigna
    moiettoilove
    moiettoilove
    FémininAge : 28Messages : 32

    Ven 8 Aoû 2014 - 12:08

    Merci !!
    Hellow
    Hellow
    MasculinAge : 29Messages : 33

    Sam 9 Aoû 2014 - 12:18

    Très joli ! :)
    Draly
    Draly
    FémininAge : 31Messages : 119

    Lun 8 Sep 2014 - 20:23

    Pas mal du tout.:p
    Xyldan
    Xyldan
    MasculinAge : 28Messages : 12

    Sam 13 Sep 2014 - 19:10

    Sobre et classe, merci !
    Susu-chan
    Susu-chan
    FémininAge : 33Messages : 81

    Jeu 18 Sep 2014 - 12:19

    Merci.
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 24Messages : 304

    Lun 27 Oct 2014 - 10:40

    Merci !



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

    Dim 9 Nov 2014 - 16:51

    Merci o/



    Lutine
    Lutine
    FémininAge : 36Messages : 102

    Jeu 20 Nov 2014 - 21:48

    merci!
    Nominia
    Nominia
    FémininAge : 33Messages : 67

    Ven 21 Nov 2014 - 18:01

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

    Ven 21 Nov 2014 - 19:00

    Merci!



    « Une oeuvre d’art, c’est un monceau de cicatrices. »
    PA simple en trois parties 1416253868-ladycrowcoupe
    BUISSEN
    BUISSEN
    FémininAge : 27Messages : 11

    Jeu 27 Nov 2014 - 14:47

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

    Ven 28 Nov 2014 - 13:18

    Meurchii ! :3
    Obsidienne*
    Obsidienne*
    FémininAge : 29Messages : 13

    Dim 14 Déc 2014 - 15:10

    Joli merci :)
    Anonymous
    Invité

    Dim 14 Déc 2014 - 15:18

    Merci!
    Chèlha
    Chèlha
    FémininAge : 31Messages : 121

    Sam 20 Déc 2014 - 19:04

    Merci
    Féhéla
    Féhéla
    FémininAge : 50Messages : 238

    Dim 21 Déc 2014 - 1:31

    merci
    Tropik
    Tropik
    MasculinAge : 30Messages : 58

    Dim 21 Déc 2014 - 21:21

    Merci !!




    lovedesign

    Deed01
    Deed01
    MasculinAge : 46Messages : 343

    Jeu 15 Jan 2015 - 6:00

    simple mais efficace !merci Very Happy
    Professeur Felyne
    Professeur Felyne
    MasculinAge : 38Messages : 85

    Dim 18 Jan 2015 - 22:29

    Merci ^^



    .
    Colorful
    Colorful
    MasculinAge : 34Messages : 15

    Lun 16 Fév 2015 - 4:10

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


      La date/heure actuelle est Mar 19 Mar 2024 - 4:52