• 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

erich37

Well-known member
#1
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 !


quick-reply-box-styling-issues.gif
 

Shelley

Well-known member
#4
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 !


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

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

quickreply.png

(edited code) Being applied in conversations so I applied .thread_view
 

erich37

Well-known member
#5
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":
Code:
.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:
 

Brogan

XenForo moderator
Staff member
#6
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.