Ichigooo !


Partagez | 
 


 « Ad Astra Per Aspera »

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2  Suivant
AuteurMessage


Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Ad Astra Per Aspera    Dim 07 Mai 2017, 12:58


•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Dernière édition par Kao le Sam 22 Juil 2017, 03:31, édité 7 fois


LadyErria
Cerise


Un peu plus...
Rôle / Ancien rôle : Modératrice à l'essai
Décris-toi :
Famille et relations :
avatar

Féminin
Messages : 1829
Date d'inscription : 23/10/2015
Âge : 33
Logiciel graphique : photoshop cc

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 18 Juin 2017, 10:25

boutique toujours d'actualité @Kao

•••••••••••••••••••••••••••••••••••••••••••


Mes Badges et Cadeaux:
 


Asami
Pomme


Un peu plus...
Rôle / Ancien rôle : Administratrice depuis le 3 Août.
Décris-toi :
Famille et relations :
avatar

Messages : 2855
Date d'inscription : 25/12/2015
Âge : 20
Logiciel graphique : Photoshop CC

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 18 Juin 2017, 13:39

Je pense oui, mais Kao n'a plus de pc en ce moment donc c'est compliqué pour lui Sisi

•••••••••••••••••••••••••••••••••••••••••••



Ancienne admin. Inactive.



LadyErria
Cerise


Un peu plus...
Rôle / Ancien rôle : Modératrice à l'essai
Décris-toi :
Famille et relations :
avatar

Féminin
Messages : 1829
Date d'inscription : 23/10/2015
Âge : 33
Logiciel graphique : photoshop cc

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 18 Juin 2017, 17:21

j'ai rajouter en description pc hs comme cela pas de soucis ^^

•••••••••••••••••••••••••••••••••••••••••••


Mes Badges et Cadeaux:
 


Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 14:39


•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Rêliane
Pomme


Un peu plus...
Rôle / Ancien rôle :
Décris-toi :
Famille et relations :
avatar

Messages : 436
Date d'inscription : 13/08/2016
Âge : 24

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 16:39

Pseudo : Rêliane o/

Codage voulu (Mettre un shéma) :

http://i.imgur.com/3aeYguo.png
http://i.imgur.com/Kfk8Lnr.png
http://i.imgur.com/VHDS8Ha.png
http://i.imgur.com/FEV0bCE.png



Effets voulus : "Quand on clique sur avatars etc, ça ouvre donc les onglets :"

Comme sur le GIF
http://i.imgur.com/vIp2vCW.gif

refresh pour voir l'effet


Couleurs voulues : (image de fond : http://i.imgur.com/vB4JPol.png)

Polices voulues :

https://www.fonts.com/font/k-type/new-old-english?QueryFontType=Web&src=GoogleWebFonts (si ca peut t'aider)
https://fonts.google.com/specimen/Bellefair



•••••••••••••••••••••••••••••••••••••••••••




Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 16:43

T'as vu j'ai codé ton truc avant la commande je suis un dieu.

Donc voici l'aperçu :


Ensuite voici le code à mettre dans une page HTML sur ton forum de test Smile :
Code:
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Galerie de Rêliane</title>
  <link rel="stylesheet" href="https://cocktail-graph.org/html/Kao/cloister.css" />
  <style>
  @import url('https://fonts.googleapis.com/css?family=Bellefair');
  body{ font-family: 'Cloister Black'; width: 99%}
  body img{
    max-width: 95%;
    margin: 5px
  }
  article{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: url('http://i.imgur.com/JPdG6ku.png'); /*Ton image de fond*/
    background-repeat: no-repeat; /*Pour empêcher la duplication de l'image*/
    background-color: #e7e7e7; /*La couleur de fond générale, à assortir avec ton image de fond*/
    width: 100%;
    height: 676px;
    background-position-x: center;
    background-position-y: 65%;
  }
  #home{display: -webkit-box;display: -ms-flexbox;display: flex;}
  #avatar, #signa, #large, #autre{
    display: none;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }
  #descriptif{
    padding: 10px;
    overflow: auto;
    font-family: 'Bellefair';
    height: 15%;
  }
  #rel{
    font-family: 'Cloister Black';
    color: #393e43;
    font-size: 100px;
    margin: auto;
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
    -ms-flex-item-align: center;
    align-self: center;
    justify-self: center;
  }
  #menu{
    font-family: 'Cloister Black';
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    font-size: 35px;
  }
  #Avatars, #avatar h2{
    color: #4e9939;
  }
  #Signatures, #signa h2{
    color: #0080b3;
  }
  #Larges, #large h2{
    color: #dd624c;
  }
  #Autres, #autre h2{
    color: #e3c769;
  }
  h2{
    margin: 0;
    font-size: 35px;
    font-weight: normal;
    text-align: center;
  }
  #boxAvatar, #boxSigna, #boxLarge, #boxAutre{
    text-align: center;
    overflow-y:scroll;;
  }
  #boxAvatar{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-fill: balance;
    -moz-column-fill: balance;
    column-fill: balance;
  }
  </style>
  <script src="https://code.jquery.com/jquery.min.js"></script>
  <script src="https://code.jquery.com/jquery-migrate-1.4.1.js"></script>
