News:

SMF 2.1.4 has been released! Take it for a spin! Read more.

Main Menu

Different colours for quotes in a quote

Started by klumy, October 27, 2004, 02:35:47 PM

Previous topic - Next topic

klumy

If would be great, if the quotes background within a quote will get different colours. So you can easier differ quotes within quotes.

Anguz

you can do that with CSS.
http://css.maxdesign.com.au/selectutorial/selectors_descendant.htm


.quote div div
{
/* Style here... */
}


I think that's correct, if not, it's pretty close. :P
Cristián Lávaque http://cristianlavaque.com

[Unknown]

.quote .quote
{
   background-color: hotpink;
}
.quote .quote .quote
{
   background-color: yellow;
}
.quote .quote .quote .quote
{
   background-color: white;
}
.quote .quote .quote .quote .quote
{
   background-color: red;
}
.quote .quote .quote .quote .quote .quote
{
   background-color: brown;
}

If you wanted it really really ugly, use the above in your css.

-[Unknown]

klumy

okay thanks, but why don't you use alternate colours for SMF Forum like purple and grey. this would looks good

Anguz

Thanks [Unknown], I knew it mine wasn't right, but was close. :P

klumy, the backgrounds for topic replies are done with different classes. AFAIK, it can also be done with CSS, just can't remember how. It's following the same method shown here, but used a bit different...

* Anguz goes find out...
Cristián Lávaque http://cristianlavaque.com

Anguz

I'm sorry, couldn't find it. You can just do it like [Unknown] said and use the two colors you want to use, alternating. Decide up to how many nested quotes you may have and style up to that. You most probably won't need more than what he wrote. Example:


.quote .quote
{
   background-color: grey;
}
.quote .quote .quote
{
   background-color: white;
}
.quote .quote .quote .quote
{
   background-color: grey;
}
.quote .quote .quote .quote .quote
{
   background-color: white;
}
.quote .quote .quote .quote .quote .quote
{
   background-color: grey;
}
Cristián Lávaque http://cristianlavaque.com

Oldiesmann


.quote .quote, .quote .quote .quote .quote, .quote .quote .quote .quote .quote .quote
{
background-color: grey;
}
.quote .quote .quote, .quote .quote .quote .quote .quote
{
background-color: white;
}


A little bit neater :)
Michael Eshom
Christian Metal Fans

Anguz

Quote from: Oldiesmann on October 27, 2004, 07:56:16 PM
A little bit neater :)

Thanks. :)

It takes less lines, but it's a bit harder to see at what nest level you are though. But it does look neater.
Cristián Lávaque http://cristianlavaque.com

trenchteam

man, I need to look at the tips and tricks more often. I've been looking for this for ages!

B Patterson

Quote from: Oldiesmann on October 27, 2004, 07:56:16 PM

.quote .quote, .quote .quote .quote .quote, .quote .quote .quote .quote .quote .quote
{
background-color: grey;
}
.quote .quote .quote, .quote .quote .quote .quote .quote
{
background-color: white;
}


A little bit neater :)

Still not complete.... you're missing the first .quote!!
.quote,
.quote .quote .quote,
.quote .quote .quote .quote .quote
{
    background-color: #fff; /* You could use white... I like HEX colors */
}
.quote .quote,
.quote .quote .quote .quote,
.quote .quote .quote .quote .quote .quote
{
    background-color: #ccc; /* You could use gray, but see above comment */
}

And yet still neater!!

The word "quote" looks so wrong after typing so many times....

~Brett

6Scylla

I'm really loving the smf main site, so many awesome tricks here. Thanks for another one!

Advertisement: