quick-reply-box / styling issues

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 !


quick-reply-box-styling-issues.gif
 

Lisa

Well-known member
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

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 !


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