CSS Styling Quote Box Help

[haincha]

Hello, all. I am looking for some styling help. I am fairly new to CSS, and if Inspect Element doesn't tell me exactly what template to edit, I get a little lost.

But, I am using Brogan's code for putting the avatar next to the quote, but I am wanting to put it inside of a CSS chat bubble if possible. I created a bubble using the code:

.bubble
{
position: relative;
width: 500px;
height: 120px;
padding: 5px;
background: #FFFFFF;
border: #lightblue solid 3px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
 
.bubble:after
{
content: "";
position: absolute;
top: 12px;
left: -30px;
border-style: solid;
border-width: 10px 30px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
}
 
.bubble:before
{
content: "";
position: absolute;
top: 10px;
left: -35px;
border-style: solid;
border-width: 12px 32px 12px 0;
border-color: transparent #lightblue;
display: block;
width: 0;
z-index: 0;
}

I created this using http://www.ilikepixels.co.uk/drop/bubbler/

If anyone has some ideas or easy ways to translate this, I would be very grateful!

 

[Steve F]

http://xenforo.com/community/resources/add-avatar-to-quote.935/

That addon may be of interest to you. The link below was me posting a download link because the original download was broken.

http://xenforo.com/community/threads/add-avatar-to-quote.34843/page-2#post-404566

 

[haincha]

The add-on isn't the issue. I am trying to theme is using the code I generated from the posted link. I just am not sure where to start to get the arrow, box, and information within themed correctly.

 

[Steve F]

Unless .bubble is part of your html in the template then it will not correspond to any CSS.

 

[haincha]

I understand. I apologize, I am not asking where can I stick this code to make it magically work. I was trying to figure out which CSS that would relate to in

/* Avatars for quotes */
body .messageText .QuoteAvatar {
float: left;
margin: 0;
padding: 0;
box-shadow: none;
}
 
.messageText .bbCodeQuote.hasAvatar {
margin-bottom: 10px;
margin-left: 68px;
position: relative;
box-shadow: none;
}
 
.messageText .bbCodeQuote.hasAvatar .arrow {
border-radius: 0;
height: 20px;
width: 10px;
position: absolute;
left: -11px;
top: 2px;
overflow: hidden;
}
 
.messageText .bbCodeQuote.hasAvatar .arrow:after {
content: " ";
background: @bbCodeQuote.border-color;
height: 9px;
width: 9px;
top: 5px;
left: 5px;
position: absolute;
box-shadow: none;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
 
/* New indicator */
.message .newIndicator {
z-index: 1;
}

*Update*
I have gotten the main box there. Sitting in Inspect Element and editing one thing at a time until I get my desired result.

http://www.technonook.com/threads/post-your-desktop.113/#post-688 is what I have going on so far.

 

[Ellie]

If you ever get time it would be great to detail how you achieved this. I saw it on your forum and think it looks great. I was going to add a background image to the quote but this looks far better.