AccueilAccueil  CalendrierCalendrier  FAQFAQ  RechercherRechercher  MembresMembres  GroupesGroupes  S'enregistrerS'enregistrer  ConnexionConnexion  

Poster un nouveau sujet   Répondre au sujetPartagez | 
 

 Codage pour Silencio

Aller en bas 
AuteurMessage
Silencio
Invité
avatar


MessageSujet: Codage pour Silencio   Ven 1 Juin - 22:37

Silencio

Le type du code : D'après les possibilités d'écrite dans les règles de la section. Page d'accueil, profil, Disposition catégories & forum, QEEL, differentes fiche
Le schéma: obligatoire. Designé ou fait à la main/paint.
Spoiler:
 
Acceptez-vous que le code soit mis en LS sur AK ? Vous avez le droit de dire non, mais le partage c'est beau ! Je peux également le poster en LS à retardement, genre dans 1 ou 2 mois pour que vous gardiez l'exclusivité pour votre MAJ et ensuite, quand il n'est plus utilisé, le laisser à la disposition d'autres Smile Oui
Les éléments : Textes/url/couleur/images/police ... N'hésitez pas à écrire vos dimensions et tout ce qui m'aidera à intégrer. Pour les couleur : #77B5FE ou celui-ci #000080 ou encore #0F056B

Police : Sea Balance

Pour les image ca dépends : Exemple : Bottin des Patronus, un gif des patronus etc...
Un lien vers votre forum/site/Autre: http://rpg-silencio.forumactif.com/
Autre chose?Merci d'avance

fiche réalisée par laxy

Revenir en haut Aller en bas
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Dim 3 Juin - 12:37

Hello!
Oula une énorme commande! Hahahah
Bon comme précisé dans le règlement, je ne design pas je code simplement vos schémas, du coup y a pas énormément à faire sur chaque... Peut être que vous devriez apporter plus de précisions ? Genre la PA je vous fait simplement la structure? Vous n avez pas envie que je code les contenu?

Pour les bottines/listing, je vous laisserai mettre les titres et gifs, pareil, ce n' est pas à mois de faire! Wink
Pour la police, puis je avoir le lien vers Google font?

Ensuite, pourriez vous prendre un petit peu de temps pour me donner les dimensions de votre forum? La taille de la pa en largeur. . Et les couleurs, dans quel sens? Quelles couleurs pour le fond? Quelle que j utilisé pour le texte?

Je veux pas être méchante, mais c est un peu léger pour que je puisse coder... Après je peux vous fournir les schémas en code mais ils vont être vide et noir&blanc, à l identique de vos schémas...

Je ne suis pas designer... Imaginer un code et penser les couleurs/police prend du temps, et ce n'est pas dans mes cordes/services! Moi je mets juste en code vos idées! Wink
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Silencio
Invité
avatar


MessageSujet: Re: Codage pour Silencio   Dim 3 Juin - 19:40

Coucou tout d'abord merci de ta réponse rapide....

Est ce que ceci te parle plus, https://i62.servimg.com/u/f62/19/92/23/81/pa10.png ?

le bleu de fond : #344867
le bleu foncé : #1D3252
l'orange : #E6AD59
le gris : #808080
le blanc, c'est juste du blanc, donc #ffffff

L'écriture : https://www.dafont.com/sea-balance.font

Si c'est ça, je m'occuperai des autres fiches comme ça Smile
Revenir en haut Aller en bas
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Dim 3 Juin - 20:07

Oui c est parfait ainsi!!! Smile Merci!
Je te code ça demain soir ! Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Silencio
Invité
avatar


MessageSujet: Re: Codage pour Silencio   Dim 3 Juin - 20:47

D'accord, je vois pour faire les autres au plus vite
Revenir en haut Aller en bas
Silencio
Invité
avatar


MessageSujet: Re: Codage pour Silencio   Lun 4 Juin - 14:47

Coucou c'est re moi, juste pour vous dire peut etre adapter en fonction du header ?

Laxy a fait une palette de couleur selon le header Smile

