Ichigooo !


Partagez
 


 « Layout pour galerie - facile à modifier »

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


Eiko
Cerise

Eiko

Féminin
Messages : 509
Date d'inscription : 12/11/2014
Âge : 29

Contact et infos
Layout pour galerie - facile à modifier Empty


Message Sujet: Layout pour galerie - facile à modifier   Layout pour galerie - facile à modifier Icon_minitimeJeu 19 Mar 2015, 08:13

Coucou Smile

Voilà un petit layout en libre service pour vos galeries. Les couleurs sont facilement modifiables, les images aussi.
Par contre, c'est à placer en iframe donc vous devez d'abord copier le code sur votre forum.

Code:
<!doctype html>
<html lang="fr">
  
<head>
<meta charset="utf-8" />
<title></title>
  
  <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css' />
  
<script src="script.js"></script>
  
  
<style type="text/css">

  p {
  font-size:13px;
  text-align:justify;
  }
  
  .container{
  width:600px;
  margin:auto;
  overflow:hidden;
  border-top:7px solid #f28a18;
  border-left:2px solid #f28a18;
  border-bottom:7px solid #f28a18;
  border-right:2px solid #f28a18;
  border-radius:50px 50px 50px 50px;
  background-color:#fefd7c;
  }
  
  .en_tete {
  position:relative;
  height:250px;
  padding:3px 0px;
  margin-top:38px;
  margin-bottom:20px;
  border-top:5px solid #50A6FB;
  border-bottom:5px solid #f28a18;
  }
  
  h1 {
  position:absolute;
  right:0px;
  top:160px;
  width:580px;
  background-color: rgba(255,255,255,0.7);
  padding:2px 10px 4px;
  color:#1184FE;
  font-family: 'Lobster', cursive;
  text-align:center;
  }
  
    .description {
  padding:10px;
  margin:5px 5px;
  border:1px solid #50311F;
  background-color:#81512B;
  border-radius:10px;
  }
  
  .kits, .signatures, .autres {
  border:1px solid #1184FE;
  padding:10px;
  margin:5px 5px;
  background-color:#50A6FB;
  text-align:right;
  color:#FFF;
  border-radius:10px;
  }
  
  h2 {
  margin:0px;
  color:#FFF;
  text-transform:uppercase;
  background-color:rgba(255,255,255,0.2);
  padding:0px 10px;
  border-radius:10px;
  font-family: 'Lobster', cursive;
  font-weight:normal;
  }
  
  .description h2 {
  color:#50311F;
  }
  
  p img {
  height:150px;
  }
  
  p img:active {
  height:auto;
  width:auto;
  }
  
  .footer {
  margin-bottom:38px;
  }
  
  .footer p, .footer a{
  color:#f28a18;
  font-size:10px;
  text-align:center;
  }
  
  .footer a{
  color:#50A6FB;
  text-decoration:none;
  }
  
</style>
  
</head>
  
  
<body>

  <div class="container">
  <div class="en_tete"><img src="http://i57.tinypic.com/339h7v5.jpg" alt="" />
  <h1>Galerie de Eiko</h1></div>
  
    <div class="description"><h2>Description</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis convallis purus, sit amet scelerisque erat. Sed in eros tortor. Sed dolor urna, finibus at ligula in, luctus placerat enim. Aenean tellus lacus, volutpat ornare tincidunt id, eleifend ac orci. Cras sed dolor eu velit laoreet sodales. Integer at nulla nunc. Vivamus finibus sem non lectus volutpat pellentesque. Nam magna dolor, faucibus ac purus ac, vehicula posuere metus. Duis nec ex ut odio dignissim viverra. Maecenas magna lectus, interdum sollicitudin consequat consectetur, congue a massa. Proin vitae neque velit. Morbi quis tortor ex. Integer sollicitudin eros et felis sollicitudin rutrum. Sed aliquam tempor malesuada. Nulla magna ex, consequat tristique leo et, cursus ultrices nulla.</p>
    </div>
    
  <div class="kits"><h2>Kits</h2>
    <p>Cliquer sur les images pour les voir en taille réelle.</p>
    <p><img src="http://img15.hostingpics.net/pics/758750avatareiko.png" alt="" /> <img src="http://img15.hostingpics.net/pics/299970kiteiko.png" alt="" /></p>
    <p><img src="http://img15.hostingpics.net/pics/442438eikoava.png" alt="" /> <img src="http://img15.hostingpics.net/pics/403364eikobanv1.png" alt="" /></p>
[img]http://image.noelshack.com/fichiers/2015/13/1427388450-ffd.png[/img]
  </div>
    
  <div class="signatures"><h2>Signatures</h2>
    <p>Cliquer sur les images pour les voir en taille réelle.</p>
    <p><img src="http://i57.tinypic.com/339h7v5.jpg" alt="" /></p>
    <p><img src="http://image.noelshack.com/fichiers/2015/11/1426179049-eikosignature1.png" alt="" /></p>
  </div>
    
  <div class="autres"><h2>Autres</h2>
    <p>Cliquer sur les images pour les voir en taille réelle.</p>
    <p><img src="http://i57.tinypic.com/339h7v5.jpg" alt="" /></p>
  </div>
    
    <div class="footer"><p>Codé et désigné par Eiko sur <a href="http://www.cocktail-graph.com" alt="" target="_blank">Cocktail Graph</a>.</p></div>
  </div>
  
</body>
  
  
</html>


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



Tity
Orange


Un peu plus...
Rôle / Ancien rôle : Ancienne admin et modette
Décris-toi :
Famille et relations :
Tity

Féminin
Messages : 1829
Date d'inscription : 19/04/2013
Âge : 27
Logiciel graphique : Photoshop CC

Contact et infos
http://shojoparadise.forumactif.org
Layout pour galerie - facile à modifier Empty


Message Sujet: Re: Layout pour galerie - facile à modifier   Layout pour galerie - facile à modifier Icon_minitimeJeu 19 Mar 2015, 12:53

Merci pour le LS
Tu gagnes 5 points pour ta team

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

Layout pour galerie - facile à modifier 1450823386-versionpetite

Merci Oka pour ce magnifique kit
 

Layout pour galerie - facile à modifier

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

 Sujets similaires

-
» script pour galerie photo
» Nuvi 250 : clavier Azerty possible ?
» Comment faire pour modifier l'envoie dans la section corbeille
» Besoin d'aide pour modifier l'affichage de messages :)
» Servimg : Modifier la taille de redimensionnement par default "pour forum"

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