Alternating the Quote Bubble. | Page 1 | CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints) | Guild Forums

Gaia Guilds

CODED - The CSS/Profile guild [OPEN!]

Back to Guilds

CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)

Alternating the Quote Bubble.

Gold.

Yay.

100%

[ 20 ]

Total Votes : 20

PurpleKangaroo

Offline

Posted: Wed Mar 22, 2006 2:31 pm

I'm trying coding to create my own profile.
So far this guild as been really helpful,
but I can't find a way to change the quote bubble.

Are there ways to make it smaller/different colors/shapes/etc?

Posted: Thu Mar 23, 2006 8:50 pm

The comment bubbles are two divs: .caption for odd comments, .caption2 for even comments, and then inside both is .message.

The corner images (visible in every browser except IE) use this coding:

Odd comments:
.caption:before {content: url(TOP LEFT IMAGE URL); background: url(TOP RIGHT IMAGE URL) top right no-repeat transparent; }
.caption:after {content: url(BOTTOM LEFT IMAGE URL); background: url(BOTTOM RIGHT IMAGE URL) bottom right no-repeat transparent; }

Even comments:
.caption2:before {content: url(TOP LEFT IMAGE URL); background: url(TOP RIGHT IMAGE URL) top right no-repeat transparent; }
.caption2:after {content: url(BOTTOM LEFT IMAGE URL); background: url(BOTTOM RIGHT IMAGE URL) bottom right no-repeat transparent; }

The mouth piece image (pointing to the avatar from the comment) uses this coding:

Odd comments:
.caption .message {background: url(IMAGE URL) top left no-repeat transparent; }

Even comments:
.caption2 .message {background: url(IMAGE URL) top right no-repeat transparent; }

The bubble shape uses the caption divs, specifically these codes:

Odd comments:
.caption {border: solid 2px #______; background-color: #______; }

Even comments:
.caption2 {border: solid 2px #______; background-color: #______; }

The default colors are #6F7074 for the border and #FFFFFF for the background color. Of course, you can change those and even add a background image if you're so inclined.

Ava R.
Crew

3,500 Points

Offline

DayDreamerr

Offline

Posted: Fri Mar 31, 2006 2:47 pm

thanks I was wondering the same thing XD

CSS/Graphic/Profile help/resources (With tutorials, FAQs and general tips and hints)

Welcome to Gaia! ::

Gaia Guilds

CODED - The CSS/Profile guild [OPEN!]

Quick Reply

More Information