I wanted to override an inline style that was set in a Wordpress CMS Editor. I'm aware that using !important would work but I wanted another pair of eyes on this and what is really happening.
h2 span {
color: yellow !important;
}
<h2 style="color: #FFFFFF">Hello <span>World!</span></h2>
In the above, #FFFFFF was set from the editor. That's ok but any text wrapped in span must be yellow.
That should work but it does....not...ish. I use browser sync and once I made the change and save the file, the span becomes yellow. On refreshing the browser, h2 no longer shows the yellow span. Any work around without JavaScript?
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 used css to indent every parapgraph in wordpress by 30px. This was going great until I noticed that it also indented my centered aligned text by 30px. That makes this centered text off centered. It's even more noticible when I look at it on mobile and I want the text to be easy and professional to read on the go. So, I want to exclude "text-align:center;" from the 30px indents for every center aligned text.
I don't have access to the entire code of my theme with my wordpress premium account. I can only edit the css using a blank css editor in a menu option. Is this possible without being able to see the whole code?
I have tried looking this up on stackoverflow before posting and using this code...
#article p {
display: block;
text-align:center;
text-indent:0!important;
}
I now know that this "#workskin p.chapter" ID selector will not work because I have not added it to my code because I do not have access to the full themes code.
This is the css code that I am using to make the indents and the only code that I have in my css editor for wordpress "p" paragraph element...
article p {
text-indent: 30px;
}
I could not get any changes in making my indents disappear for the text that was center aligned.
I'd like to make my center aligned text centered with my site and not indented an extra 30px from the center. For example:
Title-centered with no indents
Paragraph one-indented
Paragraph two-indented
Break in paragraph-centered no indents
Paragraph three-indented
Paragraph four-indented
Break in paragraph-centered with no indents...etc
This is the first time I am using css. Usually I have a full theme to look at the code and I am able to make small edits using color# and changing the src of images but that is the extent of my coding knowledge and I'm learning a little more with each google search and comment. This is the last code edit I need on my site and I appreciate everyones comments and help.
The specificity in CSS is in the order of
Type selector(h1, p ,div...) < Class selector(rules with a period .) < ID selector(rules with #) but the rules defined with ! important overrides any other declaration ofcourse ;)
As discussed above if different set of rules are added for a same element i.e rules targeting elements with same specificity then the CSS will use the rules defined later on (i.e the latest one)
Example:
p{
color : red ;
}
p{
color : green ;
}
In this example the color of the text in paragraphs will be green and not red as rule with green color is defined after the red one.
p{
color : red ! important;
}
p{
color : green ;
}
But here because of ! importantis added to red the color of text inside the p will be red.
So in your case you can go with either defining the text-align: center ! important or just define the rules overiding the ones you don't want in the specific p tag but this can be done by defining it's specific CSS rules after the rules for normal p tags
first define the normal or default rules as
article p {
text-indent: 30px;
}
After this add the specific rules
#worskin p .chapter {
display: block;
text-align:center;
text-indent:0;
}
Thanks AuxTaco for your suggestion.
you can put class on the p that you want to exclude from it like:
article p {
text-indent: 30px;
}
// try changing it to this remember exclude is class on p tags you want to exclude
// Dont forget the dot (.) before exclude
// and the !important is after the value
article .exclude {
text-indent: 10px !important; // you put !important here
color: red !important; // like this
padding: 10px !important; // like this
}
MAKE SURE TO MAKE EXCLUDED P UNDER THE NONE EXCLUDED TO REWRITE IT
LOOK AT CODE COMMENTS CAREFULLY
Hope it was hepfull
I have literally no html/css experience and hence I solicit your help with the following.
I am using a shiny dashboard with a default sidebar. I tried to change the background color and the font color of the sidebar using the following line of code inside the dashboardBody:
tags$head(tags$style(HTML('.skin-black .main-sidebar {color: #000000; background-color: #FFB6C1;}')))
What happened was that the new sidebar has a background color of #FFB6C1, which I intended to. But the font color in the sidebar didn't change into black and it is still white! Any suggestion?
Thanks a lot
San
I came across an example that helped me solving the issue. http://journocode.com/2016/04/04/r-first-web-application-shiny/
Accordingly, the problem was solved by used:
label = HTML('<p style="color:black;">Maximum number of suggestions</p>')
in order to depict the color of the label in black instead of white color obtained when using only:
label = "Maximum number of suggestions"
Of course both were arguments of the selectInput object.
Thanks KH for the help and of course thanks MARIE-LOUISE TIMCKE for your amazing post.
Ciao
Your CSS selector may not be targeting text elements, rather a sidebar div. Assuming your text elements are under the .main-sidebar class, this should/may work. Just replace ELEMENT with whatever HTML tag your text is enclused in, like
.skin-black .main-sidebar ELEMENT {
color: #000000;
.skin-black .main-sidebar {
background-color: #FFB6C1;
}
Whitespace does not matter.
Similar to #Kasper's answer, but to directly embed into shiny code:
dashboardBody(
tags$head(
#in line styling
tags$style(HTML(
#siderbar background
'.skin-blue .main-sidebar {
background-color: white;}',
#siderbar text color
'.skin-blue .main-sidebar .sidebar{
color: #red;}'
)
)
)
Note that
although it changes the style of sidebar, the code is within dashboardBody().
depending on your current dashboard skin color, you need to change the ".skin-blue" (blue is default) to e.g. ".skin-black" as needed
for changing font color, it is essential to have ".sidebar" after ".main-sidebar". ".sidebar" basically is the ELEMENT mentioned by #Kasper. (To locate such elements, use Developer tools in your chrome browser, and inspect everything until you can locate the precise block of html code, and use the ELEMENTs after "class=" for this purpose.)
I have edited my custom CSS to include ::selection{color: white; background: #2f3f58;} or multiple similar variations including copy/pasting and then editing code from W3Schools, W3C, stack overflow, and other sites. The code does nothing. I am using the http://alxmedia.se/themes/hueman/ Hueman theme and it has almost the exact same code that seemed to be working. So i copied this code into my custom CSS and edited it and that did not work either. Finally i disabled the theme CSS pertaining to selections. No matter what I do my selection color is the same red set in the theme options menu as a primary color. The hex for that red is not in the theme CSS however except in the commented out selection element that I am replacing. Is there any way to override the highlight color using CSS that is not the ::slection: element or am I using the element wrong?
the code is now
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
much thanks to #citizenen and is wonderful suggestion
That's the right element for selection color. You can use the "!important" property to raise the specificity and force the style over others. Also use "background-color" instead of just "background". Try changing it to this:
::selection {
color: white !important;
background-color: #2f3f58 !important;
}
More on !important here: http://www.smashingmagazine.com/2010/11/02/the-important-css-declaration-how-and-when-to-use-it/
You are missing a closing brace in your CSS file (custom.css) that's preventing styles after that point from applying correctly. In the future, copy your code into a tool like Lint (http://csslint.net/) and it will find the errors for you.
Cheers!
I am currently building a website and as soon as I added a link <a> tag to a <p> word, it becomes transparent. There are two links on the main page, both are coded exactly the same, but one of the links is transparent? The html passes validation and so does the css. If I add the old school <font color> html property within the <a> the color shows up, but the words break apart on different lines. I know this way is obsolete, but no CSS is working right now? Help?
Make sure that the background color is not the same as the hyperlink colors.
For kicks, try this: <font face="verdana" color="green">[your-entire-hyperlink-code]</font>
That's not how it should be done, but just to test it. If you see text, then your background color and hyperlink color are the same and need to be changed.
Try adding a CSS selector for <a> tags within <p> tags. Something like the following:
p a {
color: #000;
}
p a:hover {
color: #1c1c1c;
}
This should make any <a> black by default, and a dark grey on hover. If this doesn't work, try disabling all styles save for the default browser style-sheet (like Hakre said).