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.

Le deal à ne pas rater :
Funko POP! Jumbo One Piece Kaido Dragon Form : où l’acheter ?
Voir le deal

    (Halloween) Catégories avec images new/nonew/lock en background.

    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 7 Nov 2014 - 15:19

    Ma demande



    Après avoir commandé un QEEL, j'ai besoin des catégories assortis à ce dernier, à la base une amie devait s'en occupé mais il se trouve qu'elle n'en a pas le temps. Je m'adresse donc à vous chez Utopiens & Utopiennes car j'ai besoin de vos talents pour reproduire exactement le schéma ci-dessous. Mes maigres connaissances en codages ne me permettent pas de le faire toute seule, donc j'espère que vous pourrez m'aider ! Merci d'avance ♥

    Schéma(s) et Eléments
    Schémas :
    Spoiler:
    Tailles des éléments :La seule taille à respecter et que le tout fasse 900px de large, après, les blocs à l'intérieur devront juste être approximativement de la même taille que sur le schéma (:
    Effets voulus : Hm il y a deux effets que je souhaite, le premier est un "simple" hover, quand on passe la souris sur les liens et le titre de la catégorie, ces derniers deviennent verts. Le deuxième effet, si c'est possible serait que les images new/nonew/lock soient en background du dernier sujet... Comme sur le schéma, si nécessaire je fournirais les images (:
    Version de votre forum : PHPBB2

    Ressources
    Je vous fournis au cas ou les images NEW, LOCK et NO NEW
    (Halloween) Catégories avec images new/nonew/lock en background. Xlw47q (Halloween) Catégories avec images new/nonew/lock en background. 1zzms3 (Halloween) Catégories avec images new/nonew/lock en background. 1498ow2

    Autres précisions ?
    J'ai quelques précisions par rapport au schéma: les titres des forums doivent TOUJOURS être en vert, ce n'est pas un hover. Contrairement aux liens et titres de catégories, c'est pour ca que sur le schéma j'ai mis deux catégories: la première ou l'on voit le changement de couleur au passage de la souris, la deuxième montre comment cela est sans passage de souris.


    Dernière édition par RainbowPanda le Ven 14 Nov 2014 - 0:11, édité 1 fois
    • Revenir en haut
    Anonymous
    Invité

    Ven 7 Nov 2014 - 15:24

    Hey !

    J'ai pris le QEEL, je vais faire les catégories qui vont avec ! Razz
    • Revenir en haut
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Ven 7 Nov 2014 - 15:41

    Ho c'est super ! J'avoue que j'espérais que tu réponde à ma demande, tu es la mieux placé pour faire en sorte que se soit parfaitement assortis ! Je ne te remercierais jamais assez ♥
    • Revenir en haut
    Anonymous
    Invité

    Sam 8 Nov 2014 - 15:38

    Je crois que tout est bon : www :3
    • Revenir en haut
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Sam 8 Nov 2014 - 15:53

    Je suis depuis mon téléphone mais il me semble que c'est tout ce que je désirais. Encore bravo à toi et merci d'avoir répondu à mes demandes 😘
    • Revenir en haut
    Anonymous
    Invité

    Sam 8 Nov 2014 - 16:00

    Han, ton téléphone fait des smileys moches u.u /PAN/

    Donc pour le CSS
    Code:
    /* -------------------------------- CATEGORIES -------------------------------- */


        /* TITRE CATEGORIES */
    .catetitre_content h2{
      color: #75D373;
      width: 880px;
      background-color: #393E57;
      padding: 10px;
      font-size: 24px;
      font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin: auto;
      font-family: 'Fjalla One', sans-serif;
    }

        /* CONTENU DE L'ENSEMBLE DES FORUM */
    .forum_bloc {
      width: 850px;
      height: 200px;
      background-color: #1E2133;
      margin: auto;
      padding: 25px;
      position: relative;
    }

        /* MISE EN FORME SOUS-FORUM */
    .sous-forum {
      background-color: #393E57;
      width: 100px;
      height: 150px;
      overflow: auto;
      padding: 15px;
      font-size: 12px;
      font-family: 'Fjalla One', sans-serif;
      position: absolute;
      left: 5em;
    }

    .sous-forum a {
      color: #1E2133;
      font-size: 14px;
    }

    .sous-forum a:hover {
      color: #75D373;
      text-decoration: none !important;
    }

        /* MISE EN FORME TITRE FORUM */
    a.forumlink {
      float: right;
      color: #1E2133 !important;
      text-decoration: none;
      font-size: 30px;
      font-family: 'Fjalla One', sans-serif;
    }

    a.forumlink:hover {
      color: #75D373 !important;
      text-decoration: none !important;
    }

        /* MISE EN FORME DESCRIPTION */
    .bloc_description {
      width: 400px;
      height: 150px;
      padding: 15px;
      background-color: #393E57;
      color: #5B5F70;
      font-size: 11px;
      position: absolute;
      left: 20em;
    }

    .contenu_description {
      width: 380px;
      height: 100px;
      overflow: auto;
      margin: auto;
      text-align: justify;
      font-family: 'Fjalla One', sans-serif;
    }

        /* PLACEMENT DE L'IMAGE NO NEW */
    .statut {
      position: absolute;
      right: 3.5em;
    }

        /* DERNIERS MESSAGES */
    .derniers_messages {
      position: absolute;
      z-index: 1;
      right: 5em;
      top: 13em;
      font-family: 'Fjalla One', sans-serif;
      font-size: 11px;
      text-align: center;
      color: #606474;
      width: 140px;
    }

    .derniers_messages a {
      color: #606474;
    }

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

    Et 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><br />
        <!-- BEGIN catrow --><!-- BEGIN tablehead -->

     
    <div class="catetitre_content">{catrow.tablehead.L_FORUM}</div>

        <!-- END tablehead -->
        <!-- BEGIN cathead -->


        <!-- END cathead -->
        <!-- BEGIN forumrow -->
     
      <div class="forum_bloc">
      <div class="sous-forum"><span id="subforums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span>
        <script type="text/javascript">
          jQuery('#subforums').html(jQuery('#subforums').html().replace(/, /g,'<br />')).removeAttr('id');
        </script></div>
     
      <div class="bloc_description"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        <br />{catrow.forumrow.FORUM_DESC}</div>
     
      <img class="statut" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><div class="derniers_messages">{catrow.forumrow.LAST_POST}</div>
        </div>


        <!-- END forumrow -->
        <!-- BEGIN catfoot -->

        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
    <br /><br />
    <!-- END tablefoot --><!-- END catrow -->
    <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>

    Dis-moi ce que ça donne dés que tu auras pu tout installer ^^
    • Revenir en haut
    RainbowPanda
    RainbowPanda
    FémininAge : 30Messages : 52

    Sam 8 Nov 2014 - 17:19

    Tout à l'air parfait, sauf un truc mais je pense que c'est dans les réglages de mon forum: les images new/lock/nonew ne s'affichent pas :o Je vais checker ca.

    Sinon encore merci ♥
    • Revenir en haut
    Anonymous
    Invité

    Sam 8 Nov 2014 - 18:01

    Oui, les images doivent être mises dans le panneau d'administration, affichage, gestion des images, et simple Wink

    EDIT : Et j'avais zappé ceci dans les descriptions de forum, pour que tu aies un défilement :
    Code:
    <div class="contenu_description">
       Amnis in superato pedes celsi regnis Pompeius pedes Orontes Gnaeus Cassii Parthenium in Romanae Parthenium regnis illius autem dicioni provincias abstractas Pompeius Cassii abstractas Pompeius Cassii pedes illius quas Tigrane Pompeius amnis regnis montis quas illius autem dicioni celsi Parthenium praetermeans Armeniorum ambiens regnis montis dicioni pedes Pompeius celsi funditur imosque montis dicioni funditur autem montis praetermeans ambiens provincias regnis montis illius montis pedes pedes in montis dicioni funditur illius provincias imosque Gnaeus montis dicioni illius provincias imosque abstractas Romanae montis illius celsi autem regnis Gnaeus Parthenium amnis quas illius superato Parthenium praetermeans celsi abstractas superato Gnaeus quas funditur Tigrane.
    </div>
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Sam 27 Avr 2024 - 2:21