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.

-45%
Le deal à ne pas rater :
WHIRLPOOL OWFC3C26X – Lave-vaisselle pose libre 14 couverts – ...
339 € 622 €
Voir le deal

    [CATE] (Awful) Mettre une entête.

    Syndara
    Syndara
    FémininAge : 32Messages : 51

    Jeu 7 Mai 2015 - 16:04

    Bonjour ♥

    Ma demande



    Bonjour, alors j'avoue, je suis nul en codage et j'aimerais mettre une entête en haut et en bas de chaque catégories. J'ai beau regarder les tutos, je n'y parviens pas :/

    Schéma(s) et Eléments
    Schémas : Voilà comment sont mes catégories actuellement : http://the-howling-victoria.forumactif.org. Et j'aimerais beaucoup mettre une sorte de bandeau en haut et en bas de chaque catégories comme ça https://2img.net/image.noelshack.com/fichiers/2015/19/1431007032-untitled-1.png . (Sauf que le titre du haut change genre :" Administration" puis une autre catégorie "École") Je ne sais pas trop si je suis claire. Je pense savoir que pour le texte "ADMINISTRATION" je eux le changer en mettant une image à la place du texte mais pour le fond aucune idée.

    Tailles des éléments : Le bandeau du haut plus grand que celui du bas. Peut importe du moment que ça ne déforme pas le forum ^^.

    Effets voulus : Juste rectangulaire.

    Version de votre forum : PHPBB2


    Ressources
    aucune.

    Autres précisions ?
    EH bien voilà?


    J'espère que ça ira avec le peu de mots que j'ai utilisé ^^
    Merci d'avance.


    Dernière édition par Syndara le Mar 2 Juin 2015 - 5:07, édité 1 fois
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 7 Mai 2015 - 17:46

    Je suis pas sûre que tu sois dans la bonne section pour ce genre de demande, mais ce n'est pas grave o:

    Pour l'instant, dans la gestion de tes couleurs et de tes images, fais en sorte de retirer le motif derrière le titre de catégorie ainsi que le cadre qui l'entoure. Il ne te restera plus que ton titre, "tout nu".

    Pas besoin d'images, tu peux faire ça en css. Je ne sais pas exactement de quelle police il s'agit, mais j'ai tenté de m'en rapprocher le plus. Dans ton css, tu ajoutes un code de ce genre :

    .secondarytitle, .secondarytitle h2 {
    color: #fff;
    font-family: times new roman;
    font-size: 40px;
    font-weight: 200;
    }

    Et normalement tu devrais obtenir un résultat semblable.
    Syndara
    Syndara
    FémininAge : 32Messages : 51

    Jeu 7 Mai 2015 - 22:52

    Merci Awful, c'est la deuxième fois que tu me sauves la vie :love: :love:
    Décidément, je poste jamais au bon endroit xD

    HAAAN ça fonctionne ! Mais j'aimerais vraiment pouvoir mettre une image à la place du texte (je pense faire des décorations hihi.

    Et du coup pour avoir la bande en bas avec "the howling victoria) ?

    Et est-il possible d'avoir plus d'espace entre chaque catégories ?
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Jeu 7 Mai 2015 - 22:59

    Si tu veux mettre des images à la place du texte, tu la mets directement dans le titre de ta catégorie :3
    Par exemple, au lieu d'écrire "administration", tu mets
    Code:
    <img src="url de ton image">

    Pour le "howling victoria", c'est directement à mettre dans ton template index_box. Je ne peux pas te dire où exactement puisque tu l'as probablement modifié, donc si tu veux bien me le fournir, j'y jetterai un coup d’œil. c:
    Syndara
    Syndara
    FémininAge : 32Messages : 51

    Jeu 7 Mai 2015 - 23:29

    Marchi. Alors voilà mon template :

    Spoiler:
    Awful
    Awful
    MasculinAge : 106Messages : 197

    Dim 10 Mai 2015 - 20:14

    Coucou !
    Désolée du temps de réponse ! Pour ajouter le Howling Victoria sous chaque catégorie, c'est très simple : il faut ajouter un code tout à la fin de ton template index_box juste après
    Code:
    <!-- BEGIN tablefoot --></table>

    Soit tu y installes une image :
    Code:
    <!-- BEGIN tablefoot -->
        </table><img src="URL DE TON IMAGE"><img src="{SPACER}" alt="" height="5" width="1" />
        </div>
        <!-- END tablefoot -->

    Soit tu y installes une div avec du texte que tu peux styler en css :
    Code:
    <!-- BEGIN tablefoot -->
        </table><div class="NOM DE TA CLASSE">Howling Victoria</div><img src="{SPACER}" alt="" height="5" width="1" />
        </div>
        <!-- END tablefoot -->
    Et tu pourras donc installer du css en plus :
    .NOM DE TA CLASSE {
    color: #couleur de ton texte;
    font-family: police de ton texte;
    font-size: taille de ton texte en px ou en em;
    }

    Voilà, j'espère t'avoir aidée !
    Syndara
    Syndara
    FémininAge : 32Messages : 51

    Mer 13 Mai 2015 - 13:46

    géniaaaaaaal merci beaucoup Awful ! Tu gères la fougère xD.

    Et juste une dernière question, comment faire pour qu'une fiche en libre service soit sur le css afin de changer la couleur selon le design au lieux de tout faire un par un ? ^^
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Dim 24 Mai 2015 - 6:46

    Salut!

    Tu peux le faire en fonctionnant de la même façon que Awful a déjà montré. Par exemple, disons que j'ai cette fiche :
    Code:
    <div style="background-color: grey; padding: 20px; color: black; font-family: georgia; font-size: 13px;">
    <div style="color: red; font-size: 24px;">Je suis un titre de fiche!</div>
    Je suis un contenu de fiche !
    </div>

    Dans cette situation, le CSS est "intégré" dans la fiche. Toi, tu veux la "séparer le CSS" de la fiche. Donc on va donner une "class" à chaque élément, puis on va mettre ces "class" dans le CSS avec les propriétés qui étaient dans le "style" au début. Voici ce que cela donnerait :

    CSS de la fiche :
    Code:
    .NOM_DE_LA_CLASS_1 {
      background-color: grey;
      padding: 20px;
      color: black;
      font-family: georgia;
      font-size: 13px;
    }

    .NOM_DE_LA_CLASS_2 {
      color: red;
      font-size: 24px;
    }

    Code de la fiche :
    Code:
    <div class="NOM_DE_LA_CLASS_1">
    <div class="NOM_DE_LA_CLASS_2">Je suis un titre de fiche!</div>
    Je suis un contenu de fiche !
    </div>

    Je sais pas trop si j'ai été super claire dans mes explications, alors dit-le si tu n'as rien compris et je vais essayer de le dire autrement ^^



    Syndara
    Syndara
    FémininAge : 32Messages : 51

    Mar 26 Mai 2015 - 17:14

    Coucou Onyx, merci beaucoup pour ta réponse ♥

    Aaaaaaaaah, c'est super simple en fait ♥_♥' mais si je tombe sur une fiche qui a déjà une "div class" je la renomme ou bien c'est à faire qu'avec les "div style" ?
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mer 27 Mai 2015 - 0:34

    Salut!

    Ça dépend en fait. Souvent, s'il y a déjà une class, c'est qu'il y a aussi du CSS dans ta feuille de CSS qui correspond à cette class. Tu peux donc chercher la class dans le CSS et modifier les propriétés comme tu le veux.

    Si, elle n'est pas dans le CSS, cela peut être parce qu'elle fait partie du CSS de base du forum et ce dernier n'est pas accessibl. À ce moment là, si tu veux changer entièrement les propriétés de cette class, tu la renommes avec ton propre nom et tu ajoute cette nouvelle class dans ton CSS.

    Si elle n'est pas accessible dans le CSS et que tu veux garder la majorité des propriétés de cette class, tu peux lui donner une "deuxième class". Par exemple, dans les templates, il y a souvent la class "forumline" un peu comme ça :
    Code:
    <table class="forumline"><tr><td>Truc</td></tr></table>

    Si je veux personnaliser ce tableau sans enlever totalement la class "forumline" parce qu'elle a des propriétés déjà mises dans le CSS et que j'aime bien, je mettrais une deuxième classe que je séparerais de la première avec un espace :
    Code:
    <table class="forumline NOM_DE_MA_CLASS_A_MOI"><tr><td>Truc</td></tr></table>



    Syndara
    Syndara
    FémininAge : 32Messages : 51

    Mar 2 Juin 2015 - 5:06

    Merci beaucoup ♥
    Problème résolu x)
    Contenu sponsorisé


      La date/heure actuelle est Dim 28 Avr 2024 - 14:59