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

Discussion in 'Styling and Customization Questions' started by Neil E., Sep 23, 2013.

  1. Neil E.

    Neil E. Active Member

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

    Brogan XenForo Moderator Staff Member

    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.
     
  3. Neil E.

    Neil E. Active Member

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

    Brogan XenForo Moderator Staff Member

    Code:
    .redactor_box .redactor_smilies .secondaryContent {
    border-top: 1px solid red;
    }
    The border above it is the bottom border of the text area.
     
  5. Neil E.

    Neil E. Active Member

    Any idea which element that text area is (so I can change the bottom border color)?
     
  6. Brogan

    Brogan XenForo Moderator Staff Member

    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?
     
  7. Tracy Perry

    Tracy Perry Well-Known Member

    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.
     
  8. Neil E.

    Neil E. Active Member

    Tracy, perfect thanks. That's what was eluding me.
     
  9. Neil E.

    Neil E. Active Member

    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
     

Share This Page