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.

-15%
Le deal à ne pas rater :
-200€ sur ce PC Portable Gamer – LENOVO Legion 5 15ACH6H – ...
1099 € 1299 €
Voir le deal

    PA simple en trois parties

    NyoTheNeko
    NyoTheNeko
    FémininAge : 27Messages : 5686

    Lun 30 Juin 2014 - 23:50

    Rappel du premier message :

    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.



    Domori
    Domori
    MasculinAge : 28Messages : 32

    Mer 9 Nov 2016 - 11:20

    Merci :)
    Cendre de Lune
    Cendre de Lune
    FémininAge : 57Messages : 11

    Sam 26 Nov 2016 - 20:44

    Merci
    Cheub
    Cheub
    MasculinAge : 33Messages : 23

    Mar 3 Jan 2017 - 13:01

    Merci beaucoup



    PA simple en trois parties - Page 3 Backstab
    Uneraell
    Uneraell
    FémininAge : 28Messages : 7

    Dim 26 Fév 2017 - 13:40

    Top, merci ! :lovebomb:
    The A.
    The A.
    FémininAge : 23Messages : 38

    Sam 18 Mar 2017 - 12:16

    Merci !



    PA simple en trois parties - Page 3 Tumblr_mma46f4SJM1qjqvo3o1_500
    Jamais contente.
    Ennie
    Ennie
    FémininAge : 57Messages : 93

    Ven 31 Mar 2017 - 9:36

    merci
    Anéa
    Anéa
    FémininAge : 31Messages : 157

    Ven 31 Mar 2017 - 19:21

    Sympa cette idée des derniers messages sur la PA. Merci pour l'astuce ^^



    PA simple en trois parties - Page 3 305535lulupsdcopie
    avatar
    Hop80
    MasculinAge : 31Messages : 138

    Dim 23 Avr 2017 - 19:24

    Merci pour le partage
    avatar
    Hane
    FémininAge : 22Messages : 64

    Mer 31 Mai 2017 - 20:53

    merci!
    Sighild
    Sighild
    FémininAge : 34Messages : 225

    Ven 2 Juin 2017 - 17:58

    Merci beaucoup pour ce tuto!
    Bien pratique!
    Sakura Sinister
    Sakura Sinister
    FémininAge : 34Messages : 35

    Ven 16 Juin 2017 - 9:07

    merci
    Mephitiques
    Mephitiques
    MasculinAge : 21Messages : 29

    Dim 9 Juil 2017 - 13:21

    merci
    Jak SZ
    Jak SZ
    FémininAge : 31Messages : 217

    Mar 11 Juil 2017 - 22:09

    Merci :love:
    Tiffany.
    Tiffany.
    FémininAge : 31Messages : 12

    Dim 15 Oct 2017 - 12:51

    Merci. :)
    Doriand
    Doriand
    MasculinAge : 30Messages : 91

    Sam 17 Fév 2018 - 16:28

    merci
    Noir Black
    Noir Black
    FémininAge : 35Messages : 59

    Sam 14 Avr 2018 - 22:07

    merci
    Eva Mayers
    Eva Mayers
    FémininAge : 31Messages : 3

    Sam 21 Avr 2018 - 20:57

    Merci beaucoup!
    Contenu sponsorisé


      La date/heure actuelle est Mar 20 Avr 2021 - 2:37