Hi,
Currently text input box text color is white due to parent theme styling, how would I change this color please? What css selector will achieve this?
Website is www.bushcraft.social > forum > try typing in the search box to see what I mean.
This white text is also apparent when adding text to any text input area for example, when writing new forum topic heading, or when messaging someone in input field.
Hey Robert,
Not sure what you mean by ‘parent theme’, it appears this is coming from your WordPress theme. Unfortunately for some reason there class of
body.dark-skin input[type=”text”]:focus
uses not only a white colour, but also the !important rule meaning anything after it is ignored / overwritten.. This is particularly bad practice as any plugin installed that uses it’s own input CSS class without the !important rule will also be affected..
So there are two ways you can deal with this, both fairly easy.
The first is to remove the !important from this rule in your WordPress theme’s style.css. Although they obviously used !important for a reason so you may have a couple of knock on effects. You should be able to make a child theme of your WP theme to avoid losing your changes on updating, but you might need to look at your WP theme documentation or contact the developers for more info on how.
The other, is to create a basic child theme of css-only using the framework available for free in our store, and add the input rule to the childs css-only.css stylesheet using !important to overwrite the WP theme’s rule.
Which one sounds good?
Ok, I have tried adding the following to my WordPress Theme Child stylesheet with no effect and also tried adding it to the simple:press css stylesheet also with no effect.
body.dark-skin input[type=”text”]:focus {
color: #888!important;
}
Can you tell me what stylesheet you found the code below in as I cannot seem to find it myself.
body.dark-skin input[type=”text”]:focus
Thank you for your response.
If you wanted to do the second option, you’d need to edit the forums existing input rule (sorry didn’t make that one clear). Open css-only.css, and navigate to line 1518, you should see:
#spMainContainer textarea.spControl,
#spMainContainer select.spControl,
#spMainContainer input.spControl {
Just add an !important after color: #4C5D77; so it becomes:
color: #4C5D77 !important;
But I can’t stress enough the importance of a child theme, without one you’ll loose this change the next time there is an update to the theme. If you were to make a child theme, all you’d need in the stylesheet would be:
#spMainContainer textarea.spControl,
#spMainContainer select.spControl,
#spMainContainer input.spControl {
color: #4C5D77 !important;
}
Thank you so much Ike for your quick responses and resolving this for me. I have now added the below code to my themes child stylesheet and it is working a charm. Again thank you for your help on this.
#spMainContainer textarea.spControl,
#spMainContainer select.spControl,
#spMainContainer input.spControl {
color: #4C5D77 !important;
}