Demande de modification boutique et bestiaire

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 ♥

Petit up p/

Up :)

up

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 :
https://www.never-utopia.com/t60723-bestiaire-et-herbier-avec-triage
https://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..

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 :)

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

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 . 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 ? :)

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

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://2img.net/i/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 ?

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

up o/

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 :
https://2img.net/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">

Merci beaucoup le rendu est beaucoup mieux ! o/

Je suppose que se sont les mêmes modifications pour la boutique ?

Je n'arrive pas à centrer le bestiaire. C'est normal ?

Hello :)

Tu parles de centrer comment ? Car sur le lien que tu as donné, ça semble centré
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 :/