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


    Boîte Latéral

    Kana-Chii
    Kana-Chii
    FémininAge : 23Messages : 40

    Mar 8 Mai 2012 - 15:44

    Commande
    Elément à coder : Boîte latéral
    Adresse du forum : http://renmei.forumactif.pro/
    Description du résultat voulu : Tout est dans l'image, j'ai utilisé ps pour avoir un résultat concret de ce que je veux. Ce sont les deux boîtes à droites et l'autre à gauche mais vu qu'on ne peut demander qu'un seul élément, je ne demande que l'une des boîtes à droite.
    Couleurs ou tons : Couleur (le vert): #E3E8A9
    Couleur (le rouge) #fc5b5b
    Images :
    Spoiler:
    Autres précisions :
    Bonjour,

    Je tiens à préciser que les titre dans les cases rouges seront écrits normalement. La boîte mesure 167*116 et les cases des titres 149*26.
    Les boîtes vous bien sur servir à écrire dedans.

    Merci de votre aide. ^^


    Dernière édition par Kana-Chii le Mer 9 Mai 2012 - 15:12, édité 1 fois
    Aeden
    Aeden
    FémininAge : 32Messages : 59

    Mar 8 Mai 2012 - 17:47

    Salutation !
    Bon je ne suis que nouvelle ici mais je pense pouvoir t'aider.

    * ETAPE 1 :

    Tout d'abord, vas copier/coller ceci dans ta feuille CSS.
    Pour l'atteindre : Panneau d'administration > Affichage > Couleurs > Feuille CSS

    -----> Il faut donc y copier ceci :
    Code:
    .BOITE1 { 
    width:167px; /*--Largeur à éditer en fonction de la taille de ton forum (en px ou %)--*/
    height:116px;/*--Hauteur à changer en fonction de ton texte--*/
    box-shadow:0px 2px 5px black; /*--Ombre de ta boite--*/
    -moz-box-shadow:0px 2px 5px black;
    -webkit-box-shadow:0px 2px 5px black;
    border-radius:10px; /*--Arrondi des QUATRES angles--*/
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    /*-----------------------------------------------Note :----------------------------------------
      Pour préciser un angle par rapport aux autres il faut mettre "10px 10px 10px 10px"
      et éditer celui ou ceux voulus.
    ---------------------------------------------------------------------------------------------*/
     
    position:fixed; /*--Position de la boite : Fixe--*/
    TOP : 100px; /*--Position à partir du haut--*/
    RIGHT: 5px;
    Background-color:#e3e8a9; /*--Couleur de fond : supprimer pour mettre en transparent--*/
    padding:5px;/*--Marge intérieure générale--*/
    padding-top:4px;/*--Marge intérieure du haut, éditée "à la place" de la bordure générale--*/
    text-align:justify; /*--Alignement du texte : "right" -> droite ; "left" -> Gauche ; "justify" -> justifié . --*/
    Color: BLACK ; /*--Mettre un nom de couleur (ex:BLACK) ou un code couleur (ex:#000000), pour changer le couleur du texte--*/
    }

    .CADRE1{
    height:26px;
    margin-bottom:5px; /*--marge extérieure du cadre - en bas--*/
    box-shadow:0px 2px 5px black;
    -moz-box-shadow:0px 2px 5px black;
    -webkit-box-shadow:0px 2px 5px black;
    border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;

    text-align:center;
    padding:5px;
    background-color: #fc5b5b ;
    color: #0eb092 ; /*--Couleur du texte :
      Note : le vert donné n'était pas le bon donc à éditer si ça ne convient pas--*/
    font-family: GEORGIA ; /*--Typo du titre souhaité--*/
    font-size: 14px ;  /*--Taille de la typo--*/
    text-shadow:1px 1px 2px black;
    /*--Note : le contraste vert-rouge était trop fort je me suis permise de rajouter une bordure d'ombre au texte
    Ce qui aidera à lire le vert par dessus le rouge normalement. A supprimer si inconvenant.--*/
    }

    Note : Tu pourras retourner dans ta feuille css plus tard pour éditer les couleurs si tu le souhaites. Je t'ai mit des explications pour que tu ne sois pas perdu(e) mais en gros tu peux supprimer tout ce qui est entre /*-- et --*/ sans crainte si tu trouve que ça prend trop de place.

    * ETAPE 2 :

    Ensuite pour afficher ces cadres sur la page d'accueil, tu vas dans :
    "Affichage > Page d'accueil > Généralités".
    tu actives le mode HTML
    /!\ Attention : c'est important de le faire sinon cela va rater ^w^".
    Ensuite, tu y copies-colle ceci, peu importe que ce soit avant ou après la description de ta PA :
    Code:
    <div class="BOITE1">
    <div class="CADRE1"> TON TITRE ICI </div>


    TON TEXTE ICI

    </div>
    Voilà, logiquement ça devrait fonctionner puisque je l'ai testé sur le mien ^^


    A savoir :
    1 : Tu n'as plus qu'à éditer le texte sur la page d'accueil et les couleurs sur le CSS si ça ne te convient pas.
    2 : Comme tu peux le voir sur le code de la PA (page d'accueil), tu as deux titres : BOITE 1 et CADRE 1. Tu imagines donc bien que tu pourras créer un second cadre de cette manière en notant dans le css une nouvelle boite intitulée BOITE 2, par exemple. Si tu le fais, pense à changer la position de la boite sur ton écran histoire qu'elles ne se superposent pas.
    3 : Sur l'édition de la page d'accueil, en mode HTML tu peux évidement travailler ta page d'accueil en dessous sans que ce code ajouté ne vienne empiéter dessus logiquement.



    Kana-Chii
    Kana-Chii
    FémininAge : 23Messages : 40

    Mar 8 Mai 2012 - 19:17

    Merci infiniment Aeden et merci encore pour toute les explication!

    Mais j'ai quand même un problème, au moment ou tu écrit:
    "Ensuite pour afficher ces cadres sur la page d'accueil, tu vas dans :
    Affichage > Page d'accueil > Généralités".
    Là tu actives le mode HTML
    /!\ Attention : c'est important de le faire sinon cela va rater ^w^"

    Les bouton a cocher pour choisi le mode htlm est impossible a cocher, comme le mode portail et index, pourrais tu m’éclairer s'il te plait. Et donc tu coup sa ne marche pas.


    Nan c'est bon, j'ai trouvé, encore merci.

    Cordialement.
    Aeden
    Aeden
    FémininAge : 32Messages : 59

    Mar 8 Mai 2012 - 19:37

    De rien, bonne soirée ^^



    Klash
    Klash
    MasculinAge : 41Messages : 20653

    Dim 13 Mai 2012 - 10:25

    Bonjour avant de déplacer, il faudrait mettre le crédit sur ta pa merci de l'ajouter donc.



    Boîte Latéral 376864signichigo
    Kana-Chii
    Kana-Chii
    FémininAge : 23Messages : 40

    Dim 13 Mai 2012 - 15:03

    Voila, j'ai mis "Aide codage diver: [url= https://www.never-utopia.com]Never Utpia[/url]".

    Désolé de l'avoir oublié ><.



    Boîte Latéral 2z7g2d10
    Klash
    Klash
    MasculinAge : 41Messages : 20653

    Jeu 17 Mai 2012 - 14:58

    Merci de l'avoir ajouter j'archive donc.



    Boîte Latéral 376864signichigo
    Contenu sponsorisé


      La date/heure actuelle est Sam 25 Juin 2022 - 16:12