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
    lacoste
    MasculinAge : 24Messages : 30

    le Lun 21 Déc 2015 - 4:03

    merci c est genial
    avatar
    Ciàran
    FémininAge : 27Messages : 187

    le Mar 12 Jan 2016 - 12:51

    merci :)
    avatar
    FrZ
    MasculinAge : 21Messages : 6

    le Mer 20 Jan 2016 - 15:27

    Thanks !
    avatar
    sabritheducks_79
    FémininAge : 31Messages : 88

    le Mer 20 Jan 2016 - 23:57

    Merci 1000fois, je cherchais ce code depuis des lustres !
    avatar
    blomkvist
    FémininAge : 27Messages : 44

    le Mer 30 Mar 2016 - 18:54

    merciii :hug2: :joie:



    ☆ once upon a dream ☆
    I know you, I walked with you once upon a dream. I know you, that look in your eyes is so familiar a gleam. And I know it's true that visions are seldom all they seem. But if I know you, I know what you'll do. You'll love me at once, the way you did once upon a dream. ~ byendlesslove.
    avatar
    Coco-Lapin02
    MasculinAge : 50Messages : 167

    le Ven 8 Avr 2016 - 18:25

    Merci
    avatar
    Thessia
    FémininAge : 29Messages : 74

    le Sam 9 Avr 2016 - 20:33

    Merci il est vraiment good



    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
    Milkie
    MasculinAge : 29Messages : 8

    le Mer 20 Avr 2016 - 14:31

    Merci
    avatar
    Saphira
    FémininAge : 21Messages : 72

    le Mar 17 Mai 2016 - 17:30

    Merci ^^
    avatar
    Pixye
    FémininAge : 25Messages : 10

    le Mar 17 Mai 2016 - 19:39

    Merci beaucoup pour le partage :)
    avatar
    Calion
    FémininAge : 24Messages : 22

    le Sam 11 Juin 2016 - 11:35

    MERCIIIIIIIIIIII ! :)
    avatar
    ENDLESS-DREAM
    FémininAge : 27Messages : 31

    le Dim 12 Juin 2016 - 15:12

    merci
    avatar
    Kitket
    FémininAge : 35Messages : 100

    le Sam 30 Juil 2016 - 16:18

    Merci
    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Mar 9 Aoû 2016 - 20:32

    merci bien
    avatar
    Donquichotte
    MasculinAge : 22Messages : 48

    le Ven 26 Aoû 2016 - 2:25

    merci
    avatar
    Thanos
    MasculinAge : 22Messages : 84

    le Dim 28 Aoû 2016 - 20:57

    Merci
    avatar
    Kraiyz
    MasculinAge : 21Messages : 29

    le Sam 15 Oct 2016 - 19:18

    Cool !
    avatar
    Donquichotte
    MasculinAge : 22Messages : 48

    le Jeu 3 Nov 2016 - 1:04

    merci
    avatar
    Luirio
    MasculinAge : 28Messages : 153

    le Jeu 17 Nov 2016 - 22:13

    Je te donne un cookie! ^_^
    avatar
    Kush-Live
    MasculinAge : 23Messages : 12

    le Mar 20 Déc 2016 - 7:02

    merci !
    avatar
    Sweet Angel
    FémininAge : 35Messages : 147

    le Jeu 9 Mar 2017 - 12:21

    c'est vraiment très joli, un grand merci!
    avatar
    ArgelTown
    MasculinAge : 18Messages : 23

    le Lun 13 Mar 2017 - 15:10

    merci
    avatar
    Solitude
    FémininAge : 43Messages : 285

    le Lun 27 Mar 2017 - 10:52

    merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Aaw.
    FémininAge : 21Messages : 29

    le Lun 27 Mar 2017 - 11:54

    J'adore merci du partage ! *donne un cookie*
    avatar
    Leyakath
    FémininAge : 25Messages : 44

    le Jeu 13 Avr 2017 - 10:47

    Merci pour le partage! :3
    Contenu sponsorisé


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