</head>
<body>
  <article id="home">
    <!--<main>-->
    <div id="descriptif">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer euismod ut sem et consequat. Vestibulum gravida pretium imperdiet. Fusce at faucibus dui. Aenean eu sem sit amet nunc ultricies accumsan eget eget nulla. Integer et mollis ex. Nulla ullamcorper dapibus bibendum. Vivamus finibus metus eget dui pretium vulputate. Donec eu mauris erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
    </div>
    <div id="menu">
      <span class="menuitem" id="Avatars">Avatars</span>
      <span class="menuitem" id="Signatures">Signatures</span>
      <span class="menuitem" id="Larges">Larges pièces</span>
      <span class="menuitem" id="Autres">Autres</span>
    </div>
    <div id="rel">Rêliane</div>
    <!--</main>-->
  </article>
  <article id="avatar">
    <h2>Avatars</h2>
    <div id="boxAvatar">
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
      <img src="http://img110.xooimage.com/files/c/e/1/qtkyz3a5-5259880.png"/>
    </div>
  </article>
  <article id="signa">
    <h2>Signatures</h2>
    <div id="boxSigna">
    </div>
  </article>
  <article id="large">
    <h2>Larges pièces</h2>
    <div id="boxLarge">
    </div>
  </article>
  <article id="autre">
    <h2>Autres</h2>
    <div id="boxAutre">
    </div>
  </article>

  <script>

if($.browser.mozilla){
  $('#avatar, #signa, #large, #autre').css("overflow", "auto");
}


  $('#Avatars').mouseover(function() {
    $('#home').hide();
    $('#avatar').show();})
    $('#avatar').mouseleave(function() {
      $('#home').show();
      $('#avatar').hide();
    })
    $('#Signatures').mouseover(function() {
      $('#home').hide();
      $('#signa').show();})
      $('#signa').mouseleave(function() {
        $('#home').show();
        $('#signa').hide();
      })
      $('#Larges').mouseover(function() {
        $('#home').hide();
        $('#large').show();})
        $('#large').mouseleave(function() {
          $('#home').show();
          $('#large').hide();
        })
        $('#Autres').mouseover(function() {
          $('#home').hide();
          $('#autre').show();})
          $('#autre').mouseleave(function() {
            $('#home').show();
            $('#autre').hide();
          })

          </script>
        </body>

Et dans ton sujet de galerie tu mettras ce code :
Code:
<iframe src="URL DE TA PAGE HTML"  frameborder="0" scrolling="no" style="width:100%; height: 680px; border:none;"></iframe>

•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Yuuki
Cerise Shakeuse


Un peu plus...
Rôle / Ancien rôle : Actuellement Administratrice
Décris-toi : Kazama Chikage is mine.. ewe
Famille et relations : MangaaPowaaaaaaaa ~Mon kokoro appartient à Hina. ♥ Ma petite Yutsikoo/Katsukii/Lamire ! Dezko, il est tellement gentil
avatar

