LS For Everyone
LS for everyone

Forum de Libre Service - Codage et Graphisme


    Invision - Catégories simples

    Partagez
    avatar
    Adèlys
    Admin

    Messages : 30
    Date d'inscription : 08/03/2018

    Invision - Catégories simples

    Message par Adèlys le Ven 13 Avr - 11:36


    Le CSS :

    Code:
    /* ---------- CATEGORIE ---------- */

    /* Corps Catégorie */

    .corCAT {
      width:800px;
      background-color:white;
        margin-right:auto;
      margin-left:auto;
    }

    /* Titre Catégorie */

    .titCAT {
      text-align:right;
      margin-bottom:10px;
    }

    .titCAT h2 {
      margin-top:20px;
      font-family:'Oleo Script',cursive;
      font-size:30px;
      color:pink;
      float:right;
      width:80%;
    }

    .titCAT img {
      margin-top:12.5px;
      float:right;
      width:10%;
    }

    /* Corps Forum */

    .corFO {
      margin-right:auto;
      margin-left:auto;
      width:780px;
      border:2px solid lightpink;
      height:auto;
      border-radius:30px;
      border-top:none!important;
      padding:10px;
      position:relative;
    }

    /* New - No New - Lock */

    .newFO {
      width:100px;
      height:100px;
      float:left;
      display:inline-block;
      margin-left:30px;
    }

    /* Bloc titre - description */

    .cortidesFO {
      float:left;
      width:40%;
      margin-right:20px!important;
    }

    .titFO {
      margin-left:15px;
      margin-bottom:10px;
    }

    .titFO a {
      font-family:Arial;
      font-size:18px;
      font-weight:bold;
      color:black;
      transition:all 0.5s ease;
    }

    .titFO a:hover {
      color:lightpink;
    }

    .descFO {
      margin-left:15px;
      width:100%;
      height:60px;
    }

    .descFO p {
      width:inherit;
      overflow:auto;
      height:60px;
      font-family:Arial;
      font-size:12px;
      color:black;
      text-align:justify;
    }

    /* Sous-forums */

    .sforFO {
      float:left;
      width:30%;
      height:100px;
      overflow-y:auto;
      margin-left:2%;
    }

    .sforFO ul {
      list-style-type:none!important;
    }

    .sforFO ul li {
      list-style-type:none!important;
    }

    /* LIENS SOUS-FORUMS */
    .sforFO a {
    display:block; margin:auto; padding:2px 0;
    line-height:18px; text-align:center; text-transform:uppercase; font-size:12px;
    background:lightpink; color:white !important; /* MODIFIABLE */
      border:1px solid white;
      transition:all 0.65s linear;
    }
    .sforFO div a:hover {
    color:lightpink!important;
    background-color:white;
    border:1px solid lightpink;
    }

    /* MESSAGES + SUJETS */

    .messuj {float:left;
    width:7%;padding:5px;
    padding-top:20px;}

    .messuj p {
      font-family:arial;
      text-align:center;
      color:darkgrey;
      font-weight:bold;
      line-height:25px;
    }

    /* ---------- FIN CATEGORIE ---------- */

    Le code dans le template index_box :

    Code:
    <!-- BEGIN catrow -->
     <!-- BEGIN tablehead -->
    <link href="https://fonts.googleapis.com/css?family=Oleo+Script" rel="stylesheet"/>
    <div class="corCAT">
      <div class="titCAT">
        <img src="https://zupimages.net/up/18/10/uxrp.png"/>
        <h2>
          {catrow.tablehead.L_FORUM}
        </h2>
        <div class="clear"></div>
      </div>

      <!-- END tablehead -->
      


        <!-- BEGIN forumrow -->
            <div class="corFO">
        <div class="newFO">
          <span class="status clearfix" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
     <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" />
     </span>
          </div>
        
        <div class="cortidesFO">
          <div class="titFO">
            <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
          </div>
          <div class="descFO">
            <p class="forum-desc">{catrow.forumrow.FORUM_DESC}</p>
          </div>
          
        </div>
        
        
        
        <div class="sforFO">
         <div id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
          <script type="text/javascript">
    jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,' ')).removeAttr('id');
    </script>
        </div>
        
              <div class="messuj"><p>S : {catrow.forumrow.TOPICS}<br/>M : {catrow.forumrow.POSTS}</p></div>
        
        <div class="clear"></div>
     
          </div>
         <!-- END forumrow -->



     <!-- BEGIN tablefoot -->
     
     <br />
     <!-- END tablefoot -->

      </div>
    <!-- END catrow -->

    <!-- BEGIN switch_on_index -->
    <div class="toplinks linklist clearfix">
     <ul>
     <!-- BEGIN switch_delete_cookies -->
     <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
     <!-- END switch_delete_cookies -->
     <!-- BEGIN switch_user_logged_in -->
     <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
     <!-- END switch_user_logged_in -->
     </ul>
    </div>
    <!-- END switch_on_index -->

    Images no new/new/lock :


      La date/heure actuelle est Lun 16 Juil - 16:41


      Partenaires