Can anyone please explain to me what is going on over here, I am trying to override the background color to dodgerblue but for some reason the white background color is also being rendered underneath it.
I have the following snippet inside my css file.
.modal-content {
color: $dropdown-text;
background-color: dodgerblue ;
opacity: 0.9;
}
I have an angular 2 project and for some reason I cannot override the background color.
Here are the outputs with and without the white background color.
Here is the other one.
Any help with is will be much appreciated.
It's simple. You use opacity. Set opacity: 1 to modal-content
It looks like your opacity needs to be set to 1 not 0.9.
Also check that your css rule is the last one to be run by the browser. If you're trying to overwrite a rule, you need to load your libraries' css files in the header first, then your style.css last so you're changes overwrite the base library styles.
Why second time opacity show 0.5 it should be as in first 0.9. and also modal content should not be with opacity, it should be hard without opacity.
Set below property to modal instead of modalContent.
Also try with important property for back-color;
.modal, modal {
color: #7d7d7d;
background-color: dodgerblue !important ;
opacity: 1;
}
Related
I have button which is <a> element with href, which doesnt have any background set on :active/:focus/:visited, but on force/3dTouch tap it gets this weird #b8b8bc background under the text only (while <a> doesnt have any children e.g. <span> etc so I suppose this is the text node highlight).
here's the gif to illustrate the behavior.
I've tried adding -webkit-tap-highlight-color: transparent but it changes only regular tap color, not the forced/3d one
also I thought maybe that's selection color (as I can reproduce this on various websites) so tried to use selection selectors which didn't help as well
::selection {
background: transparent;
}
::-webkit-selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
Any ideas about possible origin of this?
Good job digging up.
I had the same issue plus another one and here are my solutions.
Post is old but someone could find it useful like me today.
First of all, the forced background was covering my link text totally because I was using user-select: none; on my header links.
So that's something to check, just in case.
Regarding the background color, Force Touch doesn't use the link parent element background but the one that's under it.
If you want to "feel it", we could say that Forced Touch digs into the direct parent background and let the under layer appears.
So, to counter that without having to touch to background color, I use some z-index in the parent element to elevate it, preventing Forced Touch to "dig" :)
So if your links parent element is named card, you can add to your CSS:
.card {
isolation: isolate;
z-index:1;
}
Now, Force Touch will use the parent background color as we want to.
Okay so I found sort of "solution" based on parent's color.
Try to set *{background: red}.
If worked try set same on few parents .parent1 { background: pink}, .parent2 { background: lightblue}, .parent1 { background: salmon} etc.
In my case I found the color applied to force touched text was menu wrapper's background that takes most of the screen when menu is opened.
Side effect of this change - all forcetouched elements will have same color, no option to specify :hover or :active colors (you can see the color is slightly different on the 1st click) and ALL links will have same background:
I imagine you can try setting wrapper's background via JS based on what is clicked. Not sure if that will work. see docs here:
WebKit DOM Programming Topics
So far this seems to me too fragile to touch and I would not recommend doing this. Though you can change this color I've decided to let OS do what it wants here.
I want to increase the transparency of the image and top menu after I scroll and the logo in the header changes to small. Can anyone help?
Here is the site url: https://theportwebdesign.com/
The et-fixed-header class is appended to #top-header when your scroll. I assume a JS script is taking care of this.
To change the opacity add this line to your CSS or modifying existing. You should probably be able to change this is your theme settings somewhere, if not you are most likely going to have to use !important as it looks like most of your CSS is written directly to the screen.
.et-fixed-header#main-header{
background-color: rgba(0,0,0,0.8) !important;
}
The first three numbers are used for color and the last is used for opacity.
You need to change the color value of header (div) from RGB to RGBA onscroll event
<div id="logo" style='width:1024px;height:50px;'></div>
<script>
document.getElementById("logo").addEventListener("scroll", modifyHeader);
function modifyHeader()
{
document.getElementById('logo').style.backgroundColor="rgba(255, 255, 255, 0.3)"; // This is RGBA color value which makes your div transparent
}
</script>
On our site http://reiner-lemoine-institut.de/ueber-uns/team/kathrin-goldammer/, whenever the window is minimized to a certain size, a blue block appears over part of the text.
I have added a screenshot that specifies the exact place within the code that seems to be affected. I am not an expert in CSS or HTML, so I am hestitant to change the code myself:
Apparently though, the problem appears when the div.column_attr = exactly 339.833 x 908. Anything below this size or above it is fine.
I had a play around with your CSS and think I found what your problem is.
.get_in_touch, .infobox {
background-color: #0f3b64;
}
if you remove/comment out this background-color your problem should be fixed.
This is caused by the following line:
.get_in_touch, .infobox {
background-color: #0f3b64;
}
Change to transparent should solve the problem:
.get_in_touch, .infobox {
background-color: transparent !important;
}
Your theme has a custom.css file to put your custom styles in it and is located at: css/custom.css so try to add the above code there.
I have a answer for your question. The following class has a background color in your css file. You can remove thet color if not required in the website.
.get_in_touch, .infobox{background-color: #0f3b64}
Or you can use where inline background image is define i.e in infobox
.infobox{background-size:cover;}
I am trying to inherit the background of breadcrumbs element from the father div through its CSS configuration but I fail.
I was trying to set its CSS to background: transparent or inherit but it fails.
here is a link where this issue happens - the breadcrumbs has grey background while I want it to be white as the reset of the page.
Link to the problematic page: http://doitonlinediy.com/?s=page
Any thoughts/idea why I fail to set it ?
The background color is displayed is set into the body's css
#body {
background-color: #e1dedf;
}
Remove it or replace it and set the background color on your breadcrumb only
while strolling on your website sample I found out that whenever you set your breadcrumb background color to inherit parent's background style it always gives you the grey color. That's because of your body css background.
body.custom-background {
background-color: #e1dedf;
}
Try to change the background and you're good to go.
Your problem is the
body.custom-background
u can do something transparent by using RGBa, Like this..
h1 {color: rgba(123, 88, 9, 0.5);}
the value(123, 88, 9) are using for color, and the value (0.5) is using for transfarent..
So an agency has sent me some code and I coded site with using their method in CSS with changing the opacity to 80% for <p> tags, however my client has picked this up and so much has been built.
I have added in p { opacity(0.8) } and changes paragraph tags to the same colour however I have some titles like <p><strong>text</strong></p> which are also now fading so my question is (without a load of work to change) is it possible in CSS that I make <p> that contain a strong tag use 100% ?
Rough example below:
HTML
<p><strong>test title</strong></p>
<p>test test here</p>
CSS:
p { opacity(0.8) }
However I need to ensure that p > strong remains with no opacity change so 100% in this case.
I know it's a sloppy fix but there's no time to re-do this all or set own classes for colour change on everything.
For example: http://jsfiddle.net/8du1d12o/
No, you can't. If the parent is set to 80% opacity, any child element, at most, will be only 80% opaque. (I would ask why paragraphs are set to an opacity other than 1 to begin with, though...)
One potential workaround is to not use opacity, but RGBA. You could do this:
p { color: rgba(0,0,0,.8) } /* 80% black */
p strong { color: rgba(0,0,0,1) } /* 100% black */
(PS, as stated in my comment, if these are truly titles, the markup should be using header tags--not paragraph tags)
I've looked a bit more into it and it seems like we would need to use a parent selector which css doesnt have :/
you might need to add a class to the paragraph elements or use Jquery to do a special selector to apply your desired styles
I believe the issue has to do with how opacity works, it seems to make everythings inside the div (or whatever level you set it opaque) Therefore I would think that putting the specific span tag like mentioned above would work.
Also note for people how have a similar problem setting backgrounds you can use the code below, it DOES NOT MAKE the text transparent, only the background
background-color: rgba(255, 0, 0, 0.3);
p { opacity(0.8);background-color:red; }
p strong { background-color:blue; }