Féminin
Messages : 5175
Date d'inscription : 11/01/2014
Âge : 96
Logiciel graphique : Photoshop CC 2017

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 17:28

Kaô d'amûr, si je souhaite avoir une fiche rp qui possède des effets au clic, tu crois pouvoir me faire ça ? Sachant que je ne peux pas passer par une page html pour chaque post.

•••••••••••••••••••••••••••••••••••••••••••

By Akazaya & Arizona


Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 17:45

Hum donc du javascript qui fonctionne dans un post c'est ça ? :/

•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Rêliane
Pomme


Un peu plus...
Rôle / Ancien rôle :
Décris-toi :
Famille et relations :
avatar

Messages : 436
Date d'inscription : 13/08/2016
Âge : 24

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 19:28

Pseudo : Aucune idée !
Type de codage [signature à onglet, PA,...] : FICHE
Dimensions : COMME SUR L'image ! bon allez 1024 x ... 864 VOILA
Contraintes : le principe est simple , tu cliques sur l'onglet , ca change de d'onglet et ca déplace l'étiquette vers la gauche ! ta compris le concept ? les effets de texte avec hein e.e
Schéma






•••••••••••••••••••••••••••••••••••••••••••




Asami
Pomme


Un peu plus...
Rôle / Ancien rôle : Administratrice depuis le 3 Août.
Décris-toi :
Famille et relations :
avatar

Messages : 2855
Date d'inscription : 25/12/2015
Âge : 20
Logiciel graphique : Photoshop CC

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Dim 09 Juil 2017, 23:25

6 points amor

•••••••••••••••••••••••••••••••••••••••••••



Ancienne admin. Inactive.



Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Lun 10 Juil 2017, 21:29

Voilà voilà Rêliane :



Dis moi si cela te convient c:

•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Rêliane
Pomme


Un peu plus...
Rôle / Ancien rôle :
Décris-toi :
Famille et relations :
avatar

Messages : 436
Date d'inscription : 13/08/2016
Âge : 24

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Lun 10 Juil 2017, 21:43

Au top o/

•••••••••••••••••••••••••••••••••••••••••••




Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Lun 10 Juil 2017, 22:31

Donc voilà le code à mettre dans une page html :
Code:

<!doctype html>
<html lang="fr">
  <head>
    <meta charset="utf-8" />
    <title>Boutique de Rêliane</title>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Bellefair');
    body{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      font-family: 'Bellefair';
    }
    article{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      background-color: #f4f6fe;
      background-image: url('http://i.imgur.com/T6hcgd1.png');
      background-repeat: no-repeat;
      background-position-x: center;
      background-position-y: -140%;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
      border: 1px solid #f396cd;
      width: 99%;
      height: 450px;
      padding: 0px 20px 10px 20px;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
    }
    #formulaire, #inProgress, #ended{
      display: none;
      padding: 0px 65px 10px 65px;
    }
    aside{
      padding-top: 15px;
    }
    menu{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin: 0;
      padding: 0;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: end;
          -ms-flex-align: end;
              align-items: flex-end;
    }
    menuitem{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding-right: 5px;
      height: 65px;
      width: 120px;
      font-size: 18px;
      -webkit-box-pack: end;
          -ms-flex-pack: end;
              justify-content: flex-end;
      text-align: end;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      margin-bottom: 5px;
      cursor: default;
    }
    #Pres, #presClosed{
      background-color: #fbd9ee;
    }
    #Form, #Progress, #End{
      display: none;
    }
    #Form, #formClosed{
      background-color: #f9cb63;
    }
    #Progress, #progressClosed{
      background-color: #f24264;
    }
    #End, #endClosed{
      background-color: #97d460;
    }
    #bordureExt{
      background-color: #f4f6fe;
      -webkit-box-sizing: border-box;
              box-sizing: border-box;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      width: 100%;
      height: 457px;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    p{
      text-align: justify;
      background-color: #e8eaf1;
      overflow: auto;
    }
    .descText{
      margin: 0;
      padding: 20px;
    }
    .conteneur{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
    }
    h2{
      margin: 0;
      font-weight: normal;
      color: #a6c24a;
    }
    #presClosed{
      display: none;
    }
    #presClosed, #formClosed, #progressClosed, #endClosed{
      width: 25px;
      cursor: pointer;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  </head>
  <body>
    <aside>
      <menu>
        <menuitem id="Pres">Présentation Boutique</menuitem>
        <menuitem id="presClosed"></menuitem>
        <menuitem id="Form">Formulaire</menuitem>
        <menuitem id="formClosed"></menuitem>
        <menuitem id="Progress">Commandes en cours</menuitem>
        <menuitem id="progressClosed"></menuitem>
        <menuitem id="End">Commandes terminées</menuitem>
        <menuitem id="endClosed"></menuitem>
      </menu>
    </aside>
    <div id="bordureExt">
    <article id="home">
      <div class="conteneur">
      <h2>Boutique de Rêliane</h2>
      <p class="descText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    </article>
    <article id="formulaire">
      <p class="descText">1Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>
    <article id="inProgress">
      <p class="descText">2Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>
    <article id="ended">
      <p class="descText">3Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </article>
  </div>
    <script>
    $('#presClosed').click(function() {
      $('article, menuitem').hide();
      $('#home, #Pres, #formClosed, #progressClosed, #endClosed').show();
    });
      $('#formClosed').click(function() {
        $('article, menuitem').hide();
        $('#formulaire, #Form, #presClosed, #progressClosed, #endClosed').show();
      });
      $('#progressClosed').click(function() {
        $('article, menuitem').hide();
        $('#inProgress, #Progress, #presClosed, #formClosed, #endClosed').show();
      });
      $('#endClosed').click(function() {
        $('article, menuitem').hide();
        $('#ended, #End, #presClosed, #progressClosed, #formClosed').show();
      });
      </script>
  </body>

