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.


    Structure épurée, discrète et bleue ciel

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Jeu 29 Mai 2014 - 12:17

    Rappel du premier message :



    Plop,

    Suite à une demande voici le LS qui en découle.
    Pensez à créditer Never Utopia !

    Catégories


    Version  phpBB2 ▬ CSS, TEMPLATE & HTML

    Aperçu ▬ www


    La tasse de café correspond à l'image "new", "no new", ou "lock". Il faut donc qu'elle soit de taille réduite. Le demi-cercle de gauche est une illustration de forum, que l'on peut changer à chaque fois évidemment.

    CSS
    Code:
       /* --------------------------------- CATEGORIES --------------------------------- */

        /**** POSITIONNEMENT IMAGES New, no new, lock ****/
        .img_new {
          position: relative;
          left: 12.8em;
          top: -8em;
        }

        /**** STATISTIQUES ****/
        /* Ronds bleus */
        .stats {
          background-color: #B9E6DC;
          color: white;
          width: 60px;
          height: 60px;
          border-radius: 100px;
          position: relative;
          top: -5.8em;
          left: 5em;
        }

        /* Contenu des ronds */
        .stats_1 {
          position: relative;
          top: 0.7em;
        }

                
        /**** ILLUSTRATIONS DES FORUM ****/
        .imgforum {
          position: relative;
          display: block;
          left: 0.1em;
          top: -4.1em;
        }

        /**** FONDS GENERAUX ****/
        /* Contenu de l'ensembre des forum */
        .categorie {
          width: 400px;
          height: 70px;
          padding: 10px;
        }

        /* Fond titre catégorie */
        .cate_titre {
          position: relative;
         margin: auto;
          top: -4em;
        }

        /* Mise en forme nom de catégorie */
         h2 {
          font-size: 18px;
          font-family: arial;
          color: #ffffff;
          text-align: center;
        }

        /**** MISE EN FORME DES FORUM ****/
        /* Mise en forme du texte des titres de forum */
        .forumlink {
          color: #A2DE8F !important;
          font-family: arial;
          font-size: 15px !important;
          font-weight: none !important;
          text-transform : uppercase;
          position: relative;
          top: -3.1em;
          left: 3.5em;
          z-index: 1;
          text-shadow:1px 1px 2px white;
          display: block;
        }

        .forumlink:hover {
          color: #2E611D !important;
          text-decoration: none !important;
        }

        .forumlink a {
          font-size: 16px;
        }

        /**** MISE EN FORME DESCRIPTION ****/                
        .description {
          font-size: 11px;
          text-align: justify;
          color: #CBC0C6;
          position: relative;
          top: -12em;
          left: 4.5em;
          padding: 15px;
        }

        /**** DERNIERS MESSAGES ****/
        .last_mess {
          position: relative;
          left: 8.5em;
          top: -7.8em;
          color: #808080;
          font-size: 11px;
          text-align: center;
          width: 120px;
        }

        .last_mess a {
          color: black !important;
          text-decoration: none !important;
        }

        .last_mess a:hover {
          color: #CAC9C7 !important;
          text-decoration : none !important;
        }

        /*--------------------------------- FIN CATEGORIES --------------------------------- */

    Le template Index_Box
    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 style="background-color: #F5F5F5; padding: 10px; border-bottom: 20px solid #ACE1D5; border-top: 60px solid #ACE1D5;"><div class="cate_titre" style="vertical-align: middle;">{catrow.tablehead.L_FORUM}</div>



                   <!-- END tablehead -->
                   <!-- BEGIN cathead -->
                  
                  <!-- END cathead -->
                   <!-- BEGIN forumrow -->
                
              
                 <div class="categorie">
                <table><tr>
                  <td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
                    {catrow.forumrow.FORUM_DESC}</td>
                  
                  <td><div class="stats"><div class="stats_1"><center>{catrow.forumrow.TOPICS} <br /><span style="font-size: 11px;">sujets</span></center></div></div></td>
                  <td><div class="stats"><div class="stats_1"><center>{catrow.forumrow.POSTS}<br /><span style="font-size: 11px;">messages</span></center></div></div></td>
                  <td><div class="last_mess">{catrow.forumrow.LAST_POST}</div>
                 <img class="img_new" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /></td>
                </tr>
                </table>
                    
                 </div>

                   <!-- END forumrow -->
                   <!-- BEGIN catfoot -->
                  
                  <!-- END catfoot -->
                   <!-- BEGIN tablefoot -->
                
               </div>  
                
               <!-- END tablefoot --><!-- END catrow -->


    Dans les descriptions de forum :
    Code:
       <img src="http://i55.servimg.com/u/f55/09/04/75/00/sans_t16.png" class="imgforum" />
        <div class="description" style="width: 400px; height: 50px; overflow: auto; padding: 5px;">
         Ex his quidam aeternitati se commendari posse per statuas aestimantes eas ardenter adfectant quasi plus praemii de figmentis aereis sensu carentibus adepturi, quam ex conscientia honeste recteque factorum, easque auro curant inbracteari, quod Acilio Glabrioni delatum est primo, cum consiliis armisque regem superasset Antiochum. quam autem sit pulchrum exigua haec spernentem et minima ad ascensus verae gloriae tendere longos et arduos, ut memorat vates Ascraeus, Censorius Cato monstravit. qui interrogatus quam ob rem inter multos... statuam non haberet malo inquit ambigere bonos quam ob rem id non meruerim, quam quod est gravius cur inpetraverim mussitare. Inter quos Paulus eminebat notarius ortus in Hispania, glabro quidam sub vultu latens, odorandi vias periculorum occultas perquam sagax. is in Brittanniam missus ut militares quosdam perduceret ausos conspirasse Magnentio, cum reniti non possent, iussa licentius supergressus fluminis modo fortunis conplurium sese repentinus infudit et ferebatur per strages multiplices ac ruinas, vinculis membra ingenuorum adfligens et quosdam obterens manicis, crimina scilicet multa consarcinando a veritate longe discreta. unde admissum est facinus impium, quod Constanti tempus nota inusserat sempiterna. Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.
        </div>


    Si l'on veut laisser vide pour les sous-forum :
    Code:
       <img src="http://i55.servimg.com/u/f55/09/04/75/00/sans_t16.png" class="imgforum" />
        <div class="description" style="width: 400px; height: 50px; overflow: auto; padding: 5px;">
        </div>



    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 Halloween le Jeu 13 Avr 2017 - 20:38, édité 1 fois




    < / Libre service codage >
    avatar
    Feather
    FémininAge : 21Messages : 17

    le Dim 6 Juil 2014 - 21:14

    Merci :B
    avatar
    Nileeda
    FémininAge : 22Messages : 42

    le Lun 7 Juil 2014 - 3:32

    Vraiment trop jolie *^* Merci !
    avatar
    Archeos
    FémininAge : 21Messages : 60

    le Lun 7 Juil 2014 - 12:14

    Magnifique. *-*



    avatar
    Yamashita
    FémininAge : 19Messages : 50

    le Lun 7 Juil 2014 - 16:33

    Merci QAQ



    avatar
    MOON LEE
    FémininAge : 24Messages : 149

    le Mar 8 Juil 2014 - 10:26

    Merci Wink
    avatar
    Dezaia
    FémininAge : 23Messages : 40

    le Mar 8 Juil 2014 - 19:53

    Merci beaucoup



    Louanaka
    FémininAge : 19Messages : 24

    le Mar 8 Juil 2014 - 21:24

    Merci c'est magnifique!
    avatar
    missphan
    FémininAge : 35Messages : 156

    le Mer 9 Juil 2014 - 17:05

    Magnifique mais est-il possible d'en modifier les couleurs ?
    avatar
    Halloween
    FémininAge : 24Messages : 9753

    le Mer 9 Juil 2014 - 17:10

    @missphan a écrit:Magnifique mais est-il possible d'en modifier les couleurs ?

    Yep, dans le CSS, tous les "color" et "background-color". Si tu galères n'hésites pas à passer ici Wink




    < / Libre service codage >
    avatar
    missphan
    FémininAge : 35Messages : 156

    le Mer 9 Juil 2014 - 17:29

    Merci ^^



    + my personal brand of heroin
    You’re none of them because you’re all of them. Now that we found each other, you’ve given my past and future meaning. You are the sixth. You are the last. ©endlesslove.
    avatar
    Shiwaii
    MasculinAge : 29Messages : 110

    le Mer 9 Juil 2014 - 21:42

    merci
    avatar
    Zeroo
    FémininAge : 23Messages : 76

    le Jeu 10 Juil 2014 - 12:35

    C'est vraiment très joli et simple d'utilisation ... Merci pour ce partage et le travail que tu as accompli ^^
    avatar
    Freshdaw
    FémininAge : 23Messages : 14

    le Jeu 10 Juil 2014 - 18:20

    Super joli, merci !
    avatar
    Invité

    le Jeu 10 Juil 2014 - 18:42

    Merci !
    avatar
    Natsumi13
    FémininAge : 22Messages : 64

    le Jeu 10 Juil 2014 - 19:45

    J'adore! Merci!
    avatar
    Adèle
    FémininAge : 26Messages : 96

    le Sam 12 Juil 2014 - 17:38

    J'adore, je cherchais justement un style épuré comme ça ♥
    avatar
    lΔω
    FémininAge : 20Messages : 105

    le Dim 13 Juil 2014 - 17:03

    Merci
    avatar
    Rainbow Dash
    FémininAge : 19Messages : 52

    le Lun 14 Juil 2014 - 1:18

    Merci!
    avatar
    Petit Harfang
    FémininAge : 17Messages : 80

    le Lun 14 Juil 2014 - 14:55

    Marchi :3
    avatar
    Foudry
    MasculinAge : 18Messages : 31

    le Lun 14 Juil 2014 - 15:27

    Merci. :3
    Gedomaru
    FémininAge : 21Messages : 70

    le Lun 14 Juil 2014 - 16:55

    Merci *^*
    avatar
    Leisha.
    FémininAge : 27Messages : 29

    le Lun 14 Juil 2014 - 20:07

    Simple & efficace !
    avatar
    Leisha.
    FémininAge : 27Messages : 29

    le Lun 14 Juil 2014 - 20:13

    Désolé du DP mais quand je colle ton code dans mon CSS, il me dit ensuite :
    " Erreur détectée
    Nous avons compté un nombre impaire de guillemets donc une chaine est mal fermée. Cela signifie que votre CSS risque de ne pas être valide et ne sera pas affiché correctement sur votre forum.

    Nous vous conseillons de relire votre code. "

    & impossible de trouver d'où ça vient...
    avatar
    Pava
    FémininAge : 83Messages : 62

    le Mar 15 Juil 2014 - 20:25

    Superbe merci !
    avatar
    Succubus
    FémininAge : 23Messages : 12

    le Mar 15 Juil 2014 - 21:20

    J'adore le style simple, sans trop de flafla :3
    Merci beaucoup !
    Contenu sponsorisé


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