Revenir en haut Aller en bas
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Sam 23 Juin - 15:25

Hey, désolé, après des semaines & des semaines... :/

Voici ta PA Smile

CSS :
Code:
.pa{
      background: #286293;
      border-radius: 15px;
      padding: 15px 10px 20px;
      color: #fff;
    }
   
    .pa h2{
      text-align:center;
      color: #E6AD59;
      margin: 0 0 10px;
    }
   
    .pa .content{
      display: flex;
      justify-content: space-between;
    }
   
    .pa .content .col{
      width: 32%;
      padding: 10px;
      box-sizing: border-box;
    }
   
    .pa .content .col a.i-link{
      display: inline-block;
      background: #010B21;
      padding: 3px 8px;
      border-radius: 4px;
      margin: 2px;
      color: #fff;
      text-decoration: none;
      transition: 0.5s;
    }
   
    .pa a.i-link:hover{
      background: #808080;
      transition: 0.5s;
    }
   
    .pa .s-pv{
      margin: 10px 0;
      text-align:center;
    }
   
    .pa .s-pv .more{
      display: block;
      margin: 0 0 3px;
      text-decoration: none;
      color: #fff;
    }
   
    .pa .s-pv a img{
        display: inline-block;
        width: 40px;
        height: 50px;
      transition: 0.5s;
    }
   
    .pa .s-pv a:hover img{
      border-radius: 10px;
      transition: 0.5s;
    }
   
    .pa .cup{
      background: #010B21;
      padding: 0 10px;
      border-radius: 15px;
      text-align:center;
      margin: 15px 0;
    }
   
    .pa .cup-wrapp{
      display: flex;
      justify-content: space-between;
    }
   

    .pa .content .col.mid{
      background: #010B21;
      border-radius: 15px;
    }
   
    .pa .content .col.mid p{
      height: 200px; /* pour augmenter la hauteur */
      overflow: auto;
    }
   
    .pa .content .col h3{
      margin: 0
    }
   
   
    .pa .staff p{
      display: inline-block;
      position:relative;
      width: 70px;
      height: 90px;
      overflow: hidden;
      transition: 1s;
    }
   
    .pa .staff p img{
      position: absolute;
      top: 0;
      left:0;
    }
   
    .pa .staff p:hover img{
      top:-90px;
      transition: 1s;
    }
   
    .pa .news{
      height: 150px;
      overflow:auto;
    }
   
    .pa .top-member{
      margin: 15px 0;
    }
   
    .pa .top-member img{
      display: inline-block;
      vertical-align:top;
     
    }

HTML :
Code:
<div class="pa">
    <h2>Bienvenue sur Silencio</h2>
    <div class="content">
        <div class="col">
          <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a>
          <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a> <a href="#" class="i-link">lien utile</a>
       
          <div class="s-pv">
            <h3>Scénarii & PV</h3>
            <a class="more" href="">plus ?</a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"> </a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
          </div>
         
          <div class="cup">
            <h3>Coupe des 4 maisons</h3>
            <div class="cup-wrapp">
              <p><img src="http://via.placeholder.com/40x90"><br />00 </p>
              <p><img src="http://via.placeholder.com/40x90"><br /> 00 </p>
              <p><img src="http://via.placeholder.com/40x90"><br /> 00 </p>
              <p><img src="http://via.placeholder.com/40x90"><br /> 00 </p>
            </div>
          </div>
         
          <div class="top-site">
            Votez !
            <br />
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
            <a href="#"><img src="http://via.placeholder.com/40x50"></a>
          </div>
         
      </div>
      <div class="col mid"><h3>Contexte</h3>
        <p>Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker. Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker.</p>
      </div>
        <div class="col">
          <div class="staff">
            <h3>Staff</h3>
            <p>
              <img src="http://via.placeholder.com/70x90"> <br>
              Pseudo
              <br> Dispo
              <br><a href="#">MP</a>
            </p>
           
            <p>
              <img src="http://via.placeholder.com/70x90"> <br>
              Pseudo
              <br> Dispo
              <br><a href="#">MP</a>
            </p>
           
            <p>
              <img src="http://via.placeholder.com/70x90"> <br>
              Pseudo
              <br> Dispo
              <br><a href="#">MP</a>
            </p>
           
            <p>
              <img src="http://via.placeholder.com/70x90"> <br>
              Pseudo
              <br> Dispo
              <br><a href="#">MP</a>
            </p>
          </div>
     
          <div class="news">
            <h3>Nouveautés</h3>
            <strong>../../..</strong> tadam tadam <br>
              <strong>../../..</strong> tadam tadam <br>
              <strong>../../..</strong> tadam tadam <br>
              <strong>../../..</strong> tadam tadam <br>
              <strong>../../..</strong> tadam tadam <br>
          </div>
         
          <div class="top-member">
            <h3>Membre du mois</h3>
            Prénom Nom
            <img src="http://via.placeholder.com/175x85">
          </div>
         
          <div class="partner">
            <h3>Top partenaires</h3>
            <marquee><img src="http://via.placeholder.com/100x35">
              <img src="http://via.placeholder.com/100x35">
              <img src="http://via.placeholder.com/100x35">
              <img src="http://via.placeholder.com/100x35">
              <img src="http://via.placeholder.com/100x35">
              </marqee>
          </div>
         
      </div>
      </div>
  </div>


