Ichigooo !


Partagez | 
 


 « Code pour ma galerie »

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage


Øfty
Pomme

avatar

Messages : 19
Date d'inscription : 01/01/2017
Âge : 17

Contact et infos


Message Sujet: Code pour ma galerie   Lun 17 Juil 2017, 20:15

Bonjour, je viens vous demandez un petit code pour ma galerie. J'ai un petit schéma tout fait.  J’espère poster dans la bonne rubrique merci d'avance :3

Ce formulaire est obligatoire pour passer une commande sur le forum !
→ FORMULAIRE COMMANDE
Type de commande : Code pour ma galerie ...
Lien du forum : ici et sur LG  http://libre-graph.forumperso.com/
Avez vous accès au Panneau d'Administration du forum ? : Non

Schéma :: Page d'accueilPage des avatars Page signature Page Bannière   Page autre
Dimensions :: 550*800

Police (à chercher sur google font !) :: Georgia
Texte  ?: //
Couleurs :: #631e41 | #c7c1b7 |  #bd8530

Contenu (liens, image ..) ?: Je le ferais moi même ^^
Effets particuliers ?: Pas Particulièremet
Autre ?: Merci beaucoup  

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



Anyu
Pomme


Un peu plus...
Rôle / Ancien rôle : Anciennement Animatrice et Ancienne Noteuse
Décris-toi : Moi, c'est Nyu avec un A devant. c: Une fan de graphisme et d'animes. Et une petite étoile prénommée Naos, qui s'est simplement perdue dans la merveilleuse galaxie qu'est celle de CG. *-* ♥
Famille et relations : La team Etoile, of course. *u* /ETOILEPOWAA/
avatar

Féminin
Messages : 6295
Date d'inscription : 05/03/2014
Âge : 19
Logiciel graphique : Photoshop & Illustrator CC 2017

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 11:05

J'aimerais bien essayer si tu veux bien ! Sisi

J'ai juste quelques questions:
- En-dessous des onglets où tu as marqué .liens plusieurs fois, ça doit être un endroit pour mettre du texte ou... ?
- Pour l'onglet Bannière notamment, les images doivent être redimensionnées automatiquement pour rentrer dans le cadre, ou un système d'ascenseurs, ça te va ?

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

Je suis Naos, l'étoile la plus brillante de la constellation de Puppis. ♥



Øfty
Pomme

avatar

Messages : 19
Date d'inscription : 01/01/2017
Âge : 17

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 12:09

Bonjour, c'est avec plaisir !

- C'est un endroit pour mettre du texte oui, j'y mettrai des liens.
- J'aimerais bien que cela se redimensionne automatiquement, mais ce n'est obligatoire je peux redimensionner les créations moi même.

Merci beaucoup :3

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

En ligne


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 : 2633
Date d'inscription : 23/03/2014
Âge : 17
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

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


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 13:11

Si tu t'en sors pas Anyu, je prends le relai.

Et je déplace le sujet dans la bonne catégorie de commandes.

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


Membre du MoisCadeau Yuyu


Anyu
Pomme


Un peu plus...
Rôle / Ancien rôle : Anciennement Animatrice et Ancienne Noteuse
Décris-toi : Moi, c'est Nyu avec un A devant. c: Une fan de graphisme et d'animes. Et une petite étoile prénommée Naos, qui s'est simplement perdue dans la merveilleuse galaxie qu'est celle de CG. *-* ♥
Famille et relations : La team Etoile, of course. *u* /ETOILEPOWAA/
avatar

Féminin
Messages : 6295
Date d'inscription : 05/03/2014
Âge : 19
Logiciel graphique : Photoshop & Illustrator CC 2017

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 19:25

D'accord, merci !
Je te tiens au courant ! Wink

EDIT : Voilà ! Dis-moi ce que tu en penses, s'il faut changer certaines choses ou quoi ! o/
Tu ne l'avais pas demandé, mais en cliquant sur l'avatar, cela ramène sur le page d'accueil (je me disais que ça pouvait être pratique), néanmoins je peux l'enlever si tu ne le veux pas ! Sisi


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

Je suis Naos, l'étoile la plus brillante de la constellation de Puppis. ♥



Øfty
Pomme

avatar

Messages : 19
Date d'inscription : 01/01/2017
Âge : 17

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 19:44

Quelle rapidité, c'est parfait ! Merci beaucoup.

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



Anyu
Pomme


