Hello,
First post here. I’m trying to adjust the color of a button in a WordPress app. The publisher of the app said that my theme does not handle the presentation layer properly.
They told me to add the following to my CSS:
div > div.nf-form-layout > form > div > div.nf-form-content > div > div.nf-mp-footer > div > ul > li > input
Could someone help me translate this code I could paste into the CSS? I’m sure this is a dumb request. Thanks in advance if you can help.
Kyle
Thanks for the quick response. Good question. Yes, I think so. I know where to put custom CSS in the theme because I did it once before. A few years ago, tech support for the same app (Ninja Forms) helped me with a different formatting issue. I don’t know CSS syntax and terminology in detail, so they told me to put the following code into the theme’s custom CSS. I did and it worked beautifully! Here is the previous code they provided:
~ ~ ~
.ninja-forms-req-symbol {
display: none;
}
nf-error-wrap.nf-error {
display: none !important;
}
.nf-error .ninja-forms-field {
border: 1px solid #E80000 !important;
}
~ ~ ~
This time, however, they just gave me the info above, which I guess is the “selectors”. I’d like to make the color the “Next” button red (FF0000).
When I use Chrome to “inspect” the text element in Chrome, I get this…
~ ~ ~
<ul class="nf-next-previous">
<li class="nf-next-item">
<input type="button" class="nf-next" value="NEXT">
</li>
</ul>
~ ~ ~
Does that help? Thanks again!
Without seeing the page I can’t be sure if the last element in the selector is actually a submit button. But if it is you just add the styles to that selector.
div > div.nf-form-layout > form > div > div.nf-form-content > div > div.nf-mp-footer > div > ul > li > input {
background: red; /* red background color */
color: white; /* or whatever for the text color */
/* and so on */
}
Here is the page. You’ll notice the word NEXT in gray in the bottom right.
https://retire-it.com/compare-2/
I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.
See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.
Note: Backticks are not single quotes.
class selectors start with a dot, you’re missing that here, it should be .nf-error-wrap.nf-error
If you use !important the style I posted will work. But I’m not too crazy about that selector.
div > div.nf-form-layout > form > div > div.nf-form-content > div > div.nf-mp-footer > div > ul > li > input {
background: red !important;
}
That worked! I just copy/pasted the code above. It isn’t pretty, but it worked. Thank you so much!!
You can try this for a selector - it is a bit better form…
#nf-form-18-cont .nf-mp-footer > div > ul > li > input
No problem.
The issue is, with WordPress it is hard to know the location of elements at all times, or what classes/ids are used for other elements or on other pages. The fact that the Ninja Forms guys gave you that selector also suggests they want to make it as specific as possible so as not to mess with other elements.
I think you might be able to get away with this selector but I can’t be sure.
.nf-form-content input[type=button] {
background: red !important;
}
rickstewart, thank you. ok, I’m a dummy. Where do I put #nf-form-18-cont .nf-mp-footer?
This string of code works:
div > div.nf-form-layout > form > div > div.nf-form-content > div > div.nf-mp-footer > div > ul > li > input {
background: red !important;
}
If I wanted to try your suggestion, would the new string read?
div > div.nf-form-layout > form > div > div.nf-form-content > div > nf-form-18-cont .nf-mp-footer > div > ul > li > input {
background: red !important;
}
lasjorg, thank you. dumb question. Would this replace the entire string you provided above entirely? Or do I still need to the entire string syntax with the div’s?
div > . div.nf-form-layout > form > div > div.nf-form-content input [type=button] {
background: red !important;
}
Thank you
Hey @kylemarks
You would simply use this instead. It is the same, but it is always good form to make the selector as brief as you can and still have it only select the item you are targeting:
#nf-form-18-cont .nf-mp-footer > div > ul > li > input {
background: red !important;
}
I’m a little concerned about the number in that id selector, it feels generated.
#nf-form-18-cont
If so, it is possible that doing any editing to the form may create a new number and break the CSS. It might also only be generated when making a new form, not when editing a form but I can’t be sure.
Ninja forms assigns that number I believe, and it is unique to that form. It will only change if you should decide to use a different form.
In fact, if I knew the website well I was doing this on, I would only use this, or perhaps something a tiny bit longer:
.nf-mp-footer input {
background: red !important;
}
OK, if it is unique to that form then it is a lot better. In fact, if it is unique there is no reason for the selector to be so specific.
.nf-mp-footer input {
background: red !important;
}
Wouldn’t that make the text input red?
Yes it might, then you would need to make the selector just a bit more specific. General rule of thumb though, the selector should always be as terse as you can get away with and no longer. It makes further css changes, lets say when you make the website mobile responsive, much easier. When you make the selectors long other devs that work on the website will curse your name, and will likely end up using a bunch of !important tags…
Well yes, ideally we would just add a class to the button and use it, maybe scoping it to its container/component at most.
But in this case, we have no control over the elements so it makes it a lot harder to know how specific a selector needs to be. That is the problem with custom CSS for WordPress, especially when it’s a theme/plugin/site you don’t know that well.
From a development point of view, yes the selector is horrible.
From a performance point of view, it isn’t great (the child selectors help). But browsers are really fast at doing selector matching so it may not matter much.
From the point of view that the selector is so specific that it’s likely to only match that button, it may potentially make it “safer” to use for someone that isn’t a developer.