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

    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.



    avatar
    Matec39
    MasculinAge : 32Messages : 5

    le Mer 8 Avr 2015 - 20:57

    Merci pour ce thème simple et efficace.
    Je n'arrive pas cependant à "appeler mon forum pour synchroniser les derniers sujets".
    Ma zone derniers sujets reste vide.
    J'imagine qu'il faut que je rentre l'adresse mail de mon forum ? Mais je ne sais pas ou dans le code après "recent topics".
    Quelqu'un peut-il me conseiller ?
    avatar
    Miraan
    FémininAge : 27Messages : 4

    le Mar 9 Juin 2015 - 22:17

    Merci !
    avatar
    Dayaxa
    FémininAge : 24Messages : 60

    le Mer 10 Juin 2015 - 14:58

    super !



    Bloup.
    avatar
    King Atlas
    MasculinAge : 24Messages : 18

    le Jeu 11 Juin 2015 - 19:22

    Merci :)
    avatar
    Cassisse
    FémininAge : 26Messages : 121

    le Sam 2 Jan 2016 - 21:59

    mercii
    avatar
    Kelalin
    FémininAge : 26Messages : 1948

    le Sam 2 Jan 2016 - 22:08

    Merci pour le partage ! (●´∀`●)
    avatar
    Voltino
    MasculinAge : 23Messages : 55

    le Mar 19 Jan 2016 - 3:45

    Merci
    Psiconda
    FémininAge : 33Messages : 18

    le Sam 30 Jan 2016 - 14:11

    Simple mais magnifique =)
    avatar
    Ilario
    MasculinAge : 19Messages : 12

    le Jeu 18 Fév 2016 - 14:17

    Merci
    avatar
    Shi
    MasculinAge : 27Messages : 58

    le Jeu 18 Fév 2016 - 18:45

    Très joli merci :cow:
    avatar
    Argy
    FémininAge : 20Messages : 98

    le Dim 21 Fév 2016 - 11:31

    Merci :3 ♥
    avatar
    Pythia
    FémininAge : 30Messages : 182

    le Lun 14 Mar 2016 - 17:04

    J'aime beaucoup merci du partage ^^



    avatar
    R.Falsworth
    FémininAge : 21Messages : 92

    le Dim 1 Mai 2016 - 12:29

    merci ! c:
    avatar
    Aidden
    MasculinAge : 24Messages : 45

    le Lun 30 Mai 2016 - 0:43

    merci !
    avatar
    .pillowtalk
    FémininAge : 22Messages : 7

    le Lun 30 Mai 2016 - 4:23

    MERCII !
    avatar
    Lilynufare
    FémininAge : 28Messages : 341

    le Lun 8 Aoû 2016 - 19:44

    sympa merci
    avatar
    Lorenzo2704
    MasculinAge : 44Messages : 7

    le Dim 21 Aoû 2016 - 13:12

    merci
    avatar
    Thessia
    FémininAge : 29Messages : 74

    le Dim 4 Sep 2016 - 23:58

    Merci ^^



    Ce n'est pas parce que tu ne le vois pas que ce n'est pas réel,
    Ce n'est pas par ce que tu n'y arrive pas que ce n'est pas possible.
    avatar
    SuperSpaceCab
    MasculinAge : 34Messages : 36

    le Ven 23 Sep 2016 - 6:38

    Merci !
    avatar
    Pentacle
    MasculinAge : 26Messages : 63

    le Dim 2 Oct 2016 - 18:23

    merci l'ami
    avatar
    Star Rock Shooter
    MasculinAge : 21Messages : 11

    le Sam 8 Oct 2016 - 16:39

    Merci beaucoup ! :bisou:
    avatar
    Lexucio
    MasculinAge : 24Messages : 33

    le Dim 23 Oct 2016 - 14:37

    Merci ^^
    avatar
    Invité

    le Jeu 27 Oct 2016 - 17:44

    vraiment sympa :) merci au demandeur et au codeur :)
    avatar
    Donquichotte
    MasculinAge : 22Messages : 48

    le Jeu 3 Nov 2016 - 0:21

    merci
    avatar
    Dariel
    FémininAge : 48Messages : 49

    le Mer 9 Nov 2016 - 0:31

    Merci Nyo

    :cow:



    C'est la vie Invité ! Pas le paradis.
    Contenu sponsorisé


      La date/heure actuelle est Mer 26 Sep 2018 - 6:31