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

XF 1.2 Redactor styling elements

Neil E.

Active member
#1
I need help finding the CSS that defines the "top border" of the smilies row when it's open. It might be the bottom border of the text area above the smilie container.

I also need the CSS for a toolbar button that's been selected. I must have changed something without knowing the function. My selected button turns off when I start typing in the editor. For example, the BOLD button appears to turn off when I type, but I still get bold characters.
 

Brogan

XenForo moderator
Staff member
#2
Code:
.redactor_box .redactor_smilies .secondaryContent {
border-top: whatever you want;
}
Code:
.redactor_toolbar li a:active, .redactor_toolbar li a.redactor_act
If you are clicking the B icon and then in the text area, it removes the focus from the button.
Just click the B icon and type your text.
 

Neil E.

Active member
#3
I already tried ".redactor_box .redactor_smilies .secondaryContent" and I can add a border no problem. It's the default "top border" that I can't remove. Using "border-top: none" has no effect. Makes me think it comes from some other element and it is actually a bottom border.

I get your point about how clicking in the text area changes focus. That is exactly what is happening. I thought the button should stay "on" to indicate which function is currently "active". I'm intersted in knowing if anyone has an idea on how to make it stay on.
 

Brogan

XenForo moderator
Staff member
#4
Code:
.redactor_box .redactor_smilies .secondaryContent {
border-top: 1px solid red;
}
The border above it is the bottom border of the text area.
 

Brogan

XenForo moderator
Staff member
#6
I'm on my tablet now so don't have a browser tool.

However, if you change it, it will change for the main editor.
Is that what you want?
 

Tracy Perry

Well-known member
#7
I already tried ".redactor_box .redactor_smilies .secondaryContent" and I can add a border no problem. It's the default "top border" that I can't remove. Using "border-top: none" has no effect. Makes me think it comes from some other element and it is actually a bottom border.
Code:
.redactor_box .redactor_smilies {
border-top:  none;
}
eliminates the border between the text editor area and the actual smilies. You can of course style it with border-top: 1px solid pick_your_color; instead of none.
 

Neil E.

Active member
#9
One thing I'd like to know:
What is the difference between the following elements?
.redactor_toolbar li a:active and html .redactor_toolbar li a:active