I have a simple React app that uses material-ui. No matter what I try, I cannot remove a grey background from a section of an app.
Tried:
body {
background-color: #ffffff !important;
}
* {
background-color: #ffffff !important;
}
No matter what I do, I cannot make the main container white. It always goes grey. I've searched my app and all css for this background-color and cannot find it...I cannot determine what is causing this grey background.
Ugh!
Double check your header doesn't have a box-shadow on it! This will cause the grey below...
Leaving this question as maybe it can help someone else.
Ensure that your element does not have any class. If it does try removing it or check the style of the class and whether it has a backgroundColor parameter.
Related
I would like to change the default outline glow of bootstrap for any dom element. I already did it for inputs and buttons but on any other element it is still blue. So for example, I press TAB on my keyboard and it goes to next element and it glows in blue. How do I change that? I can't find it in the css. Please look at the menu items below:
When I hit TAB on my keyboard it moves to the next each time and makes it glow in blue. How do I change that color? I think there is an easier way to modify the bootstrap css, either override it or host it locally and modify it rather than having to go after each class and specify the active, focus or whatever is causing this to glow in blue. Any ideas??
The outline glow you mentioned is called outline in CSS.
You will have to change the :focus pseudo property in css to get the color you want when you press the TAB key.
*:focus{
outline: red; /* Your color */
}
*:focus is what you are looking for:
*:focus {
box-shadow: 0 0 0 .2rem red !important;
}
you could override it using !important; like i did.
I am being unable to bring the changes made in inspect element to the main theme in WordPress. I want to make the overlay color transparent and have changed the code to
/* THE OVERLAY COLORS WHICH WILL SHOW IN FRONT OF BACKGROUND IMAGES*/
.overlay-layer-wrap {
background: transparent
}
.overlay-layer-2 {
background: transparent;
}
but it's not taking. help!
Your css uses cache, to refresh it, ether add version to it, or use shift + f5 to refresh the chashe as well.
To include version of style, you gotto style.css?v=01 this will refresh width version.
If that doesnt work, that means you are giving css to wrong element, or assigning element to wrong css. Eather way, you can hardcode it in your div using style='yourstyle' this will take priority than css, so if you have style html tag with bg color and css with bg color, it will take priority.
I'm using dir-pagination found here.
This utilizes bootstrap styling. I can change the rest of the styles for the pagination controls, but I can't force the hover effect to have no color.
I can ensure that it has a color, by specifying one, but if I try to override it in a way that will force it to not have a color such as transparent, it defaults to the white color. My specificity is exactly the same as in the bootstrap css... but even if I remove the style in the bootstrap css is still defaults to white.
Been researching this for hours.
EDIT: See the following plunkr for an example of my problem.
http://plnkr.co/edit/2OvXNgX81NspuO9g356J?p=preview
twilliams Hi there.
Is this what you are trying to do?
Add this to your css.
.pagination li a:hover {
background-color: rgba(255,128,128,.5);
}
This will change the pagination background transparent color when each one is hovered.
Have a look at this Plunker.
I just realized my mistake and I feel foolish. I was making the assumption I had another element below with the color I wanted, and I was simply changing the color of an overlay element.
Turns out I didn't have that other element below, and so it really was just pulling the white of the monitor. I was a little clouded by the complexity of my current project that I didn't see it like I did with the simplicity of the plunkr example I made.
OK, sorry...this is kind of a basic CSS question but it's driving me crazy. I'm self-taught so I'm sure I am just missing something simple.
Site: http://notes.benadelt.com
The logo image sprite is just a home link...I'm trying to remove that background color that you can see is ruining the transparency of the image:
<a class="ben-logo" href="/"></a>
You can see that CSS gives any links in that section a light background-color, which is being applied to the image sprite as well. I'm trying to remove that background color from my image, but not from the body links, and cannot figure it out. Using dev tools I can only impact the style using:
header .words a { background: none; }
But that obviously removes the background from ALL links, so it also removes my image background in the sprite.
Figured there would be something I could add after the background URL to do this, such as:
background: url(http://www.benadelt.com/notes/wp-content/uploads/2013/04/Ben-Logo-Sprite.svg) none;
When you hover, it looks like I want it to look normally without that darn background-color.
Any help would be appreciated!
Ben
header .words a.ben-logo { background-color: transparent; }
The above code will target only the logo link. By setting the background colour to transparent, you leave the image itself (and all the other background properties!) intact.
Edit: One thing - I believe you already have transparent set on that background image by virtue of not specifying a colour (transparent is the default). What is probably happening in your case is that the a.ben-logo declaration comes before the .words a declaration in your stylesheet, so it's being overridden. The reason the above code should fix it is because the extra class names add more specificity. Here is Andy Clarke's specificity cheat sheet for you to peruse: http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg
i have this image in the background:
http://yoursdproperty.com/templates/pjo_joomlaforall/images/bgr.png
of this page:
http://yoursdproperty.com/index.php?option=com_jumi&fileid=8&Itemid=34
how do i remove it?
i understand that if i remove it the page will just be white in the background correct? if not, what do i need to do to get rid of the gray and white and just make it white?
If you change the following style you should get what you want:
#background_right {
/*background:transparent url(../images/bgr.png) no-repeat fixed center top;*/
background-color:white;
margin:0;
padding:0;
}
Just remove or outcomment the particular CSS line responsible for this. Or am I thinking too simple about this problem? If so, then please elaborate more about the context of the problem. If it is for instance an autogenerated stylesheet which you don't have control over, then best what you can do is to grab JavaScript (jQuery?) to remove/override the background image in the particular style class.
Edit: if you rather want a white background, then you'll need to get rid of the .body_background class as well.