I've made a sign up form with a submit button at the bottom. When deploying the code on the website, the button appears to have an unwanted grey background colour but only in a WordPress article. When tested outside WordPress, it appears fine. It seems WordPress changes it for some reason. Does anyone know why this might be?
This looks like an issue with specificity. In CSS, if you have not given style to your button element, it will inherit the style of the parent element. For example: If your "article" class contains a style for button elements...
.myArticle button {
background-color: #232323;
color: black;
}
Your button in that article, if not given its own id/class will receive that style. To change this, simply give your button its own id/class.
For example:
#myButton {
background-color: "color";
color: "color";
}
Furthermore, looking at the image you linked to. The reason the two buttons are styled differently may be to do with the input type. In CSS you can also select inputs by attribute. Example:
.myArticle input[type=submit] {
background-color: #232323;
color: black;
}
Either way, I would just consider giving the button you're having trouble with, an ID. From there you should be able to manually style it. ID's are one of the most specific selectors, no styles should overwrite that. Hopefully I've understood your question correctly, and this helps.
Related
I'm having trouble changing the background color of a certain button on a WordPress plugin.
The button and text are set to white and I'm trying to identify the CSS file that controls it, unfortunately I've had no luck within the inspect element of my browser.
It is incorporated in a popup form - so multiple other files come into play.
I changed the color within the browser during inspect but need a fix.
You can overwrite CSS attributes by setting !important after your definition or by defining the scope better (e.g. by writing body or html before the class selector).
make sure your css file is able to "access" the dom element – if the element is in an iframe the css wont work.
body .wpforms-page-button {
background-color: green !important;
}
Using !important is generally considered hacky. Both rules in your screenshot have the same CSS specificity in that they are both firing on input[type="submit"] and .button.
Without seeing the corresponding HTML I can't give you the exact syntax, but something like
.parentclassname input[type='submit'] and or .parentclassname .button should make your style more specific than the original rule and therefore give it precedence.
Did you try to set !important after the #fff; ?
like this:
input[type=submit] {
background-color: #fff!important;
}
the best way is to define the button in a class, so you can change only the color for this specific button. Otherwise it will changes all the buttons to color #fff if you put the css in a general style.
I have an issue where, ocassionally, when I set a background image on an HTML element it displays a completely random image that is also set as a background image elsewhere on the page.
For example, I have a list item that has a background image "myimage-abc.jpg".
I also have a div with a background image of "myimage-123.jpg". Everything is as expected for most people however for some Apple users (of which my Managing Director is one) the image "myimage-123.jpg" shows up on the list item as well as the div.
Has anyone else had this issue before? Any ideas how to get around it?
Thanks
Use inspect element on the element with incorrect background image and see which CSS selectors are overriding the background image that you want to have.
Then report back with the CSS selectors responsible for styling the elements in here. Keep in mind that CSS selectors are very particular about the way in which you use them.
Until then here's something that could be causing your problem, without my knowing your current CSS state.
From an answer on another question:
I've dealt with this before and it's always a strange issue. So here are some thoughts and examples of CSS behavior.
In CSS we have a hierarchy decided both on how you select an element and on its position within your stylesheet. Take for example the following CSS selectors:
body .test-parent .test-child {
color: red;
}
body .test-parent .test-child {
color: blue;
}
The result in this case would return color: blue; as the final style as it is the last read declaration for that elements color value.
However if we declare the following:
body .test-parent-two .test-child-two {
color: red;
}
body .test-child-two {
color: blue;
}
Then the final value is color: red;. This caught me off guard and it took me a while to notice the pattern and fix.
The problem here lies in the selectors. A more in-depth selector (longer / includes more in-between children) will override any others as can be seen by this JSFiddle.
Hope that also helps!
I have never used wordpress before, however I cannot for the life of me figure out how to change the link color in the footer text. I have legitimately been trying for hours.
http://4f3.b63.myftpupload.com/
style.css
and bootstrap.min.css
I'm about to give up.
If you're able to edit your stylesheets in Wordpress, all you need is a new CSS declaration:
footer#footer {
background-color: red;
}
Using the combined element and id selector will ensure that your rule is specific enough to override the current color.
Hello I want to added a pop-up login screen using downloaded code. However the problem is the CSS file that comes with it conflicts with my exiting one.
Is there any way to have a style sheet just apply within a set of div tags or any other method to make this work? thanks.
You can't make a style sheet only apply within div (or any other) tags, but you could put your login code within a div, give it a specific id (say 'login') and then place #login before all the styles in the login CSS. This will make them only applicable within that div.
So, if for example your login CSS has a line:
form { border: none; }
it would become:
#login form { border: none; }
...and the same for every other entry. That's the easiest way I can think of - assuming of course you can't just have the pop-up load a separate HTML file and not include your main CSS.
You can use Inherited CSS Classes for example -
.newParentClass .theConflictClass{
/*Override unnecessary CSS properties and use the one you wanted*/
/*In case if this doesn't work you can fallback to "!important" */
border: 1px solid #f00 !important;
}
I'd like to know how to do something like this in CSS:
How is it possible to change the text color halfway through like that on an <input> tag ? I've done a View Source already, but it's hard to make sense of.
Google uses two divs which are absolutely positioned on top of the input box. The first div contains the word stackoverflow, and the text is styled in a light gray. The second dvi contains "stacko" and the text is black.
If you inspect the source, look for divs with class="gsfi".
First off, look into implementing autocompletion. This should give you another element [beneath the one the user types; probably another div] for styling.
its not purely a CSS thing, you need JS too.
Have a look at this autocomplete demo: http://www.pengoworks.com/workshop/jquery/autocomplete.htm
Now you could use CSS for styling text selections in that input to gray the text out.
like this:
::selection {
color: white;
background-color: red;
}
::-moz-selection {
color: white;
background-color: red;
}