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.

-39%
Le deal à ne pas rater :
Ordinateur portable ASUS Chromebook Vibe CX34 Flip
399 € 649 €
Voir le deal

    (Hallow) Catégories personnalisées pour forum coloré !

    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 11:55

    Ma demande



    Bonjour, je voudrais un style de catégories qui s'accorde avec cette page d'accueil faite par Halloween : PA Colorée ! Merci d'avance ! Very Happy

    Schéma(s) et Eléments
    Schémas : Je suis désolée mais je ne peux que montrer par des codes que j'ai déjà vu sur votre forum qui m'ont plu mais qui ne correspondent pas encore à ce que je voudrais donc. ^^' Alors, je voudrais que les catégories soient séparées, et qu'elles ressemblent un peu à celles-ci faites par Halloween toujours : Catégories avec Infobulles. Mais celles-ci sont trop noires pour aller avec mon forum et je voudrais que les couleurs soient similaires à celles qui sont dans la PA colorée donc du bleu, rose et vert tous pastels.
    Tailles des éléments : Eh bien, je sais pas trop... je dirais qu'il faut que ça reste dans la même taille que la catégorie avec infobulles. J'aimerais pouvoir mettre une image d'illustration à mes sous-forum mais pas en carré comme ils sont dans la catégorie info-bulles mais en bannière assez fines donc je ne pense pas que ce soit nécessaire de faire de trop grandes catégories.
    Effets voulus : J'aimerais que les catégories soient séparées, arrondies et peut-être avec un espèce de contour qui n'a pas la même couleur que le fond des catégories ?
    Version de votre forum : PHPBB2

    Ressources
    Je vais mettre une petite question ici : je pourrais personnaliser moi-même les icones (new, no new, lock) par Affichage > Images et couleurs > Gestion des images non ? Et pareil pour les images dans les sous-catégories ? Je me souviens avec un vieux forum de l'avoir fait, je pense que ça ne sera pas difficile de retrouver comment faire mais comme en code je m'y connais pas, je préfère poser la question! ^^

    Autres précisions ?
    Aucune pour le moment !
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 12:30

    Hey !

    En fait il s'agirait juste d'accorder les couleurs ?
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 20:59

    Oui et aussi que les catégories ne soient pas collées les unes aux autres et qu'elles soient arrondies et pas carrés comme c'est de base en fait ! ^^
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 21:00

    Les catégories pas collées les unes aux autres ... elles ne le sont pas là :hum:
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 21:18

    Non mais dans forumactif on peut faire en sorte qu'elles ne soient pas "collées" mais c'est pour donner une idée en fait !
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 21:21

    Je vois pas ce que tu veux dire ... on peut avoir un schéma ? Là elles ne sont pas collées.
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 21:29

    En fait je voudrais juste la même chose que "Catégories Infobulles" avec les couleurs de la "PA colorée" le vert et bleu pale tout simplement x) laissons tomber le "pas collé" parce-que c'est moi qui m'exprime mal haha
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 21:51

    Je veux bien m'en charger, ça devrait prendre deux minutes. Je peux avoir le lien vers ton forum néanmoins s'il te plait ? Ce sera plus simple pour accorder les couleurs de fond.
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 21:53

    Oui bien sûr ! http://mylittle-rolepony.forumactif.org/
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 22:06

    Que penses-tu de ça ?
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 22:14

    C'est parfait merci ! Par contre il serait possible de changer la couleur de la police de "Japon et ses préfectures" en rose pale ?
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 22:17

    C'est fait, mais je trouve que ce n'est pas du tout lisible =$
    Sinon je peux te passer le code et t'expliquer où placer cette couleur pour les deux éléments, tu feras à ta sauce ?
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 22:20

    Ah oui je veux bien comme ça je pourrais tester moi-même les couleurs pour mettre celle qui me paraît le mieux sans t'embêter ! ^^
    • Revenir en haut
    Anonymous
    Invité

    Sam 2 Aoû 2014 - 22:26

    Alors, pour les descriptions de forum c'est le même code que celui fournit dans le LS. Pour le template, c'est celui-ci :

    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 class="cate_titre"><div class="titrecategorie">{catrow.tablehead.L_FORUM}</div></div>

    <div class="categorie">

      <!-- END tablehead -->
      <!-- BEGIN cathead -->
     
     <!-- END cathead -->
      <!-- BEGIN forumrow -->
     
    <div class="forum">
     
    <table><tr>
      <td style="vertical-align: middle; padding: 10px;" class="bloccate"><nobr><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
        <span style="font-size: 11px;"><span style="COLOR: #226179; FONT-SIZE: 11px;">✘ {catrow.forumrow.TOPICS}</span> rebondissements dans <span style="COLOR: #226179; FONT-SIZE: 11px;">{catrow.forumrow.POSTS}</span> aventures.</span><br />
      </nobr> <center><div class="last_mess"><span class="gensmall" id="last">{catrow.forumrow.LAST_POST}</span></div>
    <script type="text/javascript">
    jQuery('#last').html(jQuery('#last').html().replace(/<br>/g,'<span style="display: inline-block; padding: 0 2px;">-</span>')).removeAttr('id');
      </script>
        <p> <r class="hoverme">Hover Me!<span class="gensmall1">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span> </r> </p></center></td>
      <td style="vertical-align: middle;">
      {catrow.forumrow.FORUM_DESC}</td>
      <td><img class="new01" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
        </td>
    </tr></table>
       
        </div><br />

      <!-- END forumrow -->
      <!-- BEGIN catfoot -->
     
      <!-- END catfoot -->
     <!-- BEGIN tablefoot -->
      </div><div class="cate_footer"><br /><div class="footer_texte">Nom du forum</div></div>
     
    <!-- END tablefoot --><!-- END catrow -->
    <link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Parisienne" />

    Et le CSS est le suivant :

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

            .hoverme {
              font-size: 11px;
              font-family: arial;
              color: #853010;
              text-align: center !important;
              margin-top: 10px;
            }

    r a {
      color: #853010 !important;
    }

            r:focus{
            background: #B5DCEA;
            z-index: 1;
            }

                r span {
                z-index: 1;
                position: absolute;
                margin-top: -95px;
                margin-left: -130px;
                  color:#853010;
                width: 180px;
                height: 55px;
                  overflow: auto;
                  background: #ED8E69;
                padding: 15px;
                border-radius: 3px;
                transform: scale(0) rotate(-12deg);
              -webkit-transform: scale(0) rotate(-12deg);
              -ms-transform: scale(0) rotate(-12deg);
                  transition: all .25s;
                }

                r:hover span, r:focus span {
                z-index: 1;
                transform: scale(1) rotate(0);
              -webkit-transform: scale(1) rotate(0);
              -ms-transform: scale(1) rotate(0);
                }


            /* Catégories */

           
    .titrecategorie h2 {
              top: 1.5em;
              position: relative;
              font-size: 27px;
            font-family: parisienne;
              color: #FDD7FD !important;
              letter-spacing: 1px !important;
              z-index: 1;
            }

            .cate_titre {
              text-align: center;
              margin: auto;
              background-color: #E4F7B9;
              width: 750px;
              height: 210px;
              border-radius: 130% 130% 0% 0%;
            }

            .cate_footer {
              text-align: center;
              margin: auto;
              z-index: 1;
              position: relative;
              margin-top: -100px;
              background-color: #E4F7B9;
              width: 750px;
              height: 210px;
              border-radius: 0% 0% 130% 130%;
            }

            .footer_texte {
              top: 5.5em;
              position: relative;
              font-size: 20px;
            font-family: parisienne;
              color: #FDD7FD !important;
              letter-spacing: 1px !important;
            }

            .categorie {
              width: 750px;
              margin: auto;
              background-color: #E4F7B9 !important;
              margin-top: -100px;
            }

            /* New */
            .new01 {
              transform: rotate(5deg);
            }

            /* Forum */

            .forum {
              width: 700px;
              height: 120px;
              margin-left: auto;
              margin-right: auto;
              margin-top: 5px;
              margin-bottom: 5px;
              background: #B5DCEA;
              position: relative;
              padding: 2px;
              z-index: 2;
        border-radius: 50px;
            }

            a.forumlink {
              position: relative;
              display: block;
              width: 100%;
              color: #1B4A5C !important;
              text-align: left;
              font-family: parisienne;
              font-size: 22px;
              font-weight: bold;
              letter-spacing: 1px;
              transform: all;
              -moz-transform: all;
              -o-transform: all;
              -htm-transform: all;
              -webkit-transform: all;
              transition: 1s;
              -moz-transition: 1s;
              -o-transition: 1s;
              -htm-transition: 1s;
              -webkit-transition: 1s;
            }

            a.forumlink:hover {
              letter-spacing: 2px;
              color: #FE6D6D !important;
              text-decoration: none !important;
              transform: all;
              -moz-transform: all;
              -o-transform: all;
              -htm-transform: all;
              -webkit-transform: all;
              transition: 1s;
              -moz-transition: 1s;
              -o-transition: 1s;
              -htm-transition: 1s;
              -webkit-transition: 1s;
            }

            /* Description */
            .description {
              width: 280px;
              height: 80px;
              overflow: auto;
              background-color: #CEE8F2;
            text-align: justify;
              font-family: arial;
              font-size: 11px;
      color: #1B4A5C;
      padding: 5px;
            }

            /* Bloc derniers messages */

            .bloccate {
              width: 180px;
            }

            .stats_last
            {
              display: block;
              width: 160px;
              height: 75px;
              margin-left: -200px;
              margin-top: 30px;
              background: #E3A6A6;
              padding: 10px;
              border: 1px solid #2E2E2E;
              box-shadow: 2px 2px 10px #2E2E2E;
            -moz-box-shadow: 2px 2px 10px #2E2E2E;
              -webkit-box-shadow: 2px 2px 10px #2E2E2E;
            }

            .stats {
              display: block;
              text-align: center;
              font-size: 10px;
              color: #7E2727;
              border-bottom: 1px solid #7E2727;
              padding-bottom: 4px;
              margin-bottom: 4px;
            }

            .last_mess {
              display: block;
              text-align: center;
              font-size: 11px;
              color: #F0F0ED;
            }

            .last_mess a{
              text-align: center;
              font-size: 11px;
              color: #226179;
      text-decoration: none !important;
            }

            /* Sous-forum */


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

    Pour modifier les couleurs des titres de catégorie et du texte en footer, tu dois modifier la valeur du :

    Code:
    color: #CODE COULEUR;

    Dans les éléments suivants :

    Code:
    .titrecategorie h2 {
              top: 1.5em;
              position: relative;
              font-size: 27px;
              font-family: parisienne;
              color: #FDD7FD !important;
              letter-spacing: 1px !important;
              z-index: 1;
            }


    .footer_texte {
              top: 5.5em;
              position: relative;
              font-size: 20px;
            font-family: parisienne;
              color: #FDD7FD !important;
              letter-spacing: 1px !important;
            }
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Sam 2 Aoû 2014 - 22:31

    Merci beaucoup pour ton travail ! Cela m'aide beaucoup, mais le premier code à mettre dans le template c'est dans quel template que je dois le mettre ? Et je dois le remplacer entièrement ?

    EDIT - Finalement, j'ai trouvé ! Par contre, là où il y a la "mairie" tout s'affiche en décalé et le texte ne se met pas comme il faudrait : petite capture d'écran
    • Revenir en haut
    Anonymous
    Invité

    Dim 3 Aoû 2014 - 12:09

    Parce que tu n'as pas rentré le code dans la description du sous-forum comme je te l'avais pourtant rappelé Razz
    • Revenir en haut
    AprilSparkle
    AprilSparkle
    FémininAge : 29Messages : 19

    Dim 3 Aoû 2014 - 16:21

    Ah mince haha, quelle tête en l'air ! Je vais essayer ! Merci encore ! Very Happy
    EDIT - Alors j'ai réussi ça y est ! Mais le de décalage est toujours là, comment ça se fait ? Capture d'écran
    EDIT 2 - Finalement j'ai remis le code et ça a tout remis en place. Du coup je pense que je n'ai plus rien à demander pour les catégories. ^^
    • Revenir en haut
    Anonymous
    Invité

    Dim 3 Aoû 2014 - 21:03

    Parfait alors :3
    Bonne continuation !
    • 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 - 14:32