AccueilRechercherS'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 :
NIKE Chaussures de running REVOLUTION 5 – Homme ...
Voir le deal
34.99 €

    Catégories bord arrondies - Grey & Black Style

    Alzufen
    Alzufen
    MasculinAge : 24Messages : 2103

    le Sam 13 Sep 2014 - 14:46



    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



    Fyraliel
    Fyraliel
    FémininAge : 29Messages : 1424

    le Sam 13 Sep 2014 - 15:24

    Merci !!!!!!



    Catégories bord arrondies - Grey & Black Style F86e7518c1
    Flower_*
    Flower_*
    FémininAge : 25Messages : 605

    le Sam 20 Sep 2014 - 16:44

    Merci pour ce LS c'est sympa ! :)
    Nonze
    Nonze
    MasculinAge : 26Messages : 85

    le Sam 20 Sep 2014 - 20:05

    Merci
    Anonymous
    Invité

    le Dim 21 Sep 2014 - 19:15

    Merci.
    Féhéla
    Féhéla
    FémininAge : 46Messages : 238

    le Jeu 25 Sep 2014 - 2:56

    merci du partage
    Allison01
    Allison01
    FémininAge : 35Messages : 218

    le Jeu 25 Sep 2014 - 11:08

    Merci beaucoup c'est superbe Very Happy
    Ay.am.e
    Ay.am.e
    FémininAge : 21Messages : 123

    le Lun 6 Oct 2014 - 13:02

    Merci :3
    patriciadpt30
    patriciadpt30
    FémininAge : 57Messages : 240

    le Lun 6 Oct 2014 - 20:46

    C'est super merci



    Patricia :)
    SpicAsh
    SpicAsh
    FémininAge : 23Messages : 176

    le Mar 7 Oct 2014 - 23:35

    Merci !
    Draly
    Draly
    FémininAge : 27Messages : 112

    le Jeu 9 Oct 2014 - 15:35

    Merci.:p
    Tatia38
    Tatia38
    FémininAge : 31Messages : 308

    le Ven 10 Oct 2014 - 8:15

    Merci
    picka234
    picka234
    FémininAge : 55Messages : 547

    le Sam 11 Oct 2014 - 11:25

    merci
    cheers



    Catégories bord arrondies - Grey & Black Style Signpi11
    Zélya
    Zélya
    FémininAge : 31Messages : 190

    le Lun 20 Oct 2014 - 18:21

    c'est juste magnifique, merci du partage



    Catégories bord arrondies - Grey & Black Style 891727signaNanmoue
    Faucon
    Faucon
    FémininAge : 20Messages : 64

    le Mer 22 Oct 2014 - 12:17

    Merci du partage, ça à l'air jouliii **
    Merwyn Arehdel
    Merwyn Arehdel
    FémininAge : 20Messages : 298

    le Sam 25 Oct 2014 - 14:04

    *ramène un p'tit cookie*
    Merci !



    Just want to be yours.
    Asuka
    Asuka
    FémininAge : 26Messages : 105

    le Mar 11 Nov 2014 - 13:09

    Merci !!! *.* c'est trop beau



    Catégories bord arrondies - Grey & Black Style 975531MisakiHino3
    plushmasters
    plushmasters
    FémininAge : 27Messages : 71

    le Mar 11 Nov 2014 - 17:35

    pas mal
    Venise
    Venise
    FémininAge : 36Messages : 270

    le Mar 11 Nov 2014 - 18:24

    je suis fan merci
    Thelma
    Thelma
    FémininAge : 29Messages : 33

    le Jeu 13 Nov 2014 - 16:44

    Merci Beaucoup. (a)
    pyka
    pyka
    FémininAge : 28Messages : 3

    le Ven 28 Nov 2014 - 16:02

    merci
    Kiki85
    Kiki85
    MasculinAge : 25Messages : 396

    le Mar 16 Déc 2014 - 21:35

    sympas :)
    Neycha
    Neycha
    FémininAge : 26Messages : 58

    le Dim 28 Déc 2014 - 16:21

    Merci beaucoup Very Happy
    Okashi
    Okashi
    FémininAge : 20Messages : 30

    le Sam 24 Jan 2015 - 20:14

    merci beaucoup Razz
    Kahlan
    Kahlan
    FémininAge : 33Messages : 371

    le Sam 31 Jan 2015 - 17:34

    merci beaucoup pour ce partage.
    Contenu sponsorisé


      La date/heure actuelle est Lun 1 Juin 2020 - 15:39