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

Change color of QuickSearch prompt text

Discussion in 'Styling and Customization Questions' started by Kim, Dec 9, 2011.

  1. Kim

    Kim Well-Known Member

    Hi all,

    I have a little annoyance, just need to change the color of the text prompt that appears in the QuickSearch box

    Search...

    Please help me track down this little devil, and save my sanity :)

    Many thanks!
     
  2. steel_curtain

    steel_curtain Well-Known Member

    Code:
    .textCtrl:-moz-placeholder {
        color: #A0A0A0;
        font-style: italic;
    }
     
    Kim likes this.
  3. Kim

    Kim Well-Known Member

    Thank you kind sir! :D
     
  4. Kim

    Kim Well-Known Member

    Actually that didn't work :'( waaahhh

    any other ideas?
     
  5. steel_curtain

    steel_curtain Well-Known Member

    Sorry had to watch the end of the game...

    Yep, it appears that's a style property. Did not know that!
    It can be changed in the Forms style property group. See below:

    text.png
     
    Kim likes this.
  6. Kim

    Kim Well-Known Member


    Wow.. I didn't realise that was there either :D Interesting... I love learning new XF things everyday!

    .....but not changing that particular text unfortunately, so I am still looking.
     
  7. steel_curtain

    steel_curtain Well-Known Member

    That didn't work?
     
  8. Kim

    Kim Well-Known Member

    No sadly it didn't.

    I know I have done this once before on a Custom theme, just cannot remember where it was... and that was on 1.0.4 not 1.1 which might have it in a different area.
     
  9. steel_curtain

    steel_curtain Well-Known Member

    It's working for me on 1.1 changing that property. You sure you're changing the property on the theme you're viewing?
     
  10. Kim

    Kim Well-Known Member


    LOL I know I can be Ditzy sometimes.. but yeah I am sure :p
     
  11. Kim

    Kim Well-Known Member

    I even reverted all my other Changes to #QuickSearch in case it was a conflict, but it still didn't change the color of that text.
     
  12. steel_curtain

    steel_curtain Well-Known Member

    Hope someone else can chime in with more info. I see that it's grabbing the style property that I linked above in templates.xml and it's tied to the style property definition.

    Code:
    .textCtrl.prompt
        {
            {xen:property formElementPrompt}
        }
     
        .textCtrl:-moz-placeholder
        {
            /* needs to be in its own rule due to weird selector */
            {xen:property formElementPrompt}
        }
     
        .textCtrl::-webkit-input-placeholder
        {
            /* needs to be in its own rule due to weird selector */
            {xen:property formElementPrompt}
    text.png
     
  13. Shelley

    Shelley Well-Known Member

    you where on the right track with the original css. I've just woken up so not too sure whether that was the response you wanted or whether this solution was what you needed.

    here it is you forgot !important

    Code:
    .textCtrl:-moz-placeholder {
        color: #ff0000 !important;
    }
    
     
  14. Kim

    Kim Well-Known Member


    Sadly that isn't it either, I had already tried the !important.

    Not sure where this little imp is hiding!
     
  15. Brogan

    Brogan XenForo Moderator Staff Member

    This works in IE, FF and Chrome.

    Code:
    .textCtrl.prompt {
    color: red !important;
    }
     
    .textCtrl:-moz-placeholder {
    color: red !important;
    }
     
    .textCtrl::-webkit-input-placeholder {
    color: red !important;
    }
     
  16. Fuhrmann

    Fuhrmann Well-Known Member

  17. Brogan

    Brogan XenForo Moderator Staff Member

    There's also a Style Property for it: Forms -> Text Control Placeholder Text as posted earlier.

    Either one of those works for me.
     
  18. Fuhrmann

    Fuhrmann Well-Known Member

    But this property will change the color of all placeholders, dont?
     
  19. Forsaken

    Forsaken Well-Known Member

    The issue is she's using Opera on an older laptop (Opera scales its resources based on what a machine has available), and the last two declarations are browser specific.

    Not sure why the first one doesn't work.
     
  20. Brogan

    Brogan XenForo Moderator Staff Member

    Must be a browser issue then.

    I don't use Opera so I can't test it.
     

Share This Page