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.


    Catégories Taupes

    Partagez
    avatar
    A-Lice
    FémininAge : 24Messages : 4939

    le Ven 10 Avr 2015 - 18:31

    Rappel du premier message :




    Catégories Taupes


    Suite à une demande de Moys voici des catégories taupes.

    Je précise que l'arrière plan rose pâle correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www ~ phpBB2


    Et le code :
    Template index_box à remplacer en entier :
    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>
    <!-- BEGIN catrow --><!-- BEGIN tablehead --><!-- END tablehead -->
       <!-- BEGIN cathead -->
          <!-- BEGIN inc --><!-- END inc -->
       <!-- END cathead -->
       <!-- BEGIN forumrow -->
          <!-- BEGIN inc --><!-- END inc -->
    <div class="cat_titre"><a class="cat_titre" title="{catrow.cathead.CAT_DESC}" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
    <div class="cat_bloc1"><div class="cat_desc">{catrow.forumrow.FORUM_DESC}
          <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
          <!-- END switch_moderators_links --></div> <div class="cat_sousfora" id="sousfora">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div>
    <script type="text/javascript">
      <!--
                          jQuery('#sousfora').html(jQuery('#sousfora').html().replace(/, /g,'<div style="width: 100%; border-bottom: 2px solid black; margin-top: 5px; margin-bottom: 5px;"></div>')).removeAttr('id');
      jQuery(document).ready(function(){
        jQuery('a.gensmall').each(function (){
        var texte = jQuery(this).attr('title') ;
        if(texte){
        texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
        jQuery(this).attr('title', texte);
        }
        });
      });
      //-->
      </script>
    <div class="cat_bloc2"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><div style="padding: 10px;">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div>
    {catrow.forumrow.LAST_POST}
       <!-- BEGIN avatar -->
                <div style="width: 200px;"></div>
                <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
            <!-- END avatar --></div>
       <!-- END forumrow -->
       <!-- BEGIN catfoot -->
          <!-- BEGIN inc --><!-- END inc -->
       <!-- END catfoot -->
    <div style="height: 5px;"></div>
       <!-- BEGIN tablefoot -->
    <!-- END tablefoot --><!-- END catrow -->

    Template overall_header (après < head > ligne 4) :
    Code:
    <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>

    CSS :
    Code:
    a.cat_titre {
    font-size: 40px;
    color: #54413d;
    font-family: 'Poiret One', cursive;
    opacity: 0.5;
    transition: all 0.5s;
    padding: 10px;
    text-indent: 15px;
    text-decoration: none;
    }

    a.cat_titre:hover {
    transition: all 0.5s;
    opacity: 1;
    }

    .cat_bloc1 {
    width: 560px;
    height: 110px;
    border: 2px solid black;
    padding: 10px;
    background: #f5f5f2;
    overflow: auto;
    display: inline-block;
    margin-top: 5px;
    }

    .cat_bloc2 {
    margin-left: 15px;
    width: 190px;
    height: 120px;
    padding: 5px;
    background: #f5f5f2;
    text-align: center;
    font-size: 12px;
    display: inline-block;
    border: 2px solid black;
    vertical-align: top;
    margin-top: 5px;
    }

    .cat_desc {
    width: 360px;
    text-align: justify;
    font-size: 12px;
    color: #9c887d;
    display: inline-block;
    vertical-align: top;
    }

    .cat_sousfora {
    width: 160px;
    padding-top: 5px;
    padding-bottom: 5px;
    background: #e0dcce;
    color: #9c887d;
    border: 2px solid black;
    text-align: center;
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    margin-left: 15px;
    }

    .cat_sousfora a.gensmall {
    color: #9c887d;
    font-size: 14px;
    }

    /*SUPRESSION DU SOULIGNEMENT DES LIENS*/
    a {text-decoration: none;}
    a:link {text-decoration: none;}
    a:hover {text-decoration: none!important;}
    a.forumlink {text-decoration: none;}
    a.forumlink:hover {text-decoration: none!important;}
    a.topiclink {text-decoration: none; }
    a.topiclink:hover {text-decoration: none!important; }
    /*Fin*/

    Remarques :
    -Le forum doit faire 830px de largeur.
    -Il ne faut absolument pas mettre de virgules dans les descriptions des sous-fora pour ne pas déformer le code.


    /!\ En cas de problème, c'est ici ou que ça ce passe.
    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.

    avatar
    Invité

    le Dim 14 Juin 2015 - 0:45

    Très intéressant, merci bien.
    avatar
    Akiro
    FémininAge : 25Messages : 54

    le Dim 14 Juin 2015 - 2:58

    Très simple et joli, bravo et merci de partager!
    avatar
    picka234
    Age : 53Messages : 440

    le Dim 14 Juin 2015 - 17:25

    merci



    avatar
    lulu-lorry
    MasculinAge : 49Messages : 48

    le Ven 19 Juin 2015 - 12:33

    merci pour ce tuto
    avatar
    Edana
    FémininAge : 27Messages : 173

    le Dim 21 Juin 2015 - 10:19

    merciiii! =D (j'ai cherché pendant des lustres comment le faire! ^^)
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Lun 22 Juin 2015 - 0:33

    Merci !
    avatar
    lolosmile
    FémininAge : 26Messages : 37

    le Lun 22 Juin 2015 - 11:41

    merci beaucoup
    Hane
    FémininAge : 19Messages : 59

    le Mar 23 Juin 2015 - 22:48

    j'adore vraiment tout tes codes merci beaucoup encore une fois!
    avatar
    Gabriielle
    FémininAge : 27Messages : 42

    le Lun 29 Juin 2015 - 1:21

    merci
    avatar
    3uphemia
    FémininAge : 23Messages : 28

    le Lun 29 Juin 2015 - 13:19

    Merci
    avatar
    Orange Sanguine
    FémininAge : 22Messages : 82

    le Lun 29 Juin 2015 - 17:41

    Merci *-*



    avatar
    Bellabimbo444
    FémininAge : 19Messages : 61

    le Mer 1 Juil 2015 - 18:05

    MERCI!



    avatar
    Miku
    MasculinAge : 25Messages : 70

    le Jeu 2 Juil 2015 - 15:27

    Merci beaucoup !
    avatar
    O'Daim
    FémininAge : 22Messages : 116

    le Ven 3 Juil 2015 - 21:59

    Thank you !
    avatar
    Kovu
    FémininAge : 17Messages : 254

    le Sam 4 Juil 2015 - 9:23

    Merci !



    avatar
    Kahlan
    FémininAge : 31Messages : 371

    le Dim 5 Juil 2015 - 10:34

    Merci beaucoup =)
    avatar
    Hyuna
    FémininAge : 21Messages : 98

    le Dim 5 Juil 2015 - 18:03

    Merci
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Sam 11 Juil 2015 - 15:14

    Merci
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Mer 22 Juil 2015 - 19:46

    Merci
    avatar
    Damned
    FémininAge : 16Messages : 109

    le Mer 22 Juil 2015 - 21:38

    Merci
    avatar
    Itachi28
    FémininAge : 21Messages : 49

    le Ven 24 Juil 2015 - 1:36

    merci!
    avatar
    Amera
    FémininAge : 25Messages : 67

    le Ven 24 Juil 2015 - 22:30

    Merci beaucoup !



    avatar
    Dacina moe
    FémininAge : 39Messages : 169

    le Sam 25 Juil 2015 - 21:12

    J'adore merci
    avatar
    Invité

    le Dim 26 Juil 2015 - 23:29

    Je te l'emprunte, merci du partage :3
    avatar
    DarkMasamune
    FémininAge : 25Messages : 57

    le Jeu 30 Juil 2015 - 18:26

    Plop ! merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Lun 25 Juin 2018 - 5:49