AccueilFAQRechercherMembresGroupesS'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.


    Demande de modification boutique et bestiaire

    Partagez
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Ven 1 Sep 2017 - 16:44

    Bonjour ! Je prépare actuellement la mise à jour de mon forum et je souhaiterais y intégrer prochainement un bestiaire ainsi qu'une boutique. Rapidement je suis tombé sur les codes d'Onyx ( ici ) que j'ai trouvé absolument fantastiques ! Afin que ces derniers aillent avec mon prochain thème je voulais savoir si un codeur pourrait y apporter des modifications. Il faudrait modifier la taille et quelques éléments. Ne sachant pas si cela est possible j'ai réalisé une maquette afin de montrer les modifications que j'aimerais et savoir si c'est réalisable.

    Le Bestiaire :
    Maquette : ici
    Format : 500*560 ( du 600*560 irait aussi )
    Polices : Arial et Trajan Pro ( le titre " Bestiaire " est une image )
    Images : 350*150 pour l'image de la créature et celle du fond en hoover ( ici ) + image background ( ici ) + oiseau ( ici ) + titre ( ici )

    La Boutique :
    Maquette : ici
    Format : 500*650 ( ou 600*650 irait aussi )
    Polices : Arial et Trajan Pro ( le titre " Boutique " est une image )
    Images : 130*210 pour l'image ( image en transparence )( ici ) + image background ( ici ) + oiseau ( ici ) + livre ( ici ) + titre ( ici )

    En remerciant les personnes qui pourraient m'aider ♥
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Lun 4 Sep 2017 - 11:00

    Petit up p/
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Mer 6 Sep 2017 - 18:10

    Up :)
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Sam 9 Sep 2017 - 9:48

    up
    avatar
    Nihil Scar Winspeare
    Messages : 5004

    le Sam 9 Sep 2017 - 19:45

    Coucou Deamyx :)

    Le lien que tu as donné donne vers un topic qui n'est pas dans le libre service, donc normalement on ne peut pas prendre ces codes.

    Mais heureusement, Onyx les a mis en libre service :
    http://www.never-utopia.com/t60723-bestiaire-et-herbier-avec-triage
    http://www.never-utopia.com/t60724-systeme-de-boutique-avec-triage-automatique

    Elle explique également comment les personnaliser. De ce que je vois de tes maquettes, c'est totalement possible, tu as fait des changements de tailles, couleurs, fonds, etc.. :hudada:

    Je te conseille d'essayer d'installer les codes sur ton forum, regarder un peu comment changer les couleurs / taille si tu y arrives dans le CSS.
    Si tu rencontres des difficultés n'hésite pas à poser des questions, sinon on peut te le faire ^^ (mais c'est toujours un peu plus gratifiant de le faire sois même :p).

    L'avantage si tu donnes le lien des pages où tu installes le bestiaire et la boutique, c'est que nous on peut utiliser ensuite l'inspecteur d'élément de notre navigateur pour tester directement sans avoir besoin de mettre nous même le code quelque part.

    Bonne soirée :)



    Très peu présente
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Sam 9 Sep 2017 - 22:00

    Bonsoir !

    Merci de ta réponse ! Concernant le lien, j'avais vu les libres services, alors je me suis dit que le sujet que j'ai envoyé devait convenir ><
    J'ai déjà essayé de poster le bestiaire sur un forum test, mais je finis toujours avec un lien et je voudrais pouvoir le poster directement dans les messages. Je ne sais pas si je me fais comprendre D:
    Niveau code je ne m'y connais absolument pas, je peux éventuellement changer le fond, mais pour le reste je ne suis pas certain d'arriver au résultat espéré.

    En te remerciant de ton aide
    avatar
    Nihil Scar Winspeare
    Messages : 5004

    le Dim 10 Sep 2017 - 19:06

    @Deamyx a écrit:Merci de ta réponse ! Concernant le lien, j'avais vu les libres services, alors je me suis dit que le sujet que j'ai envoyé devait convenir ><
    Pas de problème, je précise juste pour la prochaine fois :hudada:. C'est plus simple de donner le lien vers le libre service car c'est la "dernière version" normalement, ça aidera les membres qui viennent lire.

    @Deamyx a écrit:J'ai déjà essayé de poster le bestiaire sur un forum test, mais je finis toujours avec un lien et je voudrais pouvoir le poster directement dans les messages. Je ne sais pas si je me fais comprendre D:
    C'est expliqué tout à la fin du libre service, dans la partie "4. Mettre le bestiaire/herbier dans un iframe". Il faut ensuite poster l'iframe dans le sujet de ton choix.

    Est ce qu'on peut avoir le lien de la page html en attendant ? :)



    Très peu présente
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Dim 10 Sep 2017 - 19:37

    Merci je vais voir comment faire pour l'iframe.
    En attendant voici le lien : http://oriforumtest.forumactif.com/h1-bestiaire
    avatar
    Nihil Scar Winspeare
    Messages : 5004

    le Jeu 14 Sep 2017 - 21:27

    Je viens de voir que tu as une erreur de CSS ici :

    Code:
    .creature_in {
        padding: 5px;
        background-color: rgba(255,255,255,0.<img src="https://illiweb.com/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />;

    A remplacer par :
    Code:
    .creature_in {
        padding: 5px;
        background-color: rgba(255,255,255,0.8);

    Sinon, pour le style, sur la maquette il n'y a pas tous les filtres, c'est normal ?



    Très peu présente
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Sam 23 Sep 2017 - 9:32

    Coucou ! Et désolé du retard je n'ai pas été sur pc un moment. Concernant l'erreur merci je vais corriger ça, et pour les filtres je n'y ai pas encore touché. Comment faire pour remplacer le titre par une image ?

    Merci !

    ps : les images se sont décalées et je ne sais pas comment corriger ça
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Lun 25 Sep 2017 - 16:55

    up o/
    avatar
    Nihil Scar Winspeare
    Messages : 5004

    le Lun 25 Sep 2017 - 21:30

    Hello ^^

    J'ai commencé un petit début. Le CSS (la partie entre les balises style) est à remplacer intégralement par ceci :
    Pense à garder une copie de ton code actuel au cas où tu veux revenir en arrière ^^

    Code:
     body {
        margin: 0px;
        }
        #Bestiaire {
        margin: auto;
        width: 600px;
        height: 700px;
        background-color: #f2eeda;
        font-size: 14px;
        font-family: Arial, sans-serif;
        color: #ffffff;
        background-image: url('https://img11.hostingpics.net/pics/240275fond.png');
        }
        #Bestiaire_top {
        padding: 10px;
        font-size: 26px;
        font-family: monotype corsiva, cursive;
        text-align: center;
        margin-bottom: 10px;
        margin-left: 10px;
        margin-right: 10px;
        }
        .menu_title {
        display: inline-block;
        margin-bottom: -10px;
        margin-left: 20px;
        color: #ffffff;
        font-size: 12px;
        text-transform: uppercase;
        border-bottom: 1px solid white;
        }
        #menu ul {
        margin-bottom: 10px;
        }
        .menus + ul {
        overflow: hidden;
        transition: 0.8s;
        -webkit-transition: 0.5s;
        }
        .menus img {
        display: none;
        position: relative;
        bottom: -10px;
        opacity: 0.8;
        }
        .bestonglet {
        margin-left: -20px;
        color: #ffffff;
        }
        .bestonglet_0 {
        cursor: pointer;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        }
        .bestonglet_0:hover {
        margin-left: -10px;
        cursor: pointer;
        }
        .bestonglet_1 {
        margin-left: -10px;
        color: #ffffff;
        }
        #menu {
        float: left;
        padding-top: 5px;
        width: 137px;
        height: 600px;
        margin-right: 10px;
        padding-left: 5px;
        border-right: 1px solid #87591A;
        }
        .contenu_bestonglet {
        display: none;
        }
        #middle {
        overflow: auto;
        height: 600px;
        text-align: center;
        }
        .contenu_bestonglet > div {
        margin: auto;
        margin-bottom: 10px;
        width: 350px;
        }
        .creature_name {
        color: #ffffff;
        font-size: 15px;
        text-transform: uppercase;
        }
        .creature_bloc {
        margin: auto;
        position: relative;
        height: 150px;
        border-top: none;
        overflow: hidden;
        }
        .creature_bloc > img {
        opacity: 0.8;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        }
        .creature_bloc:hover .creature_bloc > img {
        opacity: 1;
        }
        .creature_in {
        padding: 5px;
        background-color: rgba(51, 31, 31, 0.78);
        position: absolute;
        top: -150px;
        left: 0px;
        height: 150px;
        transition: 0.5s;
        -webkit-transition: 0.5s;
        text-align: justify;
        opacity: 0;
        color: #ffffff;
        font-size: 11px;
        }
        .creature_bloc:hover .creature_in {
        top: 0px;
        opacity: 1;
        }
        .creature_caract {
        width: 85px;
        float: left;
        overflow: auto;
        max-height: 140px;
        }
    .creature_caract b {
        display: block;
        }
       
        .creature_desc {
        height: 140px;
        width: 255px;
        float: left;
          overflow: auto;
    }

    Ce que ça devrait donner :
    http://image.noelshack.com/fichiers/2017/39/1/1506367773-screen.png

    Pour le titre en image, dans le HTML tu as ceci :
    Code:
    Le Bestiaire du Royaume de NOM DE FORUM

    Tu remplaces par ton image :
    Code:
    <img src="https://img11.hostingpics.net/pics/286485pngbest.png" alt="Bestiaire">



    Très peu présente
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Mer 27 Sep 2017 - 19:14

    Merci beaucoup le rendu est beaucoup mieux ! o/

    Je suppose que se sont les mêmes modifications pour la boutique ?
    avatar
    Deamyx
    MasculinAge : 22Messages : 208

    le Jeu 12 Oct 2017 - 23:17

    Je n'arrive pas à centrer le bestiaire. C'est normal ?
    avatar
    Nihil Scar Winspeare
    Messages : 5004

    le Dim 15 Oct 2017 - 22:16

    Hello :)

    Tu parles de centrer comment ? Car sur le lien que tu as donné, ça semble centré :hum:
    Pour la boutique je ne sais pas si le code est fait de la même façon ou non, je te conseille de créer une page html avec la boutique et reproduire les mêmes changements :/
    Contenu sponsorisé


      La date/heure actuelle est Ven 27 Avr 2018 - 8:57