AccueilCalendrierFAQMembresGroupesS'enregistrerConnexion

Partagez | .
 

 Codes en tous genre -

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

Messages : 242
Date d'inscription : 11/05/2010
Localisation : Sur Jupiter

MessageSujet: Codes en tous genre -    Sam 27 Avr - 6:00

Code pour illuminer le texte au passage de la souris, sur la barre de navigation (graphistouillée) :
Code:
/* Début de la barre de navigation personnalisée */

#i_icon_mini_index
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_index:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_faq
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_faq:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_search
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_search:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_members
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_members:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_groups
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_groups:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_profile
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_profile:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_message
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_message:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_new_message
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}

#i_icon_mini_logout
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_logout:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}

#i_icon_mini_register
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_register:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}
#i_icon_mini_login
{
width: 100px;
height: 130px;
background: url(LIEN DE VOTRE IMAGE);
}
#i_icon_mini_login:hover
{
background: url(LIEN DE VOTRE IMAGE AU PASSAGE DE LA SOURIS);
}


/* Fin de la barre de navigation personnalisée */


La vie est une aventure, il ne faut pas avoir peur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://royaume-musical.forumactif.org
Cyllan
Administratrice
avatar

Messages : 242
Date d'inscription : 11/05/2010
Localisation : Sur Jupiter

MessageSujet: Re: Codes en tous genre -    Sam 27 Avr - 6:06

Infobulles;
HTML
Code:
<a href="#" class="infobulle"><img src="LIEN DE L'IMAGE">
  <span><center>  Contenu de L'Infobulle  </center>
  </span></a>

CSS
Code:
/* _________________infobulle par Rits-u __________*/

/* PERSONNALISATION DE L'INFOBULLE */
a.infobulle:hover span {
  display: inline;
 white-space: nowrap;
  position: absolute;
  top: 10px; /* position de l'infobulle verticalement */
  left: 30px; /* position de l'infobulle horizontalement */
  width: 130px; /* largeur de l'infobulle */
  height: 50px; /* hauteur de l'infobulle */
  color:#000000; /* couleur du texte */
  border: 1px solid #000000; /* taille, style et couleur de la bordure */
  background:  #F4F4F3; /* couleur d'arrière-plan de l'infobulle */
  padding: 3px; /* espacement entre les bords et le texte */
}

/* NE PAS TOUCHER */
a.infobulle {  position: relative;}
a.infobulle span {  display: none; }
a.infobulle:hover {  background: none;  z-index: 999;}




La vie est une aventure, il ne faut pas avoir peur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://royaume-musical.forumactif.org
Cyllan
Administratrice
avatar

Messages : 242
Date d'inscription : 11/05/2010
Localisation : Sur Jupiter

MessageSujet: Re: Codes en tous genre -    Sam 27 Avr - 6:09

Effet halo lumineux *__* sur cadre :

CSS
Code:

.profil-block{width:480px;height:380px;margin:50px auto;background-image:url("http://img92.xooimage.com/files/7/5/4/fond-3d51a98.jpg");border-radius:15px;-webkit-transition:all .8s linear;-moz-transition:all .8s linear;-o-transition:all .8s linear;transition:all .8s linear;}
.profil-fond{background:rgba(153,153,153,1);border-radius:15px;-webkit-transition:all .5s linear;-moz-transition:all .5s linear;-o-transition:all .5s linear;transition:all .5s linear;}
.profil-inner{width:440px;height:265px;border-radius:10px;background:url("http://img93.xooimage.com/files/3/9/f/block-3d693dc.png");padding:95px 20px 25px}
.profil-inner>div{text-align:justify;overflow:auto;max-height:245px;padding:10px}
.profil-block:hover .profil-fond{background:rgba(153,153,153,0);}
.profil-block:hover{background-position:right bottom;border-radius:12px;-webkit-transition:all 8s linear;-moz-transition:all 8s linear;-o-transition:all 8s linear;transition:all 8s linear;}

