Joy
FondAdmin narcissique
Messages : 627
Date d'inscription : 06/06/2012
Âge : 25
Localisation : Derrière son écran, confortablement installée au pays des licornes pégases.
 |  (#) Sujet: Code Instagram #1 Ven 28 Oct - 15:03 | |
| Nature du code
Code Instagram, version appli téléphone portable.
L'image du téléphone a été faite par moi, donc désolée si vous n'aimez pas quand ce ne sont pas de vraies images !
|
Aperçu
Cliquez pour voir l'image en taille réelle.
|
Code
- HTML QUI SERA DANS VOTRE POST:
- Code:
-
<center><div id="phonecase"><div class="screen"><div class="igcode"><div class="igheadbar"><span>[b]←[/b] pseudo</span><div>:</div></div><table class="igprofile"><tr><td rowspan="2" align="center"><img src="URL_DE_L_AVATAR_IG" /></td><td><span class="ignbr">Nombre</span> publi. </td><td><span class="ignbr">Nombre</span> abonnés </td><td><span class="ignbr">Nombre</span> abonnem... </td></tr><tr><td colspan="3" id="igbuttonabonne"><span> ✓ ABONNÉ(E) </span><span>▼</span></td></tr></table> <div id="igdesc">[b]Prénom P. Nom[/b] Description </div><table class="igphotogrid"><tr><td style="background-image: url('URL_DE_LIMAGE_1');">1</td><td style="background-image: url('URL_DE_LIMAGE_2');">2</td><td style="background-image: url('URL_DE_LIMAGE_3');">3</td></tr><tr><td style="background-image: url('URL_DE_LIMAGE_4');">4</td><td style="background-image: url('URL_DE_LIMAGE_5');">5</td><td style="background-image: url('URL_DE_LIMAGE_6');">6</td></tr> </table></div></div></div><span style="font: 10px Arial; text-transform: uppercase; align-self: flex-end;">Code by Joy</span></center>
► Si vous êtes un des admins et que vous voulez que le code soit appliqué partout :
Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS
- CSS:
- Code:
-
/* Code Instagram par Joy de http://dream.forumsactifs.net/ */
div#phonecase {
background: url('https://i.imgbox.com/b3P3ZuAn.png') no-repeat center;
width: 300px;
height: 550px;
display: flex;
justify-content: center;
}
div.screen {
background: #fff;
width: 260px;
height: 390px;
position: relative;
top: 80px;
left: 0px;
overflow: hidden;
}
div.screen:hover {
overflow-y: auto;
}
div.igcode {
display: flex;
flex-direction: column;
align-items: stretch;
color: #000;
}
div.screen:hover div.igcode {
width: 100%;
}
div.igheadbar {
box-shadow: 0px 1px 2px #c6c6c6;
display: flex;
justify-content: space-between;
font-weight: bold;
font-size: 14px;
padding: 3px 0;
}
div.igheadbar > div {
display: inline-block;
margin-right: 5px;
}
table.igprofile {
margin: 0px;
width: 100%;
}
table.igprofile td {
text-align: center;
font-size: 13px;
color: #999;
}
span.ignbr {
font-weight: bold;
color: #000;
}
table.igprofile img {
border-radius: 50px;
height: 60px;
margin: 2px;
}
td#igbuttonabonne > span {
background: #23A920;
display: inline-block;
padding: 5px 10px;
border-radius: 5px;
color: #fff;
margin: 0 3px;
font-size: 10px;
}
div#igdesc {
text-align: justify;
padding: 5px; font:
11px Arial;
}
table.igphotogrid {
width: 100%;
}
table.igphotogrid td {
height: 80px;
width: 80px;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: transparent;
}
/* Fin code Instagram */
► Si vous n'êtes pas admin et que c'est juste pour vous !
- CSS A RAJOUTER A LA SUITE DU CODE HTML DANS VOTRE POST:
- Code:
-
<style>div#phonecase { background: url('https://i.imgbox.com/b3P3ZuAn.png') no-repeat center; width: 300px; height: 550px; display: flex; justify-content: center; } div.screen { background: #fff; width: 260px; height: 390px; position: relative; top: 80px; left: 0px; overflow: hidden; } div.screen:hover { overflow-y: auto; } div.igcode { display: flex; flex-direction: column; align-items: stretch; color: #000; } div.screen:hover div.igcode { width: 100%; } div.igheadbar { box-shadow: 0px 1px 2px #c6c6c6; display: flex; justify-content: space-between; font-weight: bold; font-size: 14px; padding: 3px 0; } div.igheadbar > div { display: inline-block; margin-right: 5px; } table.igprofile { margin: 0px; width: 100%; } table.igprofile td { text-align: center; font-size: 13px; color: #999; } span.ignbr { font-weight: bold; color: #000; } table.igprofile img { border-radius: 50px; height: 60px; margin: 2px; } td#igbuttonabonne > span { background: #23A920; display: inline-block; padding: 5px 10px; border-radius: 5px; color: #fff; margin: 0 3px; font-size: 10px; } div#igdesc { text-align: justify; padding: 5px; font: 11px Arial; } table.igphotogrid { width: 100%; } table.igphotogrid td { height: 80px; width: 80px; background-position: center center; background-repeat: no-repeat; background-size: cover; color: transparent;}</style>
|
 |
|
Natamea
Messages : 4
Date d'inscription : 29/01/2017
Localisation : Dans les fesses d'un canard
| | (#) Sujet: Re: Code Instagram #1 Mer 1 Fév - 17:05 | |
| Bonjour ou bonsoir ! J'ai emprunté ce code ci pour le mettre sur mon forum, et j'ai fais une tentative de changer la couleur du téléphone, mais en vain... J'ai donc tenté de voir si c'était dû à peut-être que le téléphone était une image, mais mon test s'est révélé vain, aussi.  J'aimerais donc savoir, est-ce une image, ou un code HTML ? Et si c'est un code HTML, comment changer la couleur ? Merci d'avance pour votre réponse, et bonne journée ou soirée!  Ps : je sais pas si c'était mieux de mettre ici ma question ou sur la partie FAQ...  |
|
Joy
FondAdmin narcissique
Messages : 627
Date d'inscription : 06/06/2012
Âge : 25
Localisation : Derrière son écran, confortablement installée au pays des licornes pégases.
| | (#) Sujet: Re: Code Instagram #1 Ven 3 Fév - 21:34 | |
| Salut !
Le portable est une image en effet, créée sur Photoshop par mes petits soins. ^^
(Et poser la question ici c'est très bien. ^^) |
|
Midnight
Messages : 1
Date d'inscription : 16/04/2015
| | (#) Sujet: Re: Code Instagram #1 Mar 1 Aoû - 13:50 | |
| |
|
Invitée
Invité
| | (#) Sujet: Re: Code Instagram #1 Mar 28 Aoû - 19:05 | |
| |
|
Contenu sponsorisé
| | (#) Sujet: Re: Code Instagram #1 | |
| |
|
