Single post in Guide to CSS (Beginner & Intermediate) [In Progress]
Forum Index > PokéFarm > Guides > Guide to CSS (Beginner & Intermediate) [In Progress] >
QUOTE originally posted by TrickyLA
Hello! I was wondering if there was a way to make a tab in my About Me cycle through a different image on refresh? I have a bunch of melan bait that don't all fit properly in the container and would like to just display one random one at a time that changes each time somebody refreshes the page. :)
Code
[sc=random][pkmn=unown][/sc]
[style]
.random {
img[src*="/img/pkmn/1/x/i.png"], /* A */
img[src*="/img/pkmn/y/5/w.png"], /* B */
img[src*="/img/pkmn/8/a/y.png"], /* C */
img[src*="/img/pkmn/6/h/9.png"], /* D */
{
/* Bulbasaur */
background-image: url("/img/pkmn/1/g/g.png");
height: 0;
width: 35px;
padding-top: 33px;
}
img[src*="/img/pkmn/m/u/n.png"], /* E */
img[src*="/img/pkmn/a/c/u.png"], /* F */
img[src*="/img/pkmn/6/r/u.png"], /* G */
{
/* Ivysaur */
background-image: url("/img/pkmn/9/6/r.png");
height: 0;
width: 58px;
padding-top: 51px;
}
img[src*="/img/pkmn/p/t/2.png"], /* H */
img[src*="/img/pkmn/y/h/g.png"], /* I */
img[src*="/img/pkmn/l/l/r.png"], /* J */
{
/* Venusaur */
background-image: url("/img/pkmn/c/1/5.png");
height: 0;
width: 79px;
padding-top: 69px;
}
img[src*="/img/pkmn/4/p/t.png"], /* K */
img[src*="/img/pkmn/p/w/a.png"], /* L */
img[src*="/img/pkmn/k/g/6.png"], /* M */
{
/* Charmander */
background-image: url("/img/pkmn/5/l/t.png");
height: 0;
width: 38px;
padding-top: 42px;
}
img[src*="/img/pkmn/6/7/f.png"], /* N */
img[src*="/img/pkmn/6/e/l.png"], /* O */
img[src*="/img/pkmn/p/h/l.png"], /* P */
{
/* Charmeleon */
background-image: url("/img/pkmn/o/i/v.png");
height: 0;
width: 60px;
padding-top: 56px;
}
img[src*="/img/pkmn/r/o/2.png"], /* Q */
img[src*="/img/pkmn/c/y/u.png"], /* R */
img[src*="/img/pkmn/2/r/w.png"], /* S */
{
/* Charizard */
background-image: url("/img/pkmn/j/j/t.png");
height: 0;
width: 74px;
padding-top: 81px;
}
img[src*="/img/pkmn/c/m/9.png"], /* T */
img[src*="/img/pkmn/k/6/b.png"], /* U */
img[src*="/img/pkmn/8/x/z.png"], /* V */
{
/* Squirtle */
background-image: url("/img/pkmn/h/h/e.png");
height: 0;
width: 38px;
padding-top: 39px;
}
img[src*="/img/pkmn/p/g.png"], /* W */
img[src*="/img/pkmn/h/1/n.png"], /* X */
img[src*="/img/pkmn/m/r/m.png"], /* Y */
{
/* Wartortle */
background-image: url("/img/pkmn/j/n.png");
height: 0;
width: 56px;
padding-top: 57px;
}
img[src*="/img/pkmn/b/j/o.png"], /* Z */
img[src*="/img/pkmn/3/a.png"], /* ! */
img[src*="/img/pkmn/5/i/3.png"], /* ? */
{
/* Blastoise */
background-image: url("/img/pkmn/2/4/p.png");
height: 0;
width: 66px;
padding-top: 62px;
}
}
[/style]