HTML
Code:
<div class="profil-block"><div class="profil-fond"><div class="profil-inner"><div>
Votre texte !
</div></div></div></div>



La vie est une aventure, il ne faut pas avoir peur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://royaume-musical.forumactif.org
Cyllan
Administratrice
avatar

Messages : 242
Date d'inscription : 11/05/2010
Localisation : Sur Jupiter

MessageSujet: Re: Codes en tous genre -    Sam 27 Avr - 6:11

Fiche simple - Sympa pour un texte "officiel"

Code:
<blockquote><div style="text-align: justify;"><center><span style="font-family: Patrick Hand SC; font-size:45px; color: #ABA698; text-shadow: #ABA698 0px 0px 1px;">Titre Principal</span></center><div style="border: 8px solid #ABA698; background: #BDB9AE; border-left:4px solid #ABA698; border-right:4px solid #ABA698; border-top-right-radius:50px; border-bottom-left-radius:50px"><blockquote><center><span style="font-family: Patrick Hand SC; font-size: 25px; color: #9C9585; text-shadow: #9C9585 0px 0px 1px;">Titre secondaire I</span></center><div style="font-size:29px; letter-spacing:4px; font-family:Gerogia; text-shadow:#ABA698 0px 0px 0px; text-align:center; border-bottom:2px solid #ABA698;"><br /></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing mattis gravida. Cras est urna, mollis non aliquam a, auctor a est. In sed nulla sed ligula sollicitudin rutrum in quis turpis. Phasellus facilisis malesuada nunc, id rhoncus nunc fringilla vel. Vestibulum sed enim vitae sem tincidunt tristique. Quisque neque enim, ornare sed tristique eget, semper sed nibh. Praesent sit amet aliquam turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec neque felis, gravida a dictum pellentesque, semper at lectus. Mauris faucibus cursus diam sit amet rhoncus. Nunc massa libero, dapibus non congue sit amet, hendrerit sed velit. Aliquam hendrerit, turpis nec consequat cursus, est nisi faucibus mi, sed tincidunt est risus convallis purus. Suspendisse in tempus libero. Cras mollis risus ut mauris elementum imperdiet. Phasellus aliquam ultrices dictum. Quisque in suscipit nibh. Nullam mollis, urna tempor tempor luctus, erat nunc fringilla erat, ut mollis turpis tellus vel ante. Etiam aliquet gravida urna. Aliquam fermentum pretium odio, a dictum massa tincidunt pellentesque. Aliquam sit amet mi eget est condimentum rutrum. Etiam sed lectus id tellus blandit ultricies porttitor a orci. Aenean pretium lectus ac erat auctor ac volutpat leo interdum. Pellentesque nec nulla ac lorem ultrices ullamcorper. Quisque in nisl sed ligula tincidunt tristique ac eget nulla. Suspendisse dolor turpis, varius eget lobortis sed, tincidunt eget lacus. Nulla ullamcorper libero vel odio lobortis nec aliquam ante adipiscing. Proin purus felis, hendrerit ac laoreet et, tincidunt sit amet augue. Vivamus commodo lobortis rutrum. Vestibulum sodales vehicula nunc, a convallis dolor tincidunt et. Aliquam lorem lacus, luctus id ornare in, pellentesque eu augue. Vivamus ut mauris massa, ac vestibulum nibh. Curabitur lobortis sagittis orci nec venenatis. Aliquam in enim ipsum, eget ornare nulla. Suspendisse sed tellus imperdiet mi pretium rutrum. <div style="font-size:29px; letter-spacing:4px; font-family:Gerogia; text-shadow:#ABA698 0px 0px 0px; text-align:center; border-bottom:2px solid #ABA698;"><br /></div>
<center><span style="font-family: Patrick Hand SC; font-size: 25px; color: #9C9585; text-shadow: #9C9585 0px 0px 1px;">Titre secondaire II</span></center><div style="font-size:29px; letter-spacing:4px; font-family:Gerogia; text-shadow:#ABA698 0px 0px 0px; text-align:center; border-bottom:2px solid #ABA698;"><br /></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing mattis gravida. Cras est urna, mollis non aliquam a, auctor a est. In sed nulla sed ligula sollicitudin rutrum in quis turpis. Phasellus facilisis malesuada nunc, id rhoncus nunc fringilla vel. Vestibulum sed enim vitae sem tincidunt tristique. Quisque neque enim, ornare sed tristique eget, semper sed nibh. Praesent sit amet aliquam turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec neque felis, gravida a dictum pellentesque, semper at lectus. Mauris faucibus cursus diam sit amet rhoncus. Nunc massa libero, dapibus non congue sit amet, hendrerit sed velit. Aliquam hendrerit, turpis nec consequat cursus, est nisi faucibus mi, sed tincidunt est risus convallis purus. Suspendisse in tempus libero. Cras mollis risus ut mauris elementum imperdiet. Phasellus aliquam ultrices dictum. Quisque in suscipit nibh. Nullam mollis, urna tempor tempor luctus, erat nunc fringilla erat, ut mollis turpis tellus vel ante. Etiam aliquet gravida urna. Aliquam fermentum pretium odio, a dictum massa tincidunt pellentesque. Aliquam sit amet mi eget est condimentum rutrum. Etiam sed lectus id tellus blandit ultricies porttitor a orci. Aenean pretium lectus ac erat auctor ac volutpat leo interdum. Pellentesque nec nulla ac lorem ultrices ullamcorper. Quisque in nisl sed ligula tincidunt tristique ac eget nulla. Suspendisse dolor turpis, varius eget lobortis sed, tincidunt eget lacus. Nulla ullamcorper libero vel odio lobortis nec aliquam ante adipiscing. Proin purus felis, hendrerit ac laoreet et, tincidunt sit amet augue. Vivamus commodo lobortis rutrum. Vestibulum sodales vehicula nunc, a convallis dolor tincidunt et. Aliquam lorem lacus, luctus id ornare in, pellentesque eu augue. Vivamus ut mauris massa, ac vestibulum nibh. Curabitur lobortis sagittis orci nec venenatis. Aliquam in enim ipsum, eget ornare nulla. Suspendisse sed tellus imperdiet mi pretium rutrum. <div style="font-size:29px; letter-spacing:4px; font-family:Gerogia; text-shadow: #ABA698 0px 0px 0px; text-align:center; border-bottom: 2px solid #ABA698;"><br /></div>
<center><span style="font-family: Patrick Hand SC; font-size: 25px; color: #9C9585; text-shadow: #9C9585 0px 0px 1px;">Titre secondaire III</span></center><div style="font-size:29px; letter-spacing:4px; font-family:Gerogia; text-shadow:#ABA698 0px 0px 0px; text-align:center; border-bottom:2px solid #ABA698;"><br /></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus adipiscing mattis gravida. Cras est urna, mollis non aliquam a, auctor a est. In sed nulla sed ligula sollicitudin rutrum in quis turpis. Phasellus facilisis malesuada nunc, id rhoncus nunc fringilla vel. Vestibulum sed enim vitae sem tincidunt tristique. Quisque neque enim, ornare sed tristique eget, semper sed nibh. Praesent sit amet aliquam turpis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec neque felis, gravida a dictum pellentesque, semper at lectus. Mauris faucibus cursus diam sit amet rhoncus. Nunc massa libero, dapibus non congue sit amet, hendrerit sed velit. Aliquam hendrerit, turpis nec consequat cursus, est nisi faucibus mi, sed tincidunt est risus convallis purus. Suspendisse in tempus libero. Cras mollis risus ut mauris elementum imperdiet. Phasellus aliquam ultrices dictum. Quisque in suscipit nibh. Nullam mollis, urna tempor tempor luctus, erat nunc fringilla erat, ut mollis turpis tellus vel ante. Etiam aliquet gravida urna. Aliquam fermentum pretium odio, a dictum massa tincidunt pellentesque. Aliquam sit amet mi eget est condimentum rutrum. Etiam sed lectus id tellus blandit ultricies porttitor a orci. Aenean pretium lectus ac erat auctor ac volutpat leo interdum. Pellentesque nec nulla ac lorem ultrices ullamcorper. Quisque in nisl sed ligula tincidunt tristique ac eget nulla. Suspendisse dolor turpis, varius eget lobortis sed, tincidunt eget lacus. Nulla ullamcorper libero vel odio lobortis nec aliquam ante adipiscing. Proin purus felis, hendrerit ac laoreet et, tincidunt sit amet augue. Vivamus commodo lobortis rutrum. Vestibulum sodales vehicula nunc, a convallis dolor tincidunt et. Aliquam lorem lacus, luctus id ornare in, pellentesque eu augue. Vivamus ut mauris massa, ac vestibulum nibh. Curabitur lobortis sagittis orci nec venenatis. Aliquam in enim ipsum, eget ornare nulla. Suspendisse sed tellus imperdiet mi pretium rutrum.
<div style="font-size: 10px; letter-spacing:4px; font-family:Gerogia; text-shadow:#ABA698 0px 0px 0px; text-align:center; border-bottom: 2px solid #ABA698;"><br /></div>
<center><span style="font-family: Patrick Hand SC; font-size: 12px; color: #9C9585; text-shadow: #9C9585 0px 0px 1px;">© Codage par Hishaköteki pour <a href="http://epicode.bbactif.com" class="postlink" target="_blank" rel="nofollow">Epicode</a>.</span></center></div></div></blockquote>