Les tailles sont en % et en flex, pour que la PA soit la plus harmonieuse que possible et s'adapte aux différentes tailles ... Mais risque d'y avoir pas mal de réglages à faire ! Smile
Du coup, je te propose de l'installer sur ton forum test et de me faire tes retours Smile
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Silencio
Invité
avatar


MessageSujet: Re: Codage pour Silencio   Dim 24 Juin - 16:32

Coucou est ce que la PA doit resembler a ca : http://forumtestlucy.forumactif.com/
Revenir en haut Aller en bas
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Dim 24 Juin - 18:05

oui Smile Sauf si j'ai manqué des trucs de ton schéma non (et si j'ai manqué des trucs, dis moi !) ? Smile

J'ai juste vu que la largueur de ton forum, tu l'as mis en 80%, c'est pas une super idée de mettre des %, car du coup, tu risques d'avoir des déformations ... Moi suivant sur l'ordi que je suis par exemple, le staff est en une ligne ou sur 2 ... :/ ce qui déforme en hauteur la PA du coup ...
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Silencio
Invité
avatar


MessageSujet: Re: Codage pour Silencio   Lun 25 Juin - 16:49

Alors, je trouve que le bienvenue sur silencio est un peut petit en taille et alors le style d'écriture que j'avais mis le lien, je ne le vois pas pour les titre

qu'est ce que tu conseilles du coup pour la largueur et faut aller ou pour changer ?
Revenir en haut Aller en bas
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Sam 30 Juin - 8:04

Oh pardon, j'avais pas vu que tu m'avais répondu ... :/

Citation :
Alors, je trouve que le bienvenue sur silencio est un peut petit en taille et alors le style d'écriture que j'avais mis le lien, je ne le vois pas pour les titre
Tu peux l'augmenter avec un font-size Wink
Et oui, je n'ai pas mis le style d'écriture, car tu ne m'as pas donné un google fontmais dafont qu'il faut aussi héberger quelque part et je vais pas le faire désolé... :/


Citation :
qu'est ce que tu conseilles du coup pour la largueur et faut aller ou pour changer ?
peut être 800px ? La largueur de ton header sinon ^^
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Silencio
Invité
avatar


MessageSujet: Re: Codage pour Silencio   Dim 1 Juil - 0:58

Oh pardon, je ne savais pas que ça changeais quelque chose voila un lien google font : https://fonts.google.com/specimen/Dancing+Script

étant donné le manque de place de mon pc je dois faire les fiche petit a petit, en voila quelque une :

Questionnaire de répartition : https://i94.servimg.com/u/f94/19/89/79/03/questi10.png

Equipe de quidditch : https://i94.servimg.com/u/f94/19/89/79/03/equipe10.png

