quick-reply-box / styling issues

[erich37]

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.......


Appreciate your help !

 

[Lisa]

.quickReply .messageUserInfo {
padding-left: 10px;
}

For the user info.

 

[Lisa]

And:-

.quickReply {
border-top: 1px solid #0000;
}

For the top border.

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

 

[Shelley]

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.......


Appreciate your help !


View attachment 44754

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]

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

Thanks a lot


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.....

 

[Paul B]

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.

 

[Lisa]

You don't.

XenForo automatically applies all browser specific CSS.

I didn't know XF did that

 

[Paul B]

Not a lot of people know that.

/Michael Caine