Avada KedagraphConnexion

Forum d'entraide et de libres services en graphisme, codage et RPG. Service de commandes & aides conception de forums. Icônes, avatar, tutoriels, astuces, entraide, conception RPG, HTML, CSS, Templates ForumActif, JavaScript, JS, Jquery


Partagez

descriptionCodage pour Silencio

more_horiz
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 :
Page d'acceuil : https://i.servimg.com/u/f11/19/72/29/74/pa_v_210.png (barre de glissement pour le contexte)

Profil : https://i.servimg.com/u/f11/19/74/88/78/sans_t10.png

Disposition catégories & forum : https://i.servimg.com/u/f62/19/72/29/74/sans_t12.png

QEEL : https://i.servimg.com/u/f11/19/72/29/74/qeel_v10.png (Pour l'image, libre à vous, mais avec animation et de forme ovale)

Présentation : https://i.servimg.com/u/f62/19/35/69/58/presen10.png

Répartition : https://i.servimg.com/u/f62/19/92/14/53/repart10.png (avec image au dessus du titre)

PV : https://i.servimg.com/u/f11/19/72/29/74/fiche_12.jpg

Réglement : https://i.servimg.com/u/f11/19/72/29/74/reglem10.jpg (avec image au dessus du titre)

Contexte : https://i.servimg.com/u/f11/19/72/29/74/contex10.jpg (avec image au dessus du titre)

Fiche pour différent bottin (avatar, patronus, Prénom, nom de famille, ) : https://i.servimg.com/u/f11/19/72/29/74/recens14.jpg (avec image au dessus du titre)

Pour les équipe de quidditch ; https://i.servimg.com/u/f11/19/72/29/74/equipe14.png

Changer Gryffondor par les 3 autres maisons pour les autres fiche
(avec image de la maison au dessus du titre)

Bottin des élèves par année : https://i.servimg.com/u/f11/19/72/29/74/regist10.png (avec image au dessus du titre)

bottin des sortilèges : https://i.servimg.com/u/f11/19/72/29/74/botin_10.png (avec image au dessus du titre)

Famille de sang-pur : https://i.servimg.com/u/f11/19/72/29/74/famill11.png (avec image au dessus du titre)

Bottin des métiers : https://i.servimg.com/u/f11/19/72/29/74/liste_12.png (avec image au dessus du titre)

Poste à Poudlard : https://i.servimg.com/u/f11/19/72/29/74/poste_11.png (Avec image au dessus du titre)

Liste des préfets & préfets-en-chef : https://i.servimg.com/u/f11/19/72/29/74/prefet11.png (Avec image au dessus du titre)

Bottin des dons : https://i.servimg.com/u/f11/19/72/29/74/liste_11.png (Avec image au dessus du titre)

Bottin par sang : https://i.servimg.com/u/f11/19/72/29/74/recens17.jpg (Avec image au dessus du titre)

Bottin par groupe : https://i.servimg.com/u/f62/19/35/69/58/groupe10.png (Avec image au dessus du titre)


Fiche partenaire : https://i.servimg.com/u/f11/19/72/29/74/fiche_13.jpg

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

descriptionRe: Codage pour Silencio

more_horiz
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

descriptionRe: Codage pour Silencio

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

Est ce que ceci te parle plus, https://i.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

descriptionRe: Codage pour Silencio

more_horiz
Oui c est parfait ainsi!!! Smile Merci!
Je te code ça demain soir ! Smile

descriptionRe: Codage pour Silencio

more_horiz
D'accord, je vois pour faire les autres au plus vite

descriptionRe: Codage pour Silencio

more_horiz
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

descriptionRe: Codage pour Silencio

more_horiz
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

descriptionRe: Codage pour Silencio

more_horiz
Coucou est ce que la PA doit resembler a ca : http://forumtestlucy.forumactif.com/

descriptionRe: Codage pour Silencio

more_horiz
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 ...

descriptionRe: Codage pour Silencio

more_horiz
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 ?

descriptionRe: Codage pour Silencio

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

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é... :/


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 ^^

descriptionRe: Codage pour Silencio

more_horiz
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://i.servimg.com/u/f94/19/89/79/03/questi10.png

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

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

Fiche de PV : https://i.servimg.com/u/f94/19/89/79/03/fiche_11.png

descriptionRe: Codage pour Silencio

more_horiz
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;

descriptionRe: Codage pour Silencio

more_horiz
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>

descriptionRe: Codage pour Silencio

more_horiz
J'archive, car projet mis en pause.

descriptionRe: Codage pour Silencio

more_horiz
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum