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

quick-reply-box / styling issues

Discussion in 'Styling and Customization Questions' started by erich37, Apr 18, 2013.

  1. erich37

    erich37 Well-Known Member

    I am using the default XF-style and trying to adapt some minor color changes.

    I am using a white-colored background and a grey-colored content-background.
    Now I applied a yellow background-color for the "quick reply box", but I am not able to apply the padding to keep the Editor-box within my quick-reply-box.

    Again, I am using default XF-style and default fluid width.

    I have applied a "padding-left: 10px" in order to get the Avatar at the left in sync, but then the Editor-box shoots off at the right-hand-side.
    Could anyone please let me know how to make it (padding or some other CSS) to have the Editor-box not shooting over the "quick reply box" at the right-hand-side ?
    Ideally I would like to have a padding at the left and a padding at the right to have the Editor neatly showing within the yellow-colored background.

    I have also tried to apply a different color for "border-top" at the "quick reply", but not even with template "extra.css" it is possible to overrule the border color.

    Not sure if this is a styling-bug in XF or if I am just doing something wrong....... :confused:

    Appreciate your help !

  2. Lisa

    Lisa Well-Known Member

    For the user info.
    Skylined likes this.
  3. Lisa

    Lisa Well-Known Member


    For the top border.

    (obviously putting whatever colour you want instead of black (you might need !important after the hex value).
    erich37 likes this.
  4. Shelley

    Shelley Well-Known Member

    not sure the following code is of use or will have any adverse effects but I played around with that area for a few minutes and I came up with the following

    .thread_view .message #QuickReply {padding: 10px; background-color: green; border-top: 0px solid darkgreen;
    .thread_view .quickReply {background-color: green; border-top: 1px solid red; padding-left: 10px;
    border-bottom: 1px solid red;}
    The output of that is as follows obviously the colours would need changing and styling adjusted to your preference.


    (edited code) Being applied in conversations so I applied .thread_view
    erich37 likes this.
  5. erich37

    erich37 Well-Known Member

    ohhh, one can learn a lot from the ladies here at XF :)

    Thanks a lot (y)

    I am finally using this code in template "extra.css":
    .quickReply {
    border-radius: 6px 6px 6px 6px;
    background: #FBE26E;
    border: 1px solid #F6B22B !important;
    .thread_view .message #QuickReply {
    padding-right: 10px;
    .thread_view .quickReply {
    padding-left: 10px;
    .conversation_view .message #QuickReply {
    padding-right: 10px;
    .conversation_view .quickReply {
    padding-left: 10px;
    ... not sure if I actually need to use the "moz-border-radius" ? Not sure where I got that from..... :confused:
  6. Brogan

    Brogan XenForo Moderator Staff Member

    You don't.

    XenForo automatically applies all browser specific CSS.

    Besides which, Firefox doesn't require the moz prefix for border radius after v3.5, and webkit doesn't require it after v5.
    erich37 likes this.
  7. Lisa

    Lisa Well-Known Member

    I didn't know XF did that :D
  8. Brogan

    Brogan XenForo Moderator Staff Member

    Not a lot of people know that.

    /Michael Caine
    Lisa likes this.

Share This Page