1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

CSS Styling Quote Box Help

Discussion in 'Styling and Customization Questions' started by haincha, Apr 11, 2013.

  1. haincha

    haincha Member

    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:
    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!
     
  2. Steve F

    Steve F Well-Known Member

  3. haincha

    haincha Member

    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.
     
  4. Steve F

    Steve F Well-Known Member

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

    haincha Member

    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

    Code:
    /* 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.
     
  6. Ellie

    Ellie Member

    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.
     

Share This Page