Et voici l'iframe adaptée au forum :
Code:
<iframe src="URL DE TA PAGE HTML" style="width: 100%; height: 475px; border: 0; margin: 0;"></iframe>



•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Asami
Pomme


Un peu plus...
Rôle / Ancien rôle : Administratrice depuis le 3 Août.
Décris-toi :
Famille et relations :
avatar

Messages : 2855
Date d'inscription : 25/12/2015
Âge : 20
Logiciel graphique : Photoshop CC

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Lun 10 Juil 2017, 23:12

6 pts

•••••••••••••••••••••••••••••••••••••••••••



Ancienne admin. Inactive.



Asami
Pomme


Un peu plus...
Rôle / Ancien rôle : Administratrice depuis le 3 Août.
Décris-toi :
Famille et relations :
avatar

Messages : 2855
Date d'inscription : 25/12/2015
Âge : 20
Logiciel graphique : Photoshop CC

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Ven 14 Juil 2017, 11:28

+ 6 pts bonus car tu es designer

•••••••••••••••••••••••••••••••••••••••••••



Ancienne admin. Inactive.



Petit Citron
Banane


Un peu plus...
Rôle / Ancien rôle : Actuelle modo de la CB.
Décris-toi : Scorpions 4ever.
Famille et relations : bla.
avatar

Masculin
Messages : 910
Date d'inscription : 09/06/2014
Âge : 101
Logiciel graphique : Photofiltre Studio X.

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Ven 14 Juil 2017, 14:45

Pseudo : Regarde sur la gauche de l'écran et tu saura.Hap
Type de codage [signature à onglet, PA,...] : Signa codée
Dimensions : euh, les dimensions de cg que jcoco pu.Rip
Contraintes : Bah, y'en a pas vraiment, juste le fait que je puisse changer d'onglet étou.:v
Schéma :
Spoiler:
 
Spoiler:
 
Spoiler:
 
Autre : jsuis venue ici just pr toa tavu.Hap
Ah et Salamich m'a donné les brush, au cas où : http://imgur.com/a6jZWti

Merci d'avance.c:

•••••••••••••••••••••••••••••••••••••••••••

If you are an alien und you're landing on the planet Earth and you ask "What is rock'n'roll?" - Scorpions would be the answer.


I'm the wrong side of heaven and the righteous side of hell.


Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Dim 16 Juil 2017, 11:53

C'est noté mon enfant, je m'en occupe dès que possible.