Fiche de présentation : https://i94.servimg.com/u/f94/19/89/79/03/fiche_10.png

Fiche de PV : https://i94.servimg.com/u/f94/19/89/79/03/fiche_11.png
Revenir en haut Aller en bas
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Dim 1 Juil - 10:23

Pas de soucis! C est mieux au fur et à mesure de toute façon! Je te fais ça dans les prochains jours! Smile

Edit :
pour ajouter ta google font, je te propose de suivre ce tutoriel, dis moi si tu n'y arrives pas, où si y'a un truc que tu comprends pas Wink

et ajoute à ton titre le :
Code:
font-family: 'Dancing Script', cursive;
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Jamy

avatar

Messages : 51
Date d'inscription : 22/04/2018

MessageSujet: Re: Codage pour Silencio   Ven 6 Juil - 19:14

Hey !! Voici tes codes Smile
Tu me dis si y'a des soucis Smile

Tu as réussi à installer la police ?

Je me suis basée sur un même code pour harmoniser un max et que ce soit facile pour toi ensuite de modifier les couleurs Smile J'ai repris celle de la PA du coup Smile

le CSS :
Code:
/* CODE MESSAGES GENERIQUES -- Jamy, AvadaKedagraph */
.messageG{
  background: #286293;
  border-radius: 15px;
  padding: 15px 10px 20px;
  color: #fff;
  width: 400px;
  margin: 0 auto;
}

.round{
  border-top-left-radius: 100% 15%;
  border-top-right-radius: 100% 15%;
}

.messageG .img-deco{
  width: 400px;
  height: 150px;
}

.round .img-deco{
  border-top-left-radius: 100% 75%;
  border-top-right-radius: 100% 75%;
}

.messageG h3{
  text-align:center;
  color: #E6AD59;
  font-size:26px;
  margin: 3px 0;
}


.poufsouffle{
  color: #e0D561 !important;
  text-shadow: 1px 1px 1px black;
}
.serpentard{
  color: #219445 !important;
  text-shadow: 1px 1px 1px black;
}
.serdaigle{
  color: #2174DB !important;
  text-shadow: 1px 1px 1px black;
}
.gryffondor{
  color: #d15345 !important;
  text-shadow: 1px 1px 1px black;
}

.messageG .intro{
  width:80%;
  margin: 0 auto;
  border-left: 2px solid #E6AD59;
  padding: 10px;
}

.messageG h4{
  margin:25px 0 5px;
}

.messageG .text{
  margin: 0 20px;
}

.messageG .w50{
  display: inline-block;
  vertical-align: middle;
  width: 47%;
  margin: 1%;
}

.messageG .w50 img{
  border: 5px solid #000;
  display:block;
  width: 100%;
  box-sizing: border-box;
}


.messageG .h320{
  height: 320px;
  overflow: auto;
}

.messageG .h320 img{
  display: block;
  width: 200px;
  height:320px;
}

.messageG .h150{
  height: 150px;
  overflow: auto;
}

.messageG .w100{
  width: 96%;
  margin: 0 auto  1% ;
}

.messageG .bgd{
  background: #010B21;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.messageG select{
  width: 100%;
  margin: 3px 0;
}

.messageG .h100{
  height: 100px;
  overflow: auto;
}

.messageG .h100 img{
  float:left;
  margin-right: 5px;
  height: 100px;
  width: 100px !important;
}

.messageG .credits{
  color: grey;
  text-decoration: none;
  text-align:center;
  display: block;
  margin: 25px 0 5px;
}
/* END MESSAGES GENERIQUES. */

code pour répartition :
Code:
<div class="messageG">
  <img class="img-deco" src="http://via.placeholder.com/400x150" />
  <h3>Répartition de Prénom P. Nom</h3>
  <p class="intro">Ton petit texte d'intro avant question.</p>
  
  <h4 class="bgd">Question 1</h4><div class="text">- réponse 1
  - réponse 2
  - réponse 3
    - réponse 4</div>
  
