AccueilDernières imagesRechercherS'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 " Las Vegas " PHPBB2

    Nyan-cat
    Nyan-cat
    FémininAge : 26Messages : 326

    Lun 30 Mar 2015 - 21:12


    Catégories " Las Vegas "

    APERCU

    Voici mon tout premier Libre Service de catégories, qui est dans une ambiance relativement nocturne avec un petit air de Las Vegas. C'est des Spots, de la lumière, un peu sixties et des étoiles pleins les yeux.


    I - TEMPLATE INDEX_BOX

    Il faut que vous supprimiez l'intégralité de votre template, puis mettre celui-ci.

    Code:

    <link href='http://fonts.googleapis.com/css?family=Abril+Fatface|Oswald|Bree+Serif|Alfa+Slab+One|Covered+By+Your+Grace|Dancing+Script'rel='stylesheet' type='text/css'>
    <table>
      <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="cate_title">
      {catrow.tablehead.L_FORUM}
    </div>
    <div class="categorie_bloc">
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <!-- END cathead -->
      <!-- BEGIN forumrow -->
      <div class="cate_forum">
        <div class="categorie_forum_milieu">
          <table _moz_resizing="true" border="0">
          <tbody>
             <tr>
                <td><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
         
                                      {catrow.forumrow.FORUM_DESC}
          <br />
                </td>
          <td><div class="categorie_forum_stat">
          <div class="forum_last_stats">
            {catrow.forumrow.TOPICS} • {catrow.forumrow.POSTS}
          </div>
          <div class="forum_last_mess">
            {catrow.forumrow.LAST_POST}
          </div>
        </div></td><td>
                   <img class="old_new_lock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
                </td>
             </tr>
          </tbody>
       </table>
          <div class="sous_forum_lien">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div>
        </div>
      </div>
    <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    </div>
    <!-- END tablefoot -->
    <!-- END catrow -->

    II - CSS

    Code:
    /************************************************** DÉBUT DES CATÉGORIES **************************************************/

    /*Bloc des forums*/
    .cate_forum {
      height: 200px;
      width: 900px;
    }

    /*Bloc des titres des catégories*/
    .cate_title {
      width: 800px;
      height: 75px;
      margin: auto;
      text-align: center;
      background-repeat: no-repeat;
      background-position: top center;
      margin-bottom: -10px;
    }
    /*Titres des catégories*/
    .cate_title h2 {
      display: block;
      height: 60px;
      margin: 0px;
      font-family: "Alfa Slab One";
      font-size: 55px;
      letter-spacing: 1px;
      color: #272744;
    }
    .cate_title h2 img {
      margin-top: -25px;
      margin-left: 20px;
    }
    .cate_title h2 span {
      display: none;
    }
    a.nav img {
      display: none;
    }


    /*Bloc des catégories*/
    .categorie_bloc {
      background-color: #0C0C1C;
      width: 900px;
      margin: auto;
      margin-bottom: 10px;
      padding-top: 50px;
      padding-bottom: 1px;
      font-family: "abeatbykai", sans-serif;
      font-size: 12px;
      letter-spacing: 1px;
      color: #272744;
    }


    /*Image Old New Lock*/
    .old_new_lock {
      float: left;
      margin-left: -70px;
      margin-top: -120px;
     

    }

    /*Bloc complet du milieu*/
    .categorie_forum_milieu {
      position: relative;
      float: left;
      margin-top: 10px;
      margin-left: 65px;
      margin-right: 15px;
      width: 750px;
      height: 140px;
      padding: 10px;
      padding-top: 17px;
      background-color: #111124;
    }

    /*Titres des forums*/
    .forumlink {
      position: absolute;
      margin-top: -15px;
      margin-left: 15px;
      z-index: 2;
      height: 50px;
      font-size: 40px;
      font-family: 'Alfa Slab One', cursive;
      color: #272744!important;
      font-weight: normal;
    }
    /*Titres survolés des forums*/
    .forumlink:hover {
      color: #6D6DAB!important;
      text-decoration: none!important;
    }
    /*Désactiver les images des titres*/
    .forumlink img {
      display: none;
    }

    /*MISE EN FORME DESCRIPTION*/               
        .description {
          font-size: 11px;
          line-height: 11px;
          text-align: justify;
          position: relative;
          padding: 15px;
          height: 70px;
          width: 430px;
          overflow-y: auto;
          padding-right: 5px;
          margin-top : 40px;
        }

        .losange {
        height: 80px;
        width: 80px;
        float: right;
        margin-right: -280px;
        margin-top: 40px;
        border: 5px solid #0C0C1C;
        background: #0C0C1C;
        -ms-transform: rotate(45deg); /* Internet Explorer */
        -moz-transform: rotate(45deg); /* Firefox */
        -webkit-transform: rotate(45deg); /* Safari et Chrome */
        -o-transform: rotate(45deg); /* Opera */
        }

    /*Bloc des sous forums*/
      .sous_forum_lien {
          font-size: 11px;
          line-height: 11px;
          text-align: justify;
          position: relative;
          margin-top : -25px;
          margin-left: -10px;
          overflow: auto;
          height: 17px;
          width: 400px;
          background-color: #111124;
        }


    /*Bloc des statistiques et du dernier message*/
    .categorie_forum_stat {
      position: relative;
      float: left;
      margin-top: 10px;
      width: 160px;
      height: 70px;
      padding: 5px;
      text-align: center;
    }
    /*Statistiques*/
    .forum_last_stats {
      margin-left: 3px;
      margin-right: 3px;
      padding-bottom: 3px;
      font-size: 25px;
      font-family: "Abril Fatface";
      color: #37A03F;
    }
    /*Police du dernier message*/
    .forum_last_mess, .forum_last_mess a.gensmall {
      font-size: 11px;

      font-family: "abeatbykai", sans-serif;
    }
    /*Couleur des liens du dernier message*/
    .forum_last_mess a {
      color: #37A03F;
    }

    /*Les barres de défilement dans les catégories*/
    .forum_desc::-webkit-scrollbar {height:11px; width:6px; background:none; margin-right:5px;}
    .forum_desc::-webkit-scrollbar-thumb {background:rgba(241,163,189,1); height:30px; border-radius:30px;}
    .forum_desc::-webkit-scrollbar-corner {background:none;}

    /*Retirer les soulignements*/
    a { text-decoration: none; }

    /************************************************** FIN DES CATÉGORIES **************************************************/

    III - POUR LES DESCRIPTIONS DE CATÉGORIES

    Code:
    <div class="losange">
           <img src="http://www.pixenli.com/images/1427/1427468682011529000.png" class="imgforum" />
    </div>
           
    <div class="description">
                     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.  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.               
    </div>

    • Ce code fait 900px de large.
    • Les images des losange suivent la rotation de ceux-ci.
    • Les boutons font 100*100.


    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 Nyan-cat le Lun 30 Mar 2015 - 22:24, édité 2 fois



    Catégories " Las Vegas " PHPBB2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Lun 30 Mar 2015 - 22:08

    Hello, merci pour le partage, mais peux-tu préciser la version du forum et où exactement placer le code dans le template ?
    Par ailleurs ton code commence par un 'tr' or un tableau commence forcément par 'table' :hum: Je n'ai pas encore l'occasion de tester, mais je me demande s'il n'en manque pas une petite partie.

    Nyan-cat
    Nyan-cat
    FémininAge : 26Messages : 326

    Lun 30 Mar 2015 - 22:26

    J'ai ajouté la version dans le titre, et j'ai donné l'info comment mettre le template.
    Et j'ai corrigé la faute. En rassemblant les Typos j'ai dû supprimer le "table".



    Catégories " Las Vegas " PHPBB2 Nyan_cat_in_portals_by_ds_dna-d56j8yb
    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Ven 10 Avr 2015 - 18:14

    Juste pour te dire qu'il est super jolie j'adore vraiment
    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    Mer 22 Avr 2015 - 22:24

    Merci d'avoir fait les modifications, j'ai testé et c'est nikel, je déplace donc !

    pimslady
    pimslady
    FémininAge : 35Messages : 71

    Jeu 23 Avr 2015 - 17:39

    Ce code a l'air nickel! Je vais peut être le tester! Merci beaucoup de le partager!
    Layla4
    Layla4
    FémininAge : 25Messages : 149

    Ven 24 Avr 2015 - 16:53

    Trop classe ** merci beaucoup c: !
    Acédie
    Acédie
    FémininAge : 26Messages : 91

    Ven 24 Avr 2015 - 17:00

    Merci ♥
    Nileeda
    Nileeda
    FémininAge : 28Messages : 42

    Ven 24 Avr 2015 - 17:16

    Merci ♫
    LOUVE ☽
    LOUVE ☽
    FémininAge : 34Messages : 53

    Ven 24 Avr 2015 - 19:04

    merci
    Chadot
    Chadot
    FémininAge : 36Messages : 248

    Sam 25 Avr 2015 - 7:48

    Merci



    Catégories " Las Vegas " PHPBB2 2mo6y5k
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Sam 25 Avr 2015 - 9:54

    Sublime merci
    Littlelittle
    Littlelittle
    FémininAge : 39Messages : 52

    Sam 25 Avr 2015 - 13:21

    Merci >^<



    Catégories " Las Vegas " PHPBB2 Tumblr_inline_mz9sdyTDtj1s2c2nz

    << A little thing like another >>
    Afterglow
    Afterglow
    FémininAge : 29Messages : 138

    Sam 25 Avr 2015 - 17:20

    Il est magnifique :star:



    How do you get up from an all time low?
    vadorica
    vadorica
    MasculinAge : 28Messages : 47

    Sam 25 Avr 2015 - 17:27

    bien joué c'est magnifique



    Catégories " Las Vegas " PHPBB2 1414241762-vadocadeausign
    Drill'
    Drill'
    FémininAge : 39Messages : 65

    Dim 26 Avr 2015 - 12:02

    c'est magnifique, merci.
    Aeilan
    Aeilan
    FémininAge : 35Messages : 20

    Lun 27 Avr 2015 - 20:38

    Merci :love:
    summerby
    summerby
    FémininAge : 30Messages : 36

    Mar 28 Avr 2015 - 10:50

    très sympa (a)
    Wanda Maximoff
    Wanda Maximoff
    FémininAge : 30Messages : 80

    Mar 28 Avr 2015 - 16:17

    Très franchement ... J'adore ! ** Merci ! :hug:
    Kitty Kat.
    Kitty Kat.
    FémininAge : 30Messages : 86

    Mar 28 Avr 2015 - 17:26

    J'aime beaucoup ! Very Happy
    сhampi
    сhampi
    FémininAge : 26Messages : 151

    Jeu 30 Avr 2015 - 13:30

    Oh my god c'est trop beau !!! Merci beaucoup !
    darkhero246
    darkhero246
    MasculinAge : 32Messages : 179

    Ven 1 Mai 2015 - 9:51

    Merci pour le tuto !
    g93
    g93
    MasculinAge : 37Messages : 67

    Ven 1 Mai 2015 - 10:26

    merci
    Wavy
    Wavy
    FémininAge : 23Messages : 39

    Sam 2 Mai 2015 - 3:11

    Elles sont magnifiques, merci ♥
    messia
    messia
    FémininAge : 27Messages : 18

    Sam 2 Mai 2015 - 11:52

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 9:43