<link href='http://fonts.googleapis.com/css?family=Patrick+Hand+SC|Lobster|Lobster+Two' rel='stylesheet' type='text/css'>


La vie est une aventure, il ne faut pas avoir peur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://royaume-musical.forumactif.org
Cyllan
Administratrice
avatar

Messages : 242
Date d'inscription : 11/05/2010
Localisation : Sur Jupiter

MessageSujet: Re: Codes en tous genre -    Sam 27 Avr - 6:19

Pour faire ceci : [Vous devez être inscrit et connecté pour voir ce lien]

1. Modules > Gestion des codes javascript
Code:
$(document).ready(function() {
  $('.tuto-exemple').wrapInner('<div />');
  $('.tuto-exemple').append('<h3>Exemple</h3>');
  $('.tuto-exemple').show();
 
  $('.tuto-exemple').click(function() {
      $(this).children('div').slideToggle();
  });
});

2. CSS
Code:
.tuto-wrap {
  text-align: left;
}

.tuto-wrap h1, .tuto-wrap h2, .tuto-wrap h3, .tuto-wrap h4, .tuto-wrap h5 {
  font: 300 2em/1.2em Segoe UI Light, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  letter-spacing: -1px;
  word-spacing: -1px;
  text-transform: lowercase;
  margin: 0.4em 0 0;;
  color: #888;
}