•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Rêliane
Pomme


Un peu plus...
Rôle / Ancien rôle :
Décris-toi :
Famille et relations :
avatar

Messages : 436
Date d'inscription : 13/08/2016
Âge : 24

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Lun 17 Juil 2017, 08:03

Pseudo : FRANCK
Type de codage [signature à onglet, PA,...] : SIGNATURE A ONGLET
Dimensions : COMME SUR CE SCHEMA PETIT
Contraintes : CONTRAINTE FAUT QUE CA SILLUMINE QUAND ON CLIQUE SUR LES ONGLETS LA TYPO CA FAIT LUMIERE ! QUE CA SCINTILLE ! TU COPIES TOUT LE RESTE COMME C'EST !
Schéma (La par contre c'est une dissertation ton explication bro) :
Spoiler:
 

Spoiler:
 

Spoiler:
 

Spoiler:
 

Images :

Spoiler:
 


Et si ton codeur (ça sera sûrement kao mdr) à besoin d'un truc, qu'il vienne me voir c: MESSAGE DHOMIE

Polices d'écriture (passez par google font merci) : TES KAO OU T PAS KAO ?
Autre : MERCI MON PETIT COEUR

•••••••••••••••••••••••••••••••••••••••••••




Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Jeu 20 Juil 2017, 08:36

Citron vu que tu es en vacances et que j'avais des problèmes avec les brush je te termine dès que je peux. owo. Ce soir certainement.

Quant à toi Rêliane, voici venir ta signature codée, totalement subliiiiiiiime.


•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Dernière édition par Kao le Jeu 20 Juil 2017, 15:10, édité 3 fois


Rêliane
Pomme


Un peu plus...
Rôle / Ancien rôle :
Décris-toi :
Famille et relations :
avatar

Messages : 436
Date d'inscription : 13/08/2016
Âge : 24

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Jeu 20 Juil 2017, 10:56

Je ne vois pas sur ton post , j'ai regardé sur le lien discord , et c'est parfait o/

Je peux juste t’embêter une dernière fois , au niveau du dernière onglet , pour le texte , qu'il soit plus petit ? que je puisse tout rentrer sans devoir scroll ?

comme ca : http://i.imgur.com/8CKdEt0.png

Mise a part ca , c'est parfait Smile


•••••••••••••••••••••••••••••••••••••••••••




Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Jeu 20 Juil 2017, 15:15

Bien donc voici le code à mettre dans une page html :

Code:

<!doctype html>
<html>
<head>
  <meta charset="utf-8"  />
  <title>Signature à Onglets de Petit Citron</title>
  <style>
  img{max-width: 100%;}
  body{
    font-family: 'Times New Roman';
    color: #fffbe3;
    display: flex;
    flex-direction: column;
    width: 450px;
    justify-content: center;
    align-items: center;
  }
  menu{
    width: 100%;
    justify-content: center;
    align-items: center;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    margin-bottom: 3px;
  }
  menu li{
    transition: 1s;
    letter-spacing: 5px;
    font-size: 7px;
    box-sizing: border-box;
    padding: 2px;
    margin-right: 5px;
    display: inline-block;
    width: 88px;
    text-align: center;
    text-transform: uppercase;
  }
  menu li:hover{
    transition: 1s;
    filter: brightness(5);
  }
  #ongletReliane, #ongletCadeau, #ongletSigna, #ongletTeam{
    cursor: pointer;
    color: #fffbe3;
    background-color: #060b13;
  }
  #ongletSigna{cursor: default;}
  article{
    text-transform: uppercase;
    height: 250px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #060b13;
    width: 100%;
  }
  #cadeaux, #reliane, #team{display: none;}
  #signa, #team, #cadeaux{align-items: center;}
  #team{justify-content: center;}
  #reliane{
    box-sizing: border-box;
    padding: 15px;
  }
  #signa img{max-height: 100%;}
  #cadeaux img{max-width: 99%;}
  #team, #reliane{
    background-image: url('http://i.imgur.com/yaSRk9v.png');
    background-repeat: no-repeat;
  }
  #reliane p{
    margin: 0;
    line-height: 20px;
    font-size: 9px;
    letter-spacing: 3px;
  }
  #reliane p img{
    float: left;
    margin: 0px 10px 4px 0px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
