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.

-40%
Le deal à ne pas rater :
Tefal Ingenio Emotion – Batterie de cuisine 10 pièces (induction, ...
59.99 € 99.99 €
Voir le deal

    Catégories style Neon

    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Mer 1 Oct 2014 - 12:28



    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 Oyl7
    Databar
    Databar
    MasculinAge : 30Messages : 142

    Mer 1 Oct 2014 - 12:41

    tres jolie :3
    Arpège
    Arpège
    FémininAge : 25Messages : 112

    Sam 1 Nov 2014 - 4:00

    Sympa *^*



    Catégories style Neon 170221084427548922
    Writers World commence à ouvrir !
    Anonymous
    Invité

    Dim 9 Nov 2014 - 16:06

    Hello Ayfoth !

    Je n'obtiens pas le même résultat que toi (sous invision également), le titre de catégorie n'apparait pas centré et les effets ne sont pas sous les titres de sous-forum. De plus, il serait bien d'annoter ton CSS pour que les gens s'y retrouvent Wink

    Merci d'avance.
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 22 Nov 2014 - 18:42

    Pourrais tu me donner le lien de ton test ?



    Catégories style Neon Oyl7
    Anonymous
    Invité

    Sam 22 Nov 2014 - 18:46

    Bonsoir,

    Le voici ^^
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 22 Nov 2014 - 18:55

    Tu as mis quoi dans structure des pages ?



    Catégories style Neon Oyl7
    Anonymous
    Invité

    Sam 22 Nov 2014 - 19:01

    Effectivement, le soucis venait de là, j'y avais pas pensé ! :hum:
    Il serait peut-être bon de le préciser dans le premier message, non ? :)
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 22 Nov 2014 - 19:05

    Par ailleurs j'ai modifier le CSS sur le 1er sujet qui devrait corriger le bug des sous forums.



    Catégories style Neon Oyl7
    Anonymous
    Invité

    Sam 22 Nov 2014 - 19:31

    En effet, beug corrigé. Cette fois c'est dans ton message qu'il y a un soucis, un manque plus précisément :
    Par ailleurs avant de commencer, vous devez allez dans Général / Configuration et dans la section Structure des Pages mettre :
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 22 Nov 2014 - 19:49

    Chez moi il est normal plus bas y a marqué largeur : 900



    Catégories style Neon Oyl7
    Anonymous
    Invité

    Sam 22 Nov 2014 - 20:14

    Tu as une suite après ce que j'ai cité ? Moi j'ai deux points, rien, et ensuite "Largeur : 900"
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 22 Nov 2014 - 20:14

    Ben ouais c'est normal ^^



    Catégories style Neon Oyl7
    Anonymous
    Invité

    Sam 22 Nov 2014 - 20:24

    C'est pas très clair ton truc ...
    En tout cas il manque toujours :

    Effectivement, le soucis venait de là, j'y avais pas pensé ! :hum:
    Il serait peut-être bon de le préciser dans le premier message, non ? :)
    Ayfoth
    Ayfoth
    MasculinAge : 34Messages : 1330

    Sam 22 Nov 2014 - 21:33

    Est-ce mieux ?



    Catégories style Neon Oyl7
    Anonymous
    Invité

    Sam 22 Nov 2014 - 21:52

    Oui, c'est plus logique merci :)
    Je déplace \o/
    Venise
    Venise
    FémininAge : 40Messages : 270

    Jeu 27 Nov 2014 - 17:15

    merci
    avatar
    Histerik
    MasculinAge : 28Messages : 14

    Dim 30 Nov 2014 - 16:39

    Merci Very Happy
    sica3
    sica3
    MasculinAge : 50Messages : 135

    Mer 3 Déc 2014 - 1:16

    thank's
    Azorus
    Azorus
    MasculinAge : 22Messages : 35

    Dim 18 Jan 2015 - 14:17

    Merci :cow:



    Seul mon nounours peut me comprendre :cowboy: :gentleman: :bandit:


    GFX by Aleph'
    patriciadpt30
    patriciadpt30
    FémininAge : 61Messages : 240

    Mar 27 Jan 2015 - 20:46

    sympa merci



    Patricia :)
    Argy
    Argy
    FémininAge : 25Messages : 98

    Sam 7 Mar 2015 - 15:13

    Merci ^^
    Skylighty
    Skylighty
    FémininAge : 94Messages : 100

    Sam 7 Mar 2015 - 17:38

    merci ! très joli
    Yogi Nakagawa
    Yogi Nakagawa
    MasculinAge : 23Messages : 94

    Dim 29 Mar 2015 - 13:19

    Merci!
    Luna_Rakuen
    Luna_Rakuen
    FémininAge : 31Messages : 79

    Mar 14 Juil 2015 - 6:16

    Merci beaucoup <3
    Contenu sponsorisé


      La date/heure actuelle est Ven 26 Avr 2024 - 21:52