.tuto-wrap h2 { font-size: 40px }
.tuto-wrap h3 { font-size: 36px }
.tuto-wrap h4 { font-size: 30px }
.tuto-wrap h5 { font-size: 24px }

.tuto-wrap > h1 {
  font-size: 50px;
  margin: 0;
}

.tuto-wrap > div + div {
  margin-top: 10px;
}

.tuto-wrap .bloc {
  padding: 10px;
  background: #51b4ec;
  color: #fff;
  font-family: Segoe UI, Verdana, Geneva, sans-serif;
}

.tuto-exemple {
  display: none;
}

.tuto-exemple:hover {
  background: #85c8ee;
  cursor: pointer;
}

.tuto-exemple div {
  display: none;
  background: #fff;
  color: #888;
  padding: 5px;
  margin: -5px -5px 5px;
}

.tuto-sommaire {
  color: #888;
  background: #f8f8f8;
  padding: 10px;
  margin-bottom: 10px;
}

.tuto-sommaire a {
  color: #444;
  text-decoration: none;
}

.tuto-corps {
 
}

.bloc h3 {
  color: #fff;
  margin: 0;
  font-size: 30px;
  text-align: right;
}

.tuto-corps .exemple {
  border: 3px solid #f7f7f9;
  margin: 10px 0;
}

