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 :
Réassort du coffret Pokémon 151 Électhor-ex : où l’acheter ?
Voir le deal

    (Shanelia et Onyx?) Intégration "Les Chroniques d'Antartica."

    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Dim 24 Mai 2015 - 22:05

    Rappel du premier message :

    Ma demande



    Coucou mes codeurs d'amouuurs !!

    Oui aujourd'hui je viens uniquement pour mes petits codeurs chéris !

    Je viens pour une petite demande d'intégration !:) Vous savez, moi et mes idées parfois trop volumineuse. x)

    Allez courage, n'ayez crainte je suis sûr que je ne demande pas la mort. (Enfin si un peu quand même . xD)

    Un BIG GROS merci, bisou baveux à celui ou celle qui me prendra en charge. Je lui offre aussi un plateau de sushi (virtuel) et du Rhum (virtuel aussi xD) !

    PS : le forum est en version phpBB2, mais je peux très bien la changer en Invision pour les codeurs le demandant.

    PS2 : je suis tout à fait d'accord pour que chaque codage réalisé soit mis en LS, à la condition que le codeur soit aussi d'accord. :)



    Maquette(s) & Eléments
    Type de contenu : Une maquette d'un thème complet, enfin plusieurs maquette dudit thème complet. xD
    Maquettes :
    - Maquette de la façade.
    - Maquette des messages.
    - Maquette de la liste des sujets.
    - Maquette de la boite de messages privés.

    Informations : Même si tout est assez simple à comprendre je vais tout vous expliquer maquette par maquette (cela risque d'être assez long).

    Maquette de la façade :
    La Page d'accueil :
    – les quêtes et concours, j'aimerais un slideshow (pour le moment c'est simple) avec la possibilité de bouger les images défilantes avec la souris (négociable bien sûr.).
    – Le premier cercle à droite avec « Astria O'Thir » c'est le rond de la team ! J'aimerais que lorsqu’on passe la souris sur les petits rond au dessus on change de staffien que l'image de fond soit l'avatar du staffien.
    – Le second cercle à droite en bas : c'est pareil que pour la team, mais pour les prédéfinis.
    - Les liens à droite : j'aimerais un menue déroulant, un peu comme a NU, mais pas totalement pareil. Je laisse donc les effets au loisir du codeur.


    Les Catégories :
    - Je prend l'idée que Nyan-Cat m'as proposé dans ma première commande. C'est-à-dire que l'image de fond des catégories soit l'image de description. Si possible sur 3 colonnes comme elle me l'avait proposé.:)

    Ensuite, je souhaiterais qu'au passage de la souris sur les descriptions apparaissent les statistiques du forum. (Je me suis surtout rendue compte que je ne les avait pas casé, si jamais le codeur leur trouve une meilleur place je suis preneuse.)

    Le QEEL (sa va être rapide et simple) :
    - Le cadre à gauche : Divisé en deux : en haut j'aimerais la liste des membres fêtant leur anniversaire et en bas l'affichage des logos des partenaires en 50 par 50 pixels (12 logos maximums.).
    - Le cadre à droite : Listes des membres connectés => Les Aventuriers présents en ce moment. Liste des connectés au cours des 24 dernières heures => Les Aventuriers qui étaient présent.
    - Le rond du milieu : Se seras des onglets.
    La première chose qui apparaît sont les statistiques du forum (messages , membres inscrits, dernier inscrit.) Puis ne passant sur les petits logos en bas apparaît les groupes :
    - Le château : Les Seigneurs, administrateurs du forum, ils sont là pour enrichir l'univers au fils de vos aventures.
    - L'armure : Les Chevaliers : modérateurs du forum, ils sont là pour animer et enrichir l'univers au fils de vos aventures.
    - L'épée et la hache : Les Aventuriers, nos joueurs validé et pouvant vivre de palpitantes aventures dans notre Mer.
    - La boule noire : Les Ombres, joueurs n'étant plus actifs depuis minimum 3 mois ou ayant quitter le forum (avec ou sans justification). Pour récupérer votre comptes merci de MP un Admins.


    Maquette des Messages :
    J'aimerais que le profil soit au dessus des massages (Nan jure on avait pas compris ta maquette u.u).
    J'aimerais qu'au passage de la souris sur l'Avatar apparaisse les données principales du compte (nombre de message, date d'inscription, etc.).

    Après, je ne sais pas si c'est possible de le faire : Toute la partie dans le rectangle à droite fait aussi prit du profil (ajout via le panneau d'admin) et non pas la fiche de personnage activable. Est-ce possible de séparer les données du profil ou dois-je activer la fiche de personnage ?

    Voilà, c'est tout niveau codage.:)

    Consignes ou impératifs :

    Taille des éléments : J'aimerais juste que le corps du forum soit de minimum 900 pixels de largeur et jusqu'à grand maximum 1100 pixels de largeur. Après vous adapter chaque éléments en fonction.

    Pour les couleurs :
    Le corps : #88a9c3
    Le fond des éléments : #5089b5
    L'image de fond : https://2img.net/r/hpimg15/pics/836752582924motifs2.png

    Le QEEL :
    Les Admins => http://icons.iconarchive.com/icons/raindropmemory/legendora/32/Castle-icon.png
    Les Modos => http://icons.iconarchive.com/icons/raindropmemory/legendora/32/Armor-icon.png
    Les Membres => http://icons.iconarchive.com/icons/raindropmemory/legendora/32/SwordAxe-icon.png
    Les Inactifs => http://icons.iconarchive.com/icons/raindropmemory/legendora/32/Orb-BlackMagic-icon.png

    Les polices :
    Les Titres : Buffet Script.
    Écriture normale : Bellerose.




    Dernière édition par Rozenbrez le Dim 21 Juin 2015 - 21:51, édité 3 fois
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Ven 19 Juin 2015 - 16:29

    Est-ce possible d’éclaircir l'ombre des crédits? Je la trouve trop sombre en définitive. (Chieuse que je suis xD)
    Anonymous
    Invité

    Ven 19 Juin 2015 - 16:37

    Bien sûr ^^ Je l'ai mise en #666666 (un gris clair...)
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Ven 19 Juin 2015 - 16:57

    C'est nickel comme ça!! Merci d'avoir fait aussi vite. :)
    Anonymous
    Invité

    Ven 19 Juin 2015 - 17:09

    Aucun souci ^^

    J'ai retenté d'optimiser pour Mozilla et IE, mais pas moyen... Je ne comprend pas >.< Je suis désolée mais je ne sais vraiment pas quoi faire là... A la limite pour la PA on peut remonter un peu le block sur les effectifs tant qu'on ne trouve pas un autre moyen...
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Sam 20 Juin 2015 - 1:01

    J'ai installée un petit javascript que j'ai trouvé en googlant. Dans le CSS, il faut mettre le code qui va suivre pour que cela n'affecte que Internet Explorer et Firefox. On remplace "class" par l'élément qu'on veut modifier et voilà ^^
    Code:
    .gecko .CLASS {
      propriété: valeur;
    }

    J'ai arrangé la police dans la PA (et mis la même pour le qeel tant qu'à y être). Je vais arranger la description ce soir Wink
    Edit : Description arrangée, j'ai utilisée la position absolute à la place de relative Wink



    Anonymous
    Invité

    Sam 20 Juin 2015 - 10:32

    C'est fantastique Onyx ! Ça fonctionne à merveilles ! Merci infiniment ♥

    Sinon j'ai installé les CSS des différentes fiches et à peine corrigé celui du faux profil pour qu'il ne déforme pas le forum.

    Du coup c'est TERMINE !!! Le design est prêt à être installé =D
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Sam 20 Juin 2015 - 16:51

    OMG!! Je n'ai pas fini les images de description. xD Tapez moi, je ne suis pas allée aussi vite que je l’espérais, j'ai un peu de mal à trouver les images qui correspondent bien à l'univers. Je n'ai fais que 5 images descriptives pour le moment. >.<

    Après il est possible de fermer le forum, de tout installer et je continue le temps qu'il faudra pour faire les images qu'il manque.
    Anonymous
    Invité

    Sam 20 Juin 2015 - 18:19

    C'est comme tu veux ! (Il faut aussi les images de rang :3)

    Si tu as besoin d'aide pour trouver les images te servant aux différentes sections MP moi sur LCA en me disant quelles zones je peux faire ! Je chercherais aussi de mon côté ^^
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Sam 20 Juin 2015 - 18:54

    J'ai pas mal avancée, j'en ai 20 tout en sachant que certaines images servent plusieurs fois donc ça devrait aller plus vite que prévue. ^^

    C'est très gentil à toi. Et merci de me rappeler pour les rangs imagé. xD On peut commencer l'installation. Je te donne les logues provisoires du compte fondateur et te laisse gérer toute la partie template+CSS ^^

    Anonymous
    Invité

    Sam 20 Juin 2015 - 18:58

    Très bien alors j'y vais de ce pas =D
    RozenBreizh
    RozenBreizh
    FémininAge : 32Messages : 1411

    Dim 21 Juin 2015 - 21:55

    Merci les filles pour votre coopération!! Vous me comblez de bonheur en m'offrant un design magnifique et en ayant réaliser toutes mes maquettes, malgré quelque petit détails de dernières minutes. xD

    Je vous envois mille bisous à chacune et une caisse de Rhum (tout droit sorti de la réserve personnelle du Capitaine!) et une reconnaissance plus éternel!

    La commande est donc officiellement terminée et peut-être rangé. Very Happy

    PS: Encore merciiiiiii!!!!!!
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Lun 22 Juin 2015 - 1:33

    Juste avant d'archiver, je viens préciser un petit quelque chose pour le javascript qui remplace les avatars du staff de la PA.

    La partie staff correspond à ceci :
    Code:
    <div class="pa_bloc" id="staff_bloc">
                                                                                                                           <span class="staffonglet_1 staffonglet" id="staffonglet_Staff1" onmouseover="javascript:change_staffonglet('Staff1');"><a class="js-replace-avatar" href="/u1"></a><img alt="Staff1" src="http://img4.hostingpics.net/pics/697584avanu.png" /></span><span class="staffonglet_0 staffonglet" id="staffonglet_Staff2" onmouseover="javascript:change_staffonglet('Staff2');"><a class="js-replace-avatar" href="/u2"></a><img alt="Staff2" src="http://i39.servimg.com/u/f39/18/82/11/76/sans_t14.jpg" /></span><span class="staffonglet_0 staffonglet" id="staffonglet_Staff3" onmouseover="javascript:change_staffonglet('Staff3');"><a class="js-replace-avatar" href="/u3"></a><img alt="Staff3" src="http://r24.imgfast.net/users/2915/57/91/98/avatars/19494-96.jpg" /></span><span class="staffonglet_0 staffonglet" id="staffonglet_Staff4" onmouseover="javascript:change_staffonglet('Staff4');"><a class="js-replace-avatar" href="/u4"></a><img alt="Staff4" src="http://img4.hostingpics.net/pics/697584avanu.png" /></span><span class="staffonglet_0 staffonglet" id="staffonglet_Staff5" onmouseover="javascript:change_staffonglet('Staff5');"><a class="js-replace-avatar" href="/u5"></a><img alt="Staff5" src="http://img15.hostingpics.net/pics/762536StaffPA.png" /></span>                                                                                                           
             <div class="contenu_staffonglet" id="contenu_staffonglet_Staff1">
                                                                <a class="js-replace-avatar" href="/u1"></a><img alt="Staff1" src="http://img4.hostingpics.net/pics/697584avanu.png" />                                           
                <div class="staff_in">
                                                                                                                       Admin<br />Fonda - <span id="staff_pre1"></span>                                                                   
                   <div class="bla_staff">
                                                                                          Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam.                                                                 
                   </div><a href="#">Contacter</a>                                                                                                     
                </div>
                                                                                                                 
             </div>
                                                                                                                                                                                                                                          
             <div class="contenu_staffonglet" id="contenu_staffonglet_Staff2">
                                                                <a class="js-replace-avatar" href="/u2"></a><img alt="Staff2" src="http://i39.servimg.com/u/f39/18/82/11/76/sans_t14.jpg" />                                           
                <div class="staff_in">
                                                                                                                       Bidule<br />Poste - <span id="staff_pre2"></span>                                                                   
                   <div class="bla_staff">
                                                                                    Bla bla sur le staffien                                                                   
                   </div><a href="#">Contacter</a>                                                                                                                 
                </div>
                                                                                                                 
             </div>
                                                                                                                                                                                                                                          
             <div class="contenu_staffonglet" id="contenu_staffonglet_Staff3">
                                                                <a class="js-replace-avatar" href="/u3"></a><img alt="Staff3" src="http://r24.imgfast.net/users/2915/57/91/98/avatars/19494-96.jpg" />                                               
                <div class="staff_in">
                                                                                                                       Prénom Nom<br />Poste - <span id="staff_pre3"></span>                                                                   
                   <div class="bla_staff">
                                                                                          Bla bla sur le staffien                                                                   
                   </div><a href="#">Contacter</a>                                                                                                                 
                </div>
                                                                                                                 
             </div>
                                                                                                                                                                                                                                          
             <div class="contenu_staffonglet" id="contenu_staffonglet_Staff4">
                                                                <a class="js-replace-avatar" href="/u4"></a><img alt="Staff4" src="http://img4.hostingpics.net/pics/697584avanu.png" />                                           
                <div class="staff_in">
                                                                                                                       Prénom Nom<br />Poste - <span id="staff_pre4"></span>                                                                   
                   <div class="bla_staff">
                                                                                          Bla bla sur le staffien                                                                   
                   </div><a href="#">Contacter</a>                                                                                                                 
                </div>
                                                                                                                 
             </div>
                                                                                                                                                                                                                                          
             <div class="contenu_staffonglet" id="contenu_staffonglet_Staff5">
                                                                <a class="js-replace-avatar" href="/u5"></a><img alt="Staff5" src="http://img15.hostingpics.net/pics/762536StaffPA.png" />                                           
                <div class="staff_in">
                                                                                                                       Prénom Nom<br />Poste - <span id="staff_pre5"></span>                                                                   
                   <div class="bla_staff">
                                                                                          Utque aegrum corpus quassari etiam levibus solet offensis, ita animus eius angustus et tener, quicquid increpuisset, ad salutis suae dispendium existimans factum aut cogitatum, insontium caedibus fecit victoriam luctuosam                                                             
                   </div><a href="#">Contacter</a>                                                                                                                 
                </div>
                                                                                                                 
             </div><script type="text/javascript">
        //<!--
          var anc_staffonglet = 'Staff1';
          change_staffonglet(anc_staffonglet);
        //-->
    </script>                                                                                                               
          </div>

    Je vais prendre le deuxième onglet en exemple, qui correspond à ceci :
    Code:
    <span class="staffonglet_0 staffonglet" id="staffonglet_Staff2" onmouseover="javascript:change_staffonglet('Staff2');"><a class="js-replace-avatar" href="/u2"></a><img alt="Staff2" src="http://i39.servimg.com/u/f39/18/82/11/76/sans_t14.jpg" /></span>

    Pour que le javascript qui va automatiquement chercher l'avatar du staffien fonctionne, il faut changer le "/u2" du lien ".js-replace-avatar" par le numéro du staffien (genre "/u36" ou autre). Quant à l'image directement après le lien, c'est l'image "de base" au cas où quelqu'un aurait un navigateur qui bloquerait les javascript ou autre.

    Il faut faire la même chose dans le contenu du staffien qui correspond à ceci :
    Code:
    <div class="contenu_staffonglet" id="contenu_staffonglet_Staff2">
                                                                <a class="js-replace-avatar" href="/u2"></a><img alt="Staff2" src="http://i39.servimg.com/u/f39/18/82/11/76/sans_t14.jpg" />                                           
                <div class="staff_in">
                                                                                                                       Bidule<br />Poste - <span id="staff_pre2"></span>                                                                   
                   <div class="bla_staff">
                                                                                    Bla bla sur le staffien                                                                   
                   </div><a href="#">Contacter</a>                                                                                                                 
                </div>
                                                                                                                 
             </div>




    Et pour le javascript qui dit "absent" ou "présent", il faut que tu changes aussi les "/u1", mais cette fois-ci directement dans le javascript. À savoir que si le staffieux est une fille, tu peux aussi changer le "présent" pour "présente" directement là aussi, hein.




    Voilà, j'archive demain, histoire de te laisser lire ^^



    Anonymous
    Invité

    Lun 22 Juin 2015 - 9:01

    Merci pour les explications ! J'avais deviné comment cela fonctionnait et je vois que je n'ai rien oublié *-*

    En plus de cela il ne faut pas oublié un span avec la classe staff_rank autour des rangs des membres du staff !
    Onyx
    Onyx
    FémininAge : 30Messages : 3350

    Mar 23 Juin 2015 - 2:03

    Ah oui, j'avais oublié que tu étais Admin là-bas ^^

    Alors j'archive ♥



    Contenu sponsorisé


      La date/heure actuelle est Sam 11 Mai 2024 - 6:55