Un peu plus...
Rôle / Ancien rôle : Anciennement Animatrice et Ancienne Noteuse
Décris-toi : Moi, c'est Nyu avec un A devant. c: Une fan de graphisme et d'animes. Et une petite étoile prénommée Naos, qui s'est simplement perdue dans la merveilleuse galaxie qu'est celle de CG. *-* ♥
Famille et relations : La team Etoile, of course. *u* /ETOILEPOWAA/
avatar

Féminin
Messages : 6295
Date d'inscription : 05/03/2014
Âge : 19
Logiciel graphique : Photoshop & Illustrator CC 2017

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 20:35

Super ! Coeur

Voici donc le code html (à mettre sur ton forum test)
Code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Galerie Ofty</title>
</head>

<style>
   *{box-sizing:border-box;}
   body {font-family: Georgia, serif; font-size:14px; color:#fff;}
   #wrap {width:550px;height:790px;background-color:#c7c1b7; border-bottom:10px solid #631e41}
   .fond-pourpre{background-color:#631e41; height:88px;}
   a {text-decoration: none; color:#fff;}
   .contenu {display:none;}
   .contenu.actif {display:block;}
   
   /* HEADER */
   header {display:flex; justify-content:center; padding:16px 0px 30px 13px;}
   .avatar {background-image:url(https://imgfast.net/users/1812/13/57/97/avatars/4928-96.jpg); background-position:center; width:137px; height:137px; min-width:137px; border:1px solid #631e41; cursor:pointer;}
   
   .onglets-flex {padding:0 10px;}
   #onglets {display:flex; flex-wrap:wrap; justify-content: center;}
   #onglets > a {background-color:#bd8530; width:120px; padding:9px 0; margin:0 4px; text-align:center; border:1px solid #631e41;}
   #onglets > a:first-child {margin-left:0;}
   #onglets > a:last-child {margin-top:10px;}
   
   .liens {border-top:5px solid #631e41; padding: 17px 10px 0 10px; margin-top:15px;}
   .liens > a {display:inline-block; margin-right:15px;}
   
   /* SECTION */
   /* CONTENU ACCUEIL */
   .introduction {background-color:#bd8530; width:495px; height:259px; margin:13px auto 0 auto; padding:2px 15px 10px; border:1px solid #631e41; overflow-y: auto;}
   .introduction > p {padding-bottom:5px;}
   .introduction > p:last-child {padding-bottom:0;}
   .signature {text-align:center; margin-top:51px;}
   
   /* CONTENU */
   .contenu-avatar, .contenu-signature, .contenu-banniere, .contenu-autre {width:510px; height:590px; background-color:#631e41; margin: 0 auto; overflow-y:auto; padding:3px 0; text-align:center;}
   .contenu-avatar img, .contenu-signature img, .contenu-banniere img, .contenu-autre img {text-align:center;margin: 3px;}
   .contenu-signature img, .contenu-banniere img, .contenu-autre img {max-width:98%;}
</style>

<body>
<div id="wrap">
<div class="fond-pourpre">
<header>
   <div class="avatar onglet" id="accueil"></div>
   <div class="onglets-flex">
      <nav id="onglets">
         <a href="#" class="onglet" id="avatar">Avatar</a>
         <a href="#" class="onglet" id="signature">Signature</a>
         <a href="#" class="onglet" id="banniere">Bannière</a>
         <a href="#" class="onglet" id="autre">Autre</a>
      </nav>
      <nav class="liens">
         <a href="#" target="_blank">Lien 1</a>
         <a href="#" target="_blank">Lien 2</a>
         <a href="#" target="_blank">Lien 3</a>
      </nav>
   </div>
</header>

<section>
   <div class="contenu actif contenu-accueil">
      <div class="introduction">
         <p>Sed sit amet diam non dolor sodales volutpat. Ut accumsan lorem bibendum leo hendrerit, ut consequat risus elementum. Nullam consequat, lorem in gravida malesuada, eu finibus leo turpis non nunc am. Fusce magna libero, vulputate eu rhoncus ut, finibus a nibh.</p>

         <p>Mauris mollis orci nulla, sed feugiat nisl pharetra sed. Nulla blandit sem nunc, nec laoreet nibh convallis in. Mauris eget efficitur eros, a vehicula lectus. Etiam vitae leo tristique, pellentesque quam vitae, consequat massa.</p>

         <p>Vestibulum ex magna, convallis vitae lobortis finibus, congue eget nunc. Nulla ornare vehicula enim, a euismod ipsum hendrerit eu. Nam cursus nisl massa.</p>
      </div>

      <div class="signature"><img src="http://www.zupimages.net/up/17/24/ibnh.png"></div>
   </div>
   
   <!--------- CONTENU AVATAR --------->
   <!-- L'ajout du alt est seulement là pour t'aider à t'y retrouver parmi les créations que tu as posté, si tu n'en as pas besoin il peut très bien être enlevé -->
   <div class="contenu contenu-avatar">
      <img src="https://imgfast.net/users/1812/13/57/97/avatars/4928-96.jpg" alt="nom de l'avatar">
      <img src="https://imgfast.net/users/1812/13/57/97/avatars/4928-96.jpg" alt="nom de l'avatar">
      <img src="https://imgfast.net/users/1812/13/57/97/avatars/4928-96.jpg" alt="nom de l'avatar">
   </div>
   
   <!--------- CONTENU SIGNATURE --------->
   <div class="contenu contenu-signature">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la signature">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la signature">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la signature">
   </div>
   
   <!--------- CONTENU BANNIERE --------->
   <div class="contenu contenu-banniere">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la banniere">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la banniere">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la banniere">
   </div>
   
   <!--------- CONTENU AUTRE --------->
   <div class="contenu contenu-autre">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la création">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la création">
      <img src="http://www.zupimages.net/up/17/24/ibnh.png" alt="nom de la création">
   </div>
   
</section>
</div>
</div>

<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-1.4.1.js"></script>
<script>
$('.onglet').click(function(){
  $('.onglet').removeClass('actif');
  $(this).addClass('actif');
  $('.contenu').removeClass('actif');
});
   
$('#accueil').click(function(){
  $('.contenu-accueil').addClass('actif');
});
   
$('#avatar').click(function(){
  $('.contenu-avatar').addClass('actif');
});

$('#signature').click(function(){
  $('.contenu-signature').addClass('actif');
});
   
$('#banniere').click(function(){
  $('.contenu-banniere').addClass('actif');
});

$('#autre').click(function(){
  $('.contenu-autre').addClass('actif');
});
</script>

</body>
</html>

Et l'iframe
Code:
<iframe src="URL DE TA PAGE HTML"  frameborder="0" scrolling="no" style="width:560px; height: 800px; border:none;"></iframe>

Si tu as des questions, n'hésite pas à me MP! Smile

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

Je suis Naos, l'étoile la plus brillante de la constellation de Puppis. ♥



Dernière édition par Anyu le Mar 18 Juil 2017, 21:44, édité 1 fois


Envy
Pomme Mixeuse


Un peu plus...
Rôle / Ancien rôle : Ancienne codeuse & DDP
Décris-toi : Entre désire et jalousie ~
Famille et relations :
avatar

Féminin
Messages : 3086
Date d'inscription : 03/09/2015
Âge : 14

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 21:08

Tu peux prendre 6 points Anyu Coeur

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

En ligne


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 : 2633
Date d'inscription : 23/03/2014
Âge : 17
Logiciel graphique : Photofiltre 7, Photofiltre Studio X, Photoshop Cs5, Photoshop CC

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


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 21:29

Chouette code Anyu, tu devrais peut-être aussi mettre un cursor: pointer pour l'avatar s'il permet de changer d'onglet, nan ?

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


Membre du MoisCadeau Yuyu


Anyu
Pomme


Un peu plus...
Rôle / Ancien rôle : Anciennement Animatrice et Ancienne Noteuse
Décris-toi : Moi, c'est Nyu avec un A devant. c: Une fan de graphisme et d'animes. Et une petite étoile prénommée Naos, qui s'est simplement perdue dans la merveilleuse galaxie qu'est celle de CG. *-* ♥
Famille et relations : La team Etoile, of course. *u* /ETOILEPOWAA/
avatar

Féminin
Messages : 6295
Date d'inscription : 05/03/2014
Âge : 19
Logiciel graphique : Photoshop & Illustrator CC 2017

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 21:45

Merci Envy ! Coeur

Yeah, bonne idée Kao, je n'y avais pas pensé. Sisi
(J'ai édité mon précédent message Ofty)

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

Je suis Naos, l'étoile la plus brillante de la constellation de Puppis. ♥



Øfty
Pomme

avatar

Messages : 19
Date d'inscription : 01/01/2017
Âge : 17

Contact et infos


Message Sujet: Re: Code pour ma galerie   Mar 18 Juil 2017, 22:44

Cela m'ira très bien merci encore c'est super !

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



Contenu sponsorisé




Contact et infos


Message Sujet: Re: Code pour ma galerie   

 

Code pour ma galerie

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

 Sujets similaires

-
» code pour PA a onglets
» Code pour Infobulle..
» Demande de code pour catégorie
» [Aide]Code pour mettre un "fond" transparent (enlève).
» Le code pour centrer une image dans un template

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Cocktail Graph' :: Commandes :: Codage :: Fiches & Signatures-