<h4 class="bgd">Question 2</h4><div class="text">- réponse 1
  - réponse 2
  - réponse 3
  - réponse 4</div>
<a class="credits" href="http://avada-kedagraph.forumactif.com/">jamy, avada-kedagraph</a>
</div>

code pour les quidditch :
Code:
<div class="messageG round">
  <img class="img-deco" src="http://via.placeholder.com/400x150" />
  <h3 class="gryffondor">Gryffondor</h3>
  
  <h4 class="bgd">Capitaine - 1 place</h4><div class="text">- xx</div>
  
<h4 class="bgd">Gardien - 1 place</h4><div class="text">- xx</div>
  
<h4 class="bgd">Poursuiveurs - 3 places</h4><div class="text">- xx
  - xx
  - xx</div>
  
<h4 class="bgd">Batteurs - 2 places</h4><div class="text">- xx
  - xx</div>
  
<h4 class="bgd">Attrapeur - 1 place</h4><div class="text">- xx</div>
  
<h4 class="bgd">Remplçants - 2 places</h4><div class="text">- xx
  - xx</div>
<a class="credits" href="http://avada-kedagraph.forumactif.com/">jamy, avada-kedagraph</a>
</div>


code de la présentation:


code pour les présentations :
Code:

<div class="messageG">
  <h3 class="bgd">Prénom Prénom<sup>2</sup> Nom</h3>
  
<div class="w50 h320"><img src="http://via.placeholder.com/200x320" /></div>
  <div class="w50 h320 bgd"> Date & lieu de naissance :
      Age :
      Annéee/métier :
      Sexualité :
      Mes opinions :
    Annimal de compagnie :
    Baguette :
    Patronus :
    Epouvantard :
    Don :
    Avatar : </div>
  
  <div class="w50 h150 bgd">Caractère.
  15lignes minimum.</div><div class="w50 h150 bgd">Notes aux BUSEs (6ème, 7ème et adultes uniquement).
Notes aux ASPICs (adultes uniquement).</div>

<div class="w100 bgd">Histoire.
20 lignes minimum.</div>

  <div class="w100 bgd">Derrière l'écran.</div>
  
<div class="w50">Pseudo :
Age :
Comment tu nous a connus :
Qu'en penses-tu ?
Code : </div><div class="w50"><img src="http://via.placeholder.com/200x100" />
<a class="credits" href="http://avada-kedagraph.forumactif.com/">jamy, avada-kedagraph</a></div>

  
  </div>

code pour les PV :
Code:
<div class="messageG">
  <h3 class="bgd">Prénom Prénom<sup>2</sup> Nom</h3>
  
<div class="w50 h320"><img src="http://via.placeholder.com/200x320" /></div>
  <div class="w50 h320 bgd"> Date & lieu de naissance :
      Age :
      Annéee/métier :
      Sexualité :
      Mes opinions :
    Annimal de compagnie :
    Baguette :
    Patronus :
    Epouvantard :
    Don :
    Avatar : </div>
  
  <div class="w50"><select><option>Qualité</option><option>value 1</option><option>value 2</option><option>value 3</option></select></div><div class="w50"><select><option>Défault</option><option>value 1</option><option>value 2</option><option>value 3</option></select></div>

<div class="w100 bgd">Ce qu'il faut savoir.</div>

  <div class="w100 bgd">Relations.</div>
  
<div class="w100 h100"><img src="http://via.placeholder.com/100x100" /> Prénom P. Nom : description de la relation. </div>
<a class="credits" href="http://avada-kedagraph.forumactif.com/">jamy, avada-kedagraph</a>
  
  </div>
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
Contenu sponsorisé




MessageSujet: Re: Codage pour Silencio   

Revenir en haut Aller en bas
 
Codage pour Silencio
Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Le codage pour les nuls
» Codage pour le RP
» Codes pour embellir vos RP
» Petit codage pour signature
» Code pour votre fiche de présentation

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
Avada Kedagraph :: Les commandes :: Catégorie D-
Poster un nouveau sujet   Répondre au sujetSauter vers: