• 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

Kim

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

steel_curtain

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

Well-known member
#6
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:

View attachment 22385

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.
 

Kim

Well-known member
#8
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.
 

Kim

Well-known member
#11
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.
 

steel_curtain

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

Shelley

Well-known member
#13
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;
}
 

Kim

Well-known member
#14
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;
}

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

Not sure where this little imp is hiding!
 

Brogan

XenForo moderator
Staff member
#15
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;
}
 

Brogan

XenForo moderator
Staff member
#17
There's also a Style Property for it: Forms -> Text Control Placeholder Text as posted earlier.

Either one of those works for me.
 

Forsaken

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

Either one of those works for me.
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.