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 bord arrondies - Grey & Black Style

    Partagez
    avatar
    Alzufen
    MasculinAge : 22Messages : 2103

    le Sam 13 Sep 2014 - 14:46

    Rappel du premier message :



    Yosh'a !

    Nous revoilà pour un nouveau LS, encore une fois celui-ci est basé sur une demande, c'était une demande de catégorie à bord arrondies, avec un effet au survol d'une image qui permettait d'afficher les sous-forums, et avec une autre image servant de cadre aux sous-forums.

    Pour ce LS vous aurez besoin de :

    - L'accès au template Index-Box (Pour rappeler : PA > Affichage > Templates > Général > Index-Box via le compte Fondateur uniquement)
    - Et de la feuille de style CSS accessible à tous les Admins du forum.


    Pour voir à quoi ressemble ce LS :

    De base : http://puu.sh/bxah1/85f5a773cf.png
    Au survol : http://puu.sh/bxaj6/db968b576e.png

    Spoiler:
    Tout d'abord commençons par le commencement, le template.

    Une fois que vous avez ouvert votre template, remplace TOUT et absolument tout par le suivant :

    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 --><div class="cat_titre">
       {catrow.tablehead.L_FORUM}
    </div>
    <!-- END tablehead -->
    <!-- BEGIN cathead -->
    <!-- END cathead -->
    <!-- BEGIN forumrow --><div class="cat_forum"><div class="forum_titre">
       <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
    </div>
      <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" style="display: inline-block; border-radius: 15px;" /><div class="last_post_stats">
       <div class="last_post">
          {catrow.forumrow.LAST_POST}
       </div>
       <div class="stats">
          {catrow.forumrow.TOPICS} Sujets<br/>
          {catrow.forumrow.POSTS} Messages
       </div>
    </div>
    <div class="descri_forum">
        {catrow.forumrow.FORUM_DESC}
    </div>
    <div class="bloc_sf">
    <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-200x200.jpg" alt="sous-forums" class="image_sf" />
    <img src="http://img15.hostingpics.net/pics/183380sousF.png" alt="fond_sforum" class="fond_sforum" />
              <div class="s_forum" id="s_forum">
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
                <script type="text/javascript">jQuery('#s_forum').html(jQuery('#s_forum').html().replace(/, /g,'<br />')).removeAttr('id');</script>
              </div>
    </div>
    </div>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <!-- END tablefoot -->
    <!-- END catrow -->

    Une fois cela fait, pensaient à enregistrer puis valider votre template. Toutes les images présentes dans le template sont modifiable, évidemment, celle des "old/new/lock" qui se trouvent tout à gauche n'est pas fourni avec, il vous suffira d'en ajouter une vous-même comme si vous ajoutiez celle-ci à votre forum de base ^^

    Pendant que nous y sommes, nous allons installer les polices d'écritures de Google Font que j'utilise pour ce LS. Vous êtes libre de les changer bien évidemment.

    Rendez-vous donc dans le template Overall-header cette fois-ci, puis repérez "< head >" (ligne 3) et changer la par :

    Code:
    <head>
    <link href="http://fonts.googleapis.com/css?family=Pacifico|Gabriela" rel="stylesheet" type="text/css" />

    Si vous avez déjà ajouté des polices Google Font sur votre forum, vous pouvez ajoutez celle-ci à la suite de la votre en séparant chaque nom de police par un " | " (alt gr + 6 sur les chiffres en haut) et en mettant des "+" pour les espaces. Ici nous avons donc la police "Gabriela" et "Pacifico" d'installé. Vous pourrez les réutiliser où vous voulez sur votre forum dorénavant.

    Spoiler:
    Passons à la partie CSS, rendez-vous donc dans votre feuille de style CSS et ajoutez-y simplement :

    Code:
    /* Titre des Catégories */

    .cat_titre {
        height: 65px;
        border: 4px solid #000;
        border-radius: 15px;
        text-align: center;
    }

    .cat_titre h2 {
        margin: -5px auto 0;
        font: 42px 'Pacifico';
    }

    /* Bloc des Forums */

    .cat_forum {
        width: 892px;
        height: 260px;
        margin: auto;
    }

    /* Titre des Forums */

    .forum_titre {
        text-align: center;
    }

    .forum_titre a,
    .forum_titre a:visited,
    .forum_titre a:link {
        font: 34px 'Marck Script';
        color: black;
        transition: 1s all;
    }

    .forum_titre a:hover {
        color: white;
    }

    /* Derniers Messages et Statistiques du forum */

    .last_post_stats {
        display: inline-block;
        margin-right: 10px;
        margin-left: 10px;
        vertical-align: top;
    }

    .last_post {
        width: 100px;
        height: 122px;
        margin-bottom: 5px;
        padding-top: 30px;
        border: 1px solid #000;
        border-radius: 10px;
        text-align: center;
        font: 14px 'gabriela';
        background: #282828;
    }

    .last_post .gensmall {
        font: 14px 'gabriela';
    }

    .last_post a,
    .last_post a:visited,
    .last_post a:link {
        color: grey;
    }

    .last_post a:hover {
        color: darkgrey;
    }

    .stats {
        width: 100px;
        height: 40px;
        border: 1px solid #000;
        border-radius: 10px;
        text-align: center;
        font: 16px 'gabriela';
        background: #282828;
    }

    /* Description du Forum */

    .descri_forum {
        display: inline-block;
        width: 400px;
        height: 180px;
        margin-right: 10px;
        padding: 10px;
        border: 1px solid #000;
        border-radius: 25px;
        text-align: justify;
        font: 12px 'gabriela';
        vertical-align: top;
        background: #282828;
    }

    /* Bloc des Sous-Forums */

    .bloc_sf {
        display: inline-block;
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }

    .bloc_sf .image_sf {
        z-index: 997;
        position: absolute;
        border-radius: 25px;
        opacity: 1;
        transition: 1s all;
    }

    .bloc_sf:hover .image_sf {
        opacity: 0;
    }

    .fond_sforum {
        z-index: 998;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 25px;
    }

    .s_forum {
        z-index: 999;
        position: relative;
        width: 150px;
        height: 100px;
        margin-top: 50px;
        margin-left: 25px;
        overflow: auto;
        text-align: center;
        font: 11px 'gabriela';
        opacity: 0;
        transition: 2s all;
    }

    .bloc_sf:hover .s_forum {
        opacity: 1;
    }

    .s_forum a,
    .s_forum a:visited,
    .s_forum a:link {
        color: black;
    }

    .s_forum a:hover {
        color: grey;
    }

    Tout n'est pas détaillé mais vous avez la majeur partie des choses à savoir pour modifier l'apparence des catégories, ensuite, le reste n'est que de la logique, ce sont des choses assez facile si vous avez déjà trifouillé des codes. Dans le doute, n'hésitez pas à aller faire un tour dans les cursus ou tutos et à poster dans la section des problèmes si vous avez un soucis. Ou encore, à enlever un bout de code pour voir ce qui change puis à la remettre Wink

    Spoiler:
    Il va nous falloir ajouter le code HTML dans la description de chaque forum, sinon, la mise en page ne sera pas exactement la même... Evidemment, celui-ci est libre de personnalisation, et si vous souhaitez mettre l'image à gauche au lieu de droite, vous pouvez changer le "float: left;" par "float: right;" libre aussi de changer la disposition pour CHAQUE forum Wink

    Allez donc dans la description de votre/vos forum/s et ajoutez-y ceci :

    Code:
      <img src="http://image.noelshack.com/fichiers/2014/37/1410479048-100x150.jpg" style="float: left; border-radius: 10px; margin-top: 10px;" alt="description" /><span style="margin-left: 10px; overflow: auto; height: 190px;">Description du forum</span>

    Vous pensez remplacer le lien de l'image par le votre, et changer la description du forum par votre texte, le "alt" peut aussi être changé pour afficher le texte que vous voulez si jamais l'image ne s'affiche plus pour une quelconque raison.[/code]

    Un petit merci ou commentaire est toujours le bienvenu ^^
    - Mettre/laisser un crédit vers Never-Utopia est obligatoire.
    - Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.


    Dernière édition par Alzufen le Mar 16 Sep 2014 - 23:46, édité 1 fois



    avatar
    Bloody Wolfia
    FémininAge : 25Messages : 54

    le Mar 10 Fév 2015 - 16:36

    merci pour le code ^^
    avatar
    Lexa
    FémininAge : 21Messages : 43

    le Mer 25 Fév 2015 - 21:47

    Merci :)
    avatar
    Jay-89
    FémininAge : 29Messages : 86

    le Lun 2 Mar 2015 - 17:39

    Merci :)
    avatar
    mikalus
    MasculinAge : 47Messages : 92

    le Mer 4 Mar 2015 - 5:01

    +1



    avatar
    Madras
    FémininAge : 33Messages : 279

    le Mar 10 Mar 2015 - 10:12

    Merci du partage
    avatar
    Tsumi
    FémininAge : 20Messages : 37

    le Ven 20 Mar 2015 - 19:24

    Tiens! Un cookie, et un merci! =3
    avatar
    Yuki Kaga
    FémininAge : 17Messages : 265

    le Sam 21 Mar 2015 - 13:09

    Curieuse du résultat sur mon forum o/ Merci ♠
    avatar
    Iliass
    MasculinAge : 26Messages : 24

    le Sam 21 Mar 2015 - 15:19

    merci
    avatar
    double-face
    FémininAge : 28Messages : 17

    le Dim 12 Avr 2015 - 17:02

    merciiiii ! Very Happy
    avatar
    Saya Shirayuki
    FémininAge : 25Messages : 150

    le Mer 15 Avr 2015 - 12:59

    Merci beaucoup !!
    avatar
    erika02
    FémininAge : 21Messages : 262

    le Mer 3 Juin 2015 - 13:03

    merci



    avatar
    Chèlha
    FémininAge : 25Messages : 121

    le Mer 3 Juin 2015 - 13:43

    Merci
    avatar
    Zephyr Du Moulin
    MasculinAge : 21Messages : 19

    le Jeu 18 Juin 2015 - 14:29

    Waow, magnifique ! *-*
    Lucrèce
    FémininAge : 28Messages : 68

    le Jeu 9 Juil 2015 - 12:22

    Merci beaucoup !
    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Mar 1 Sep 2015 - 21:32

    Merci pour ce partage :)



    avatar
    Kelalin
    FémininAge : 25Messages : 1938

    le Mar 1 Sep 2015 - 22:07

    Merci (●´∀`●)
    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Mer 2 Sep 2015 - 19:54

    Coucou

    Dans le code il doit manquer quelques lignes de codes, car je n'est pas l'effet montré en image dans le tuto

    Amicalement



    avatar
    ptite_perle
    FémininAge : 54Messages : 124

    le Mer 2 Sep 2015 - 20:11

    Oupss !!! c'est tout bon :) merci encore



    avatar
    Djeina
    FémininAge : 21Messages : 233

    le Jeu 3 Sep 2015 - 20:53

    Merci c'est très jolie :)
    avatar
    Sylfaen
    FémininAge : 20Messages : 69

    le Sam 19 Sep 2015 - 21:35

    Merci ! *donne un cookie ^-^
    avatar
    Araki
    MasculinAge : 28Messages : 124

    le Dim 20 Sep 2015 - 23:06

    Merci!
    avatar
    Neyotox
    MasculinAge : 25Messages : 37

    le Mar 22 Sep 2015 - 23:35

    Sublime merci
    avatar
    Romann
    FémininAge : 24Messages : 183

    le Jeu 1 Oct 2015 - 21:12

    merci !



    avatar
    neochrome_ltd
    MasculinAge : 36Messages : 63

    le Ven 9 Oct 2015 - 17:46

    Merci
    avatar
    Givrali
    FémininAge : 14Messages : 21

    le Sam 10 Oct 2015 - 15:10

    Woaw, merci! *-*
    Contenu sponsorisé


      La date/heure actuelle est Mer 18 Juil 2018 - 2:30