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 :
ASOS : -25% en plus sur les promos
Voir le deal

    Catégories style Neon

    Ayfoth
    Ayfoth
    MasculinAge : 31Messages : 1330

    Mer 1 Oct 2014 - 12:28

    Rappel du premier message :



    Bonjour,

    j'avais envie de faire tout un codage LS en style néon donc je commence par vous donner les catégories, dont j'ai rencontré des petites difficultés donc merci à Alzufen et NyoTheNeko pour l'aide qu'ils m'ont apportés.

    Vous pouvez voir le rendu ici ou encore .

    Cette catégorie est optimisée sur Invision.

    Pour cette catégorie nous toucherons la template index_box et le CSS

    Par ailleurs avant de commencer, vous devez allez dans Général / Configuration et dans la section Structure des Pages mettre : Largeur du forum : 900.

    Par ailleurs dans Affichage / Structure et hierarchie mettre les deux sur moyen




    Le Template
    Code:
    <link href='http://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'>
    <!-- BEGIN catrow -->
     
     

    <!-- BEGIN tablehead -->
     
     <span class="categorie_titre">
        {catrow.tablehead.L_FORUM}
      </span>
       
     
      <!-- END tablehead -->
      <!-- BEGIN forumrow -->
      <div class="categorie_neon">


     
       
       

       


      <div class="cat_gauche">
        <div class="nom_forum">
        <h{catrow.forumrow.LEVEL} class="hierarchy">
          <a href="{catrow.forumrow.U_VIEWFORUM}" >{catrow.forumrow.FORUM_NAME}</a>
        </h{catrow.forumrow.LEVEL}>
      </div>
      <div class="description">
        <p >{catrow.forumrow.FORUM_DESC}</p>
      </div>
     
        <div class="icone"><span><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" class="icon" /></span>
        </div>
      </div>
     

     
      <div class="cat_droite"><div class="dernier_sujet"> 
        <!-- BEGIN avatar -->
        <span >{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>                       
                            <!-- END avatar -->
        <span>                  
                      <!-- BEGIN switch_topic_title -->
          <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
                            <!-- END switch_topic_title -->
          {catrow.forumrow.USER_LAST_POST}
        </span>
      </div>
     
      <div class="sous_liens"><span ><div id="sousForums"><span >{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></div></span>
                        <script type="text/javascript">
      <!--
                          jQuery('#sousForums').html(jQuery('#sousForums').html().replace(/, /g,'<br />')).removeAttr('id');
      jQuery(document).ready(function(){
        jQuery('a.gensmall').each(function (){
        var texte = jQuery(this).attr('title') ;
        if(texte){
        texte = texte.replace(/\<\/a\>/gi, '').replace(/\<br \/\>/gi, '').replace(/\<br >/gi, '');
        jQuery(this).attr('title', texte);
        }
        });
      });
      //-->
      </script>
      </div>
      <div class="moderateurs">
                
                      <!-- BEGIN switch_moderators_links -->
        <div >
          {catrow.forumrow.switch_moderators_links.L_MODERATOR}
          {catrow.forumrow.switch_moderatros_links.MODERATORS}
        </div>                  
                      <!-- END switch_moderators_links -->
      </div>
    </div>
                      

                         
                   
       <!-- END forumrow -->
        

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

    <!-- BEGIN switch_on_index -->
    <div class="toplinks linklist clearfix">
       <ul>
          <!-- BEGIN switch_delete_cookies -->
          <li><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a></li>
          <!-- END switch_delete_cookies -->
          <!-- BEGIN switch_user_logged_in -->
          <li class="last"><a href="{U_MARK_READ}">{L_MARK_FORUMS_READ}</a></li>
          <!-- END switch_user_logged_in -->
       </ul>
    </div>
    <!-- END switch_on_index -->


    CSS
    Code:

    a:link {
      text-decoration: none;
    }

    #submenu ul li a {
    padding: 0px;
    margin: 0px;
    text-decoration: none;
    }

    /* ---------------------------------- CATEGORIE NEON ------------------------------------------------------- */

    .categorie_neon{
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      background-color: #6e6b6e;
      border: 8px #41dd23 solid;
      border-radius: 60px;
      padding-top: 40px;
      padding-bottom: 40px;
      overflow: hidden;
      box-shadow: 0px 0px 8px green;
    }

    .categorie_titre{
      font-size: 25px;
      text-transform: uppercase;
      text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      position: relative;
      top: 10px;
    }

    .cat_gauche{
      float: left;
      width: 500px;
      overflow: hidden;
      margin-left: 20px;
      padding-top: 10px;
    }

    .nom_forum{
      font-size: 20px;
      text-transform: uppercase;
      text-align: right;
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
    }

    .description{
      background-color: rgba(255,255,255,0.1);
      height: 80px;
      overflow: auto;
      border: 2px  solid rgba(0,255,0,0.2);
      border-bottom: none;
      box-shadow: -1px -1px 8px green;
    }

    .icone{
      background-color: rgba(255,255,255,0.1);
      height: 40px;
      text-align: right;
      border: 2px  solid rgba(0,255,0,0.2);
      border-top: 1px  solid rgba(255,255,255,0.4);
      box-shadow: 1px 10px 8px green;
    }

    .cat_droite{
      width: 150px;
      overflow: hidden;
      float: right;
      margin-top: 20px;
      border: 3px  solid rgba(0,255,0,0.2);
      box-shadow: 0px 0px 8px green;
    }

    .dernier_sujet{
      background-color: rgba(255,255,255,0.1);
      text-align: center;
      height: 60px;
    }

    .sous_liens{
      background-color: rgba(255,255,255,0.1);
      text-align: center;
      height: 60px;
      overflow: auto;
    }

    .sous_liens a{
      font-size: 15px;
    }

    .sous_liens a:hover{
      font-size: 18px;
      background-color: rgba(0,255,0,0.5);
      border-radius: 30px;
    }

    .moderateurs{
      background-color: rgba(255,255,255,0.1);
      text-align: center;
      height: 10px;
      padding-bottom: 5px;
    }


    /* --------------------------------------------------------------------------------------------------------- */

    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 Ayfoth le Sam 22 Nov 2014 - 21:32, édité 3 fois



    Catégories style Neon - Page 2 Oyl7
    motorloic
    motorloic
    MasculinAge : 23Messages : 11

    Lun 30 Nov 2015 - 4:00

    merci
    Kelalin
    Kelalin
    FémininAge : 28Messages : 2486

    Lun 30 Nov 2015 - 15:35

    Merci pour le partage ! (★^O^★)
    lacoste
    lacoste
    MasculinAge : 27Messages : 30

    Lun 21 Déc 2015 - 3:46

    merci
    Ennie
    Ennie
    FémininAge : 57Messages : 95

    Mar 22 Déc 2015 - 13:19

    Merci..
    Edward Speleers
    Edward Speleers
    MasculinAge : 33Messages : 460

    Ven 8 Avr 2016 - 21:24

    merci



    Catégories style Neon - Page 2 Edkidd11
    paradox68
    paradox68
    MasculinAge : 39Messages : 11

    Mar 23 Aoû 2016 - 13:14

    merci a toi
    hedtek
    hedtek
    MasculinAge : 23Messages : 4

    Ven 11 Nov 2016 - 0:54

    cool merci
    Anonymous
    Invité

    Ven 20 Jan 2017 - 19:07

    merci beaucoup c est super
    Sakura Sinister
    Sakura Sinister
    FémininAge : 34Messages : 35

    Mar 24 Jan 2017 - 11:20

    Merci Very Happy
    Galcenor
    Galcenor
    MasculinAge : 31Messages : 1

    Lun 5 Juin 2017 - 22:15

    Merci beaucoup pour ce Style !
    Doudou33
    Doudou33
    MasculinAge : 25Messages : 1

    Dim 19 Nov 2017 - 17:45

    Merci beaucoup
    owerdrive
    owerdrive
    MasculinAge : 44Messages : 1

    Dim 19 Nov 2017 - 21:55

    Merci pour le partage Wink
    GerantFinZoy
    GerantFinZoy
    MasculinAge : 21Messages : 1

    Dim 18 Mar 2018 - 10:44

    Merci !
    YasmineH
    YasmineH
    FémininAge : 18Messages : 20

    Ven 6 Avr 2018 - 22:43

    j'aime bien merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 5 Aoû 2021 - 19:58