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 : -60%
OtterBox – Batterie externe avec chargement sans ...
Voir le deal
19.99 €

    Catégories « Lavande » (corps catégorie + onglets + liens persos)

    Elysia
    Elysia
    FémininAge : 25Messages : 139

    Dim 19 Avr 2015 - 2:53

    Rappel du premier message :



    Catégories « Lavande »



    Informations



    Voici une mise en forme de catégories aux tons mauves, que je poste en libre service suite à la commande de MxPrime2.

    Cliquez ici pour visionner l'aperçu.

    Langages : HTML, CSS, Javascript.
    Version : phpBB2.
    Largeur totale : 852px.
    Tailles des images (redimensionnées) : image de fond du titre de la catégorie 800x80px (vous pouvez aussi mettre un pattern) | image description 75x90px | image nouveau-vieux-vérouillé 168x45px

    Explications :
    → les catégories sont en onglets grâce au tutoriel de vic_le_faucheur.
    → un corps catégorie, divisé en 3 images, entoure chaque catégorie.
    → la description contient : l'image de gauche, le texte de description du forum, ainsi que le bloc de liens.
    → les liens ne sont pas les sous-forums, qui ont été retirés selon le désir de MxPrime2. Ils sont remplacés par des liens personnalisables (vous pouvez donc faire un lien pour un sujet ou pour un sous-forum).
    → ne pas mettre plus de 4 liens dans le bloc.
    → le lien du dernier forum actif renvoie vers le dernier message posté.
    → les textes en dégradé sont produits grâce au CSS.

    Pré-requis :
    Vérifiez que dans votre Panneau d'Administration > Affichage > Page d'accueil > Structure et hiérarchie, vous soyez bien en mode "Séparer les catégories sur l'index : Moyen". Puis, sur la même page, plus en bas, vous pouvez modifier la longueur du titre du sujet affiché à 24 caractères.


    Codes



    Template index_box entier : Page d'accueil - affichage des catégories (Pan. d'admin > Affichage > Templates > Général, remplacer l'ancien index_box, enregistrez puis validez Catégories « Lavande » (corps catégorie + onglets + liens persos) - Page 5 Ajouter) :
    Code:
    <table width="100%" border="0" cellspacing="1" cellpadding="0" align="center">
      <tr>
          <td valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <span class="gensmall">{LAST_VISIT_DATE}<br />
            {CURRENT_TIME}<br />
            </span>
            <!-- END switch_user_logged_in -->
            <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
          </td>
          <td class="gensmall" align="right" valign="bottom">
            <!-- BEGIN switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
            <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
            <!-- END switch_user_logged_in -->
            <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
          </td>
      </tr>
    </table>

    <div id="conteneur_onglets_cate">
      <div class="onglet_cate">Catégorie 1</div> •
      <div class="onglet_cate">Catégorie 2</div> •
      <div class="onglet_cate">Catégorie 3</div> •
      <div class="onglet_cate">Catégorie 4</div> •
      <div class="onglet_cate">Catégorie 5</div>
    </div>
      
    <div id="conteneur_cate">
      
    <!-- BEGIN catrow -->

    <!-- BEGIN tablehead -->
    <div class="categorie">
      
    <table border="0" cellpadding="0" cellspacing="0" cellmargin="0" style="width:auto; margin: auto;"><tr><td>
      
      <div class="cat_haut"></div><div class="cat_milieu">
      <table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0" cellmargin="0">
        
      <tr>
        <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      </tr>
    <!-- END tablehead -->
      
    <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
      </tr>
    <!-- END cathead -->
      
    <!-- BEGIN forumrow -->
    <div class="cat_milieu"><table class="forums" border-spacing="0" border="0" cellpadding="0" cellspacing="0" cellmargin="0" valign="middle"><tr><td>

      <tr class="forum_ligne1">
          <td border="0" cellpadding="0" cellspacing="0" cellmargin="0" colspan="2" nowrap="nowrap" width="100%" class="forumlink_block">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                </span>
                <span class="forum_stats">{catrow.forumrow.POSTS} messages | {catrow.forumrow.TOPICS} sujets</span>
          </td>
      </tr>
        
      <tr class="forum_ligne2">
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="forum_description" valign="top">
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
          </td>
          <td class="forum_dernmess" align="center" valign="top">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
            <div class="dernmess_contenu"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></div>
          </td>
      </tr>
        
      </td></tr></table></div>
    <!-- END forumrow -->
      
    <!-- BEGIN catfoot -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
      </tr>
    <!-- END catfoot -->
        
    <!-- BEGIN tablefoot -->
        <div class="cat_milieu"><div class="cat_marge_bas"></div>
        
        </div>
        </table>
      
        <div class="cat_bas"></div>
      
       <img src="{SPACER}" alt="" height="5" width="1" />
    <!-- END tablefoot -->
    </div>
      
    <!-- END catrow -->
    </div>

    Code à coller et à modifier dans la description d'un forum (Pan. d'admin > Général > Catégories et forums > Modifier Catégories « Lavande » (corps catégorie + onglets + liens persos) - Page 5 Editer) :
    Code:
    <table style="width: 100%; max-height:100px; margin-bottom: -12px;" cellpadding="0" cellspacing="0" border="0" border-spacing="0" valign="middle">
      <tbody>
          <tr>
                
            <td class="descr_img">
                <img alt="Image de description" src="http://nsm08.casimages.com/img/2015/04/16//15041606025519468513176454.png" />                    
            </td>
                                            
            <td class="descr_texte">
                <div class="descr_texte_contenu">
                  <div>
    <span class="d_texte_special">Lorem Ipsum</span>Aliquam quis nibh sed augue malesuada hendrerit. Maecenas ultrices scelerisque lectus nec molestie. Nulla suscipit, nibh sit amet viverra adipiscing, lacus eros dapibus magna, id mattis sapien tortor ac odio. Sed id libero porttitor, laoreet nisl eu, mattis nisi. Quisque lorem odio, accumsan et ipsum ac, vehicula commodo neque. Integer tempus nulla eget quam molestie, quis sodales diam rutrum. Vivamus dapibus lacus a magna tempor, id fringilla ligula ornare. Nunc consequat nibh orci, in pulvinar augue ascelerisque at. Duis volutpat pulvinar auctor. Vivamus nec augue mattis, feugiat turpis vitae, ultrices dui. Maecenas blandit vestibulum lorem, eget congue mi iaculis vel. Aliquam non molestie lacus. Curabitur sed enim diam. Morbi sed iaculis orci. Nunc et orci non arcu iaculis pellentesque.          
                  </div>
                </div>
            </td>

            <td class="descr_liens">
                <div><!-- ne pas mettre plus de 4 liens -->
                  <a href="URL DU LIEN">Lien 1</a><br />
                  <a href="URL DU LIEN">Lien 2</a><br />
                  <a href="URL DU LIEN">Lien 3</a><br />
                  <a href="URL DU LIEN">Lien 4</a><br />    
                </div>
            </td>

          </tr>
      </tbody>
    </table>

    CSS (Pan. d'amin > Affichage > Couleurs > Feuille de style CSS > collez puis enregistrez) :
    Code:
    /********************* DEBUT CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

    /* _____ Reglages de base _____ */

    a { text-decoration: none; }
    a:hover { text-decoration: none !important; }


    /* _____ Onglets _____ */

    #conteneur_onglets_cate
    {
      width: 840px;;
      height: 50px;
      line-height: 50px;
      margin: auto;
      margin-top: 20px;
      margin-bottom: 30px;
      overflow: visible;
      background-color: #edeff7;
      box-shadow: 0 5px 5px #9a9faf;
      display: none;
      text-align: center;
      color: #9a9faf;
    }
    #conteneur_onglets_cate div
    {
      display: inline-block;
      color: #8a85ac;
      text-shadow: 0px 0px 3px #fff;
      font-size: 18px;
      margin-left: 5px;
      margin-right: 5px;
      font-family: 'Times New Roman', serif;
      transition: all ease 1s;
    }
    #conteneur_onglets_cate div:hover
    {
      color: rgba(213,215,242, 0.5);
      text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
      transition: all ease 1s;
    }


    /* _____ Fonds categories en images _____ */

    .cat_haut
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472119468513174440.png') top center no-repeat;
      width: 852px;
      height: 20px;
      margin: auto; /*Permet de centrer la partie du corps*/
    }
    .cat_milieu
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510494419468513174442.png') center repeat-y;
      width: 800px;
      margin: auto;
      padding: 0 26px 0 26px;
    }

    .cat_milieu .forumline {
      border: 0 solid;
    }

    .cat_bas
    {
      background: url('http://nsm08.casimages.com/img/2015/04/15//15041510472019468513174439.png') bottom center no-repeat;
      width: 852px;
      height: 29px;
      margin: auto;
    }


    /* _____ Mise en forme titre de la catégorie _____ */

    .secondarytitle
    {
      width: 800px;
      height 80px;
      line-height: 80px;
      background : url('http://nsm08.casimages.com/img/2015/04/18//15041802332319468513180672.png') repeat; /* image fond titre categorie */
      border-bottom: 9px solid #fff;
    }
    .secondarytitle h2
    {
      color: rgba(213,215,242, 0.5);
      font-size: 40px;
      text-transform: uppercase;
      font-weight: normal;
      font-family: 'Times New Roman', serif;
      text-shadow: 1px 4px 5px #d2d5e1, 0 0 0 #000, 1px 4px 6px #d2d5e1, 0 0 1px #7d849c;
    }
    /* reglages pour selection */
    ::-moz-selection { background: #5af; color: #fff; text-shadow: none; }
    ::selection { background: #5af; color: #fff; text-shadow: none; }


    /* _____ Mise en forme titre du forum _____ */

    .forums
    {
      width: 800px;
      padding: 0 10px 0 10px;
      background: #fff;
    }
    .forumlink_block
    {
      height: 25px;
      line-height: 25px;
      background: #edeff8;
      border-top: 1px solid #fff;
      border-bottom: 1px solid #fff;
    }
    .forumlink a
    {
      font-size: 20px;
      color: rgba(213,215,242, 0.5);
      font-weight: normal;
      font-family: 'Times New Roman', serif;
      text-shadow: 0px 3px 3px #d2d5e1, 0 0 0 #000, 0px 3px 3px #d2d5e1, 0 0 1px #7d849c;
      display: inline-block;
      position: relative;
      left: 90px;
      top: 10px;
    }

    .forum_stats {
      font-size: 11px;
      float: right;
      margin: 5px 28px -5px 0;
      color: #b8bdd3;
      font-style: italic;
    }


    /* _____ Mise en forme forum _____ */

    .forum_ligne2
    {
      background: #f7f7f9;
      max-height: 100px;
    }

    /* Description (image + textes + liens) */

    .forum_description /* conteneur */
    {
      margin: 0;
      padding: 0;
      width: 80%;
      padding: 5px;
      height: 90px;
      overflow: hidden;
    }

    .descr_img img /* image perso */
    {
      width: 75px;
      height: 90px;
    }

    .descr_texte /* colonne texte */
    {
      padding-left: 5px;
    }
    .descr_texte .descr_texte_contenu /* conteneur texte */
    {
      padding: 2px;
      width: 410px;
      background: #fff;
      margin: 0;
    }
    .descr_texte .descr_texte_contenu div /* texte */
    {
      padding: 5px;
      border: solid 1px #ced2de;
      height: 74px;
      overflow: auto;
      font-size: 16px;
      color: #b3b3b3;
      text-align: justify;
    }
    .d_texte_special /* texte special du debut */
    {
      font-size: 18px;
      font-weight: bold;
    }
    .d_texte_special::after /* mettre point apres texte special */
    {
      content: " . ";
      font-size: 20px;
      font-weight: 900;
    }

    .descr_liens /* colonne liens persos */
    {
      padding-left: 5px;
    }
    .descr_liens div /* conteneur liens persos */
    {
      background: #fff;
      width: 98px;
      height: 90px;
      text-align: center;
      line-height: 23px;
    }
    .descr_liens div a /* liens persos */
    {
      display: inline-block;
      height: 25%;
      font-size: 16px;
      color: #b3b3b3;
    }
    .descr_liens div a::before /* mettre point avant lien perso */
    {
      content: ". ";
      font-weight: 700;
    }


    /* Dernier message du forum */

    .forum_dernmess {
      margin: 0;
      padding: 5px 5px 0 0;
      width: 20%;
      height: 90px;
    }

    .forum_dernmess img {
      width: 168px;
      height: 45px;
    }


    .dernmess_contenu
    {
      width: 100%;
      height: 40px;
      background: #fff;
      padding-top: 5px;
    }
    .dernmess_contenu img
    {
      display: none;
    }
    .dernmess_contenu .gensmall, .dernmess_contenu .gensmall a
    {
      line-height: 0.9em;
      font-size: 13px;
      color: #b3b3b3;
    }
    .dernmess_contenu .gensmall a
    {
      color: #838cb2;
    }


    /* _____ Marge interieure bas categories _____ */

    .cat_marge_bas
    {
      width: 800px;
      height: 10px;
      margin: auto;
      background: #fff;
    }

    /********************* FIN CATEGORIES PAR ELYSIA DE NEVER UTOPIA *********************/

    Javascript (Pan. d'admin > Modules > Gestion des codes javascript > Activez. Puis créez un nouveau, cochez Placement : Sur l'Index et collez) :
    Code:
    $('document').ready(function()
          {
          if($('.categorie').size() > 1)
            {
              $('#conteneur_onglets_cate').css( 'display' , 'block' );
              $('#conteneur_onglets_cate .onglet_cate').click(function()
              {
                change_categorie( $('.onglet_cate', '#conteneur_onglets_cate').index( this ) )
              });
            
             $('.onglet_cate:eq(0)').click();
        }
          });

          function change_categorie( index )
          {
              if( $('.categorie:eq(' + index + ')').size() != 0 )
              {
                $('#conteneur_cate').css( 'min-height' , $('.categorie:eq(' + index + ')').outerHeight() );

              
               $('.categorie').css( 'display' , 'none' );
                $('.categorie:eq(' + index + ')').fadeIn( 500 );
              
               $('.onglet_cate.actif').removeClass('actif');
                $('.onglet_cate:eq('+ index +')').addClass('actif');
              }
              else alert('Vous ne pouvez pas accéder à cette catégorie.');
          }

    $(function(){
        $('.last-post-icon').each(function(){
            var link = $(this).attr('href');
            $(this).closest('span').find('a').eq(0).attr('href', link);
        });
    });


    Le crédit est obligatoire. Vous pouvez créditer "catégories par Elysia de Never Utopia" ou bien seulement "catégories provenant de Never Utopia".


    Un petit merci ou commentaire est toujours le bienvenu ^^
    Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.



    avatar
    Nal Souclade
    MasculinAge : 25Messages : 167

    Mar 23 Aoû 2016 - 13:57

    C'est pile ce que je cherchais ! Merci beaucoup !
    LOUVE ☽
    LOUVE ☽
    FémininAge : 34Messages : 53

    Mer 24 Aoû 2016 - 21:24

    Sublime, merci du partage
    Carasama
    Carasama
    FémininAge : 29Messages : 98

    Ven 26 Aoû 2016 - 3:42

    amazing
    memoriam
    memoriam
    FémininAge : 32Messages : 73

    Sam 27 Aoû 2016 - 23:07

    c'est magnifique! merci du partage :)
    dean winchester
    dean winchester
    MasculinAge : 30Messages : 85

    Mer 31 Aoû 2016 - 0:01

    merci bien !
    Neya
    Neya
    FémininAge : 25Messages : 164

    Mer 31 Aoû 2016 - 0:04

    Merci beaucoup ! ♥
    SIXE
    SIXE
    FémininAge : 33Messages : 39

    Dim 4 Sep 2016 - 1:22

    Merci beaucoup ♥
    Ohana Firefly
    Ohana Firefly
    FémininAge : 29Messages : 43

    Mar 6 Sep 2016 - 0:19

    merci Very Happy
    Lughnassadh
    Lughnassadh
    FémininAge : 34Messages : 27

    Mer 7 Sep 2016 - 21:16

    Merci !
    HazelW
    HazelW
    FémininAge : 31Messages : 51

    Jeu 8 Sep 2016 - 14:48

    Merci !!



    Catégories « Lavande » (corps catégorie + onglets + liens persos) - Page 5 Wsld90Catégories « Lavande » (corps catégorie + onglets + liens persos) - Page 5 GryffindorBaseCatégories « Lavande » (corps catégorie + onglets + liens persos) - Page 5 Gryffindor-gryffindor-21480238-100-100
    avatar
    Sépia
    FémininAge : 28Messages : 70

    Mer 14 Sep 2016 - 16:16

    C'est super! Merci!
    Hakura
    Hakura
    FémininAge : 25Messages : 32

    Mer 14 Sep 2016 - 17:40

    Aaah merci !
    Samiro
    Samiro
    MasculinAge : 28Messages : 52

    Dim 18 Sep 2016 - 20:41

    Merci
    Crazy-Sweet
    Crazy-Sweet
    FémininAge : 33Messages : 131

    Lun 26 Sep 2016 - 14:46

    J'aime beaucoup <3 Merci !




    Our ice hearts beat
    Voir le monde dans un grain de sable. Et le paradis dans une fleur sauvage. Tenir l'infini dans le creux de sa main. Et l'éternité dans une heure - SIR WILLIAM BLAKE

    Smikyou
    Smikyou
    FémininAge : 31Messages : 85

    Ven 30 Sep 2016 - 19:31

    ty
    ♪ Extasy ♪
    ♪ Extasy ♪
    FémininAge : 34Messages : 117

    Sam 1 Oct 2016 - 21:30

    Merci pour le partage :love:
    Anonymous
    Invité

    Ven 7 Oct 2016 - 1:58

    Merci!
    Mystigri
    Mystigri
    FémininAge : 21Messages : 97

    Ven 7 Oct 2016 - 19:00

    J'aime bien les effets donnés au texte. ^^



    Anonymous
    Invité

    Ven 14 Oct 2016 - 13:01

    Merci beaucoup ! ♥
    Seano'k
    Seano'k
    MasculinAge : 28Messages : 20

    Lun 17 Oct 2016 - 17:56

    Merci
    Aile de l'Ange
    Aile de l'Ange
    FémininAge : 26Messages : 110

    Jeu 20 Oct 2016 - 18:27

    merci du partage ^^
    jean-claude
    jean-claude
    MasculinAge : 50Messages : 44

    Mar 25 Oct 2016 - 18:44

    Merci du partage
    Omys
    Omys
    FémininAge : 29Messages : 63

    Mer 16 Nov 2016 - 14:54

    merci !
    Mozart
    Mozart
    FémininAge : 30Messages : 54

    Jeu 17 Nov 2016 - 2:16

    merci beaucoup !



    Catégories « Lavande » (corps catégorie + onglets + liens persos) - Page 5 Tumblr_mjdkx9iT191r24z09o1_500
    Safaya
    Safaya
    FémininAge : 27Messages : 23

    Jeu 17 Nov 2016 - 22:36

    Ahh Merci oAo
    Contenu sponsorisé


      La date/heure actuelle est Ven 13 Déc 2024 - 17:19