.tuto-corps .exemple:before {
  content: "Exemple";
  display: inline-block;
  background: #f7f7f9;
  padding: 5px 10px 5px 5px;
  color: #888;
  font-family: Segoe UI, Verdana, Geneva, sans-serif;
  font-weight: 600;
}

.tuto-corps .exemple > div {
  padding: 10px;
}

.tuto-corps .exemple > div+div {
  padding: 10px;
  margin: 0;
  background: #f7f7f9;
}

.tuto-corps .exemple > div+div > table {
  margin:0 !important;
  width: 100% !important;
}

.tuto-corps .alert {
  padding: 8px 35px 8px 14px;
  margin: 10px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
}

.tuto-corps .succes {
  padding: 8px 35px 8px 14px;
  margin: 10px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #468847;
  background: #dff0d8;
  border: 1px solid #d6e9c6;
}

.tuto-corps .remarque {
  padding: 8px 35px 8px 14px;
  margin: 10px 0;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #3a87ad;
  background: #d9edf7;
  border: 1px solid #bce8f1;
}

3. Code à mettre dans les posts
Code:
<div class="tuto-wrap"><!--
  --><h1>Titre du tutoriel</h1><!--
  --><div class="bloc">[b]Auteur: [/b]Pseudo | [b]Niveau: [/b]Moyen | [b]Temps: [/b]15 minutes | [b]Compatibilité: [/b]phpBB2 / phpBB3</div><!--
  --><div class="tuto-exemple bloc">Exemple de réalisation (image, frame)</div><!--
  --><div class="tuto-intro"><h3>Introduction</h3>
      Décrivez ici le but du tutoriel, les outils nécessaires, etc.
  </div><!--
  --><div class="tuto-corps"><!--
      --><div class="tuto-sommaire"><!--
        -->[list=1]
        [*]Introduction
        [*]Développement
        [*]Conclusion
        [/list]<!--
      --></div>

Ici vos explications

<h3>Codes</h3>

<div class="exemple"><!--
  --><div><span style="color:red">Mon texte d'essai</span></div><!--
  --><div>[code]<span style="color:red">Mon texte d'essai</span>[/code]</div><!--
--></div>

<h3>Alertes</h3>

<div class="alert">[b]Attention ![/b] Ceci est un encart d'avertissement !</div>
<div class="succes">[b]Félicitations ![/b] Ceci est un encart de congratulation !</div>
<div class="remarque">[b]Notez-bien ![/b] Ceci est un encart de remarque !</div>

<h3>Exemples de Titres</h3>
[quote]<h3>Titre h3</h3>
<h4>Titre h4</h4>
<h5>Titre h5</h5>[/quote]

  </div><!--
  --><div class="tuto-copyright bloc">
      Écrivez ici vos éventuels "copyright"
  </div>
</div>


La vie est une aventure, il ne faut pas avoir peur.
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://royaume-musical.forumactif.org
Contenu sponsorisé




MessageSujet: Re: Codes en tous genre -    

Revenir en haut Aller en bas
 

Codes en tous genre -

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

 Sujets similaires

-
» Codes, VP, réductions... : tous vos bons plans pour vous looker sans (trop) se ruiner !!
» Boujou a toutes et a tous,
» Félicitation à tous les agents ONE
» bonjour a tous les gars du DUFOUR M903
» Bien le bonjour à tous

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Ellesmera, la forêt aux mille sons. :: Au Seuil du Rêve :: 
REGLEMENTS & EXPLICATIONS
-