</head>
<body>
  <menu>
    <li id="ongletSigna">Signature</li>
    <li id="ongletCadeau">Cadeaux</li>
    <li id="ongletTeam">Team</li>
    <li id="ongletReliane">Rêliane</li>
  </menu>
  <article id="signa">
    <img src="http://i.imgur.com/otabdxT.png" />
  </article>
  <article id="cadeaux">
    <img src="http://zupimages.net/up/17/29/brzy.png" />
    <img src="http://i.imgur.com/m2WY73R.png" />
  </article>
  <article id="team">
    vlam
  </article>
  <article id="reliane">
    <p>
      <img src="http://i.imgur.com/sLqIO9M.png" />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </article>

  <script>
  $('#ongletSigna').click(function(){
    $('article').hide();
    $('menu li').css('cursor', 'pointer');
    $('#signa').show();
    $('#ongletSigna').css('cursor', 'default');
  })
  $('#ongletCadeau').click(function(){
    $('article').hide();
    $('menu li').css('cursor', 'pointer');
    $('#cadeaux').show();
    $('#ongletCadeau').css('cursor', 'default');
  })
  $('#ongletReliane').click(function(){
    $('article').hide();
    $('menu li').css('cursor', 'pointer');
    $('#reliane').show();
    $('#ongletReliane').css('cursor', 'default');

  })
  $('#ongletTeam').click(function(){
    $('article').hide();
    $('menu li').css('cursor', 'pointer');
    $('#team').show();
    $('#ongletTeam').css('cursor', 'default');
  })
  </script>

</body>


Quand tu veux mettre du texte quelque part et faire des retours à la ligne, utilise la balise suivante :
Code:
<br />

Et le code à mettre dans ta signature pour l'afficher et la centrer :
Code:

<div style="display: flex; justify-content: center; align-items: center;"><iframe src="https://cocktail-graph.org/html/Kao/signa%20reliane.html" style="border: 0; width: 460px; height: 300px; overflow: hidden;"></iframe></div>

•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Asami
Pomme


Un peu plus...
Rôle / Ancien rôle : Administratrice depuis le 3 Août.
Décris-toi :
Famille et relations :
avatar

Messages : 2855
Date d'inscription : 25/12/2015
Âge : 20
Logiciel graphique : Photoshop CC

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Jeu 20 Juil 2017, 22:22

+ 9 pts

•••••••••••••••••••••••••••••••••••••••••••



Ancienne admin. Inactive.



Kao
Orange Shakeuse


Un peu plus...
Rôle / Ancien rôle : Codeur, Ancien modérateur et ancien administrateur en essai
Décris-toi :
Famille et relations :
avatar

Masculin
Messages : 2661
Date d'inscription : 23/03/2014
Âge : 18
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

Contact et infos
http://libertystories.forumactif.org/


Message Sujet: Re: Ad Astra Per Aspera    Ven 21 Juil 2017, 00:02

Et à ton tour mon petit citron, dis moi si ça te convient :


Mais vu la réaction de Asami on va supposer que oui donc voici le code à mettre sur une page html sur un forum test :
Code:

<!doctype html>
<html>
  <head>
    <meta charset="utf-8"  />
    <title>Signature à Onglets de Petit Citron</title>
    <link rel="stylesheet" href="https://cocktail-graph.org/html/Kao/levibrush.css" />
    <style>
      body{
        display: flex;
        flex-direction: column;
        width: 570px;
        justify-content: center;
        align-items: center;
      }
      img{max-width: 99%;}
      menu{
        width: 100%;
        justify-content: center;
        align-items: center;
        list-style-type: none;
        margin: 0;
        padding: 0;
        display: flex;
      }
      menu li{
        display: inline-flex;
        flex: 1;
        height: 110px;
        justify-content: center;
        align-items: flex-end;
        text-align: center;
        color: #fffbe3;
      }
      .posText{
        height: 40px;
        display: flex;
        align-items: center;
        font-family: 'Times New Roman';
        text-transform: uppercase;
        font-size: 15px;
      }

      #ongletSigna{background-image: url('http://i.imgur.com/3LRDOYR.png'); cursor: default;}
      #ongletCadeau{background-image: url('http://i.imgur.com/55Rkoje.png'); cursor: pointer;}
      #ongletCitron{background-image: url('http://i.imgur.com/MEHFo77.png'); cursor: pointer;}
      #ongletCitron, #ongletCadeau, #ongletSigna{
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      article{
        display: flex;
        height: 350px;
        box-sizing: border-box;
        padding: 10px;
        flex-direction: column;
        align-items: center;
        background-color: #3b3b3b;
        width: 100%;
      }
      article h2{
        font-family: 'Levibrush';
        text-transform: uppercase;
        margin: 0;
        margin-bottom: 5px;
        padding: 0;
        color: #f0f0f0;
      }
      #cadeaux, #citron{display: none;}
      #textPres{
        display: flex;
        background-color: #6c6c6c;
        height: 80%;
        text-transform: uppercase;
        font-size: 12px;
        color: #eeeeee;
      }
      #textPres img{max-height: 100%; margin-right: 10px;}
      #textPres p{overflow: auto;}
    </style>
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  </head>
  <body>
    <menu>
      <li id="ongletSigna"><span class="posText">Signa</span></li>
      <li id="ongletCadeau"><span class="posText">Cadeaux</span></li>
      <li id="ongletCitron"><span class="posText">Citron</span></li>
    </menu>
    <article id="signa">
      <h2>Signature</h2>
      <img src="http://img15.hostingpics.net/pics/2675681450866608375.png" />
    </article>
    <article id="cadeaux">
      <h2>Cadeaux</h2>
    </article>
    <article id="citron">
      <h2>Citron</h2>
      <div id="textPres">
        <img src="https://imgfast.net/users/1812/13/57/97/avatars/2664-64.png" />
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </p>
      </div>
    </article>

    <script>
    $('#ongletSigna').click(function(){
      $('article').hide();
      $('menu li').css('cursor', 'pointer');
      $('#signa').show();
      $('#ongletSigna').css('cursor', 'default');
    })
    $('#ongletCadeau').click(function(){
      $('article').hide();
      $('menu li').css('cursor', 'pointer');
      $('#cadeaux').show();
      $('#ongletCadeau').css('cursor', 'default');
    })
    $('#ongletCitron').click(function(){
      $('article').hide();
      $('menu li').css('cursor', 'pointer');
      $('#citron').show();
      $('#ongletCitron').css('cursor', 'default');
    })
    </script>

  </body>

Et le code à mettre dans ta signature sur CG :
Code:

<div style="display: flex; justify-content: center; align-items: center;"><iframe src="URL DE TA PAGE HTML"style="border: 0; width: 580px; height: 500px;"></iframe></div>

•••••••••••••••••••••••••••••••••••••••••••


Membre du MoisCadeau Yuyu


Asami
Pomme


Un peu plus...
Rôle / Ancien rôle : Administratrice depuis le 3 Août.
Décris-toi :
Famille et relations :
avatar

Messages : 2855
Date d'inscription : 25/12/2015
Âge : 20
Logiciel graphique : Photoshop CC

Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    Ven 21 Juil 2017, 00:11

+ 9 pts petit chieur

•••••••••••••••••••••••••••••••••••••••••••



Ancienne admin. Inactive.



Contenu sponsorisé




Contact et infos


Message Sujet: Re: Ad Astra Per Aspera    

 

Ad Astra Per Aspera

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 2Aller à la page : 1, 2  Suivant

 Sujets similaires

-
» Opel Astra : nouvelle version ecoFLEX 130 ch & 99 g/km CO2
» L’Opel Astra s’équipe d’un Diesel ultra discret et du système IntelliLink
» dreambox et cardsharing et astra/hotbird à la fois
» Améliorer la diffusion H264 avant de passer à la suite ...
» dreambox et cardsharing et deux satellites à la fois

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cocktail Graph' :: Commandes :: Boutiques des membres :: Codage-