<style is="custom-style">
iron-overlay-backdrop {
--iron-overlay-backdrop-opacity: 0.7;
--iron-overlay-backdrop-background-color: black;
}
</style>
This method set the overlay's opacity and all their childs. And if I want to set childs' opacity? I want 1 to (child) dialog's opacity
.dialog {
opacity: 1;
}
related question
I'm not sure I understand your question, but let me try this: If you wish to style the overlay for a particular dialog, you do so on the body of the page that holds the paper-dialog, as you can see in this pen. The CSS used is
body {
--iron-overlay-backdrop-opacity: 1.0;
--iron-overlay-backdrop-background-color: red;
}
While the paper-button and the paper-dialog are in another custom element, this approach works if both elements are instead in a plain HTML page. Look at how I'm handling a general error dialog in my app. If I put the CSS above on that page, it would work like the pen.
Related
So the final result I am trying to achieve is only show .panel-text when user hovers over panel. In this case I tried the overlay CSS class, since it covers the entire div. Yet whatever I do either the text doesn't show at all no matter hovering or idle or the text is displayed always. Below is what I have tried.
.panel-text {
display: none
}
.panel-overlay:hover .panel-text {
display: block
}
The above only hides .panel-text always. Another attempt at it is below:
.panel-text { opacity: 0; }
.panel-overlay:hover panel-text { opacity: 1; }
Now I have attempted to try .panel-title as well .panel-button .
Any help is greatly appreciated, all other posts shown display what I have been using. Even if we have to display an icon when .panel-text is hidden could work out.
Somwthing link this is what should happen
Link
Do it in this way.
.panel-text {
visibility: hidden;
}
.panel-overlay:hover .panel-text {
visibility: visible;
}
So for some reason nothing was working when trying to use with .panel-overlay, so trying the image wrapper did the trick. Using visibility or display will not perform correctly still. Below CSS worked out, works exactly example provided (link) except icon, will work on that later.
panel-text { opacity: 0; }
panel-mainimage-wrapper:hover .panel-text {opacity: 1; }
I have an element that overlays another element. The main element is a canvas where elements constantly have mouse interactions and the element directly overtop of it just shows elements that act as little markers. Same position, same size and it's important the overlay is overtop of the canvas.
What would it mean to make this "overlay" only exist visibility wise? As in having no possible user input because for its purposes it's not really there to be interacted with, just showing something.
Removing selection in CSS stops you from clicking on it but it's still overtop of the other element and doesn't allow mouse events. Hiding the element removes its presence but also makes it invisible.
In a normal desktop application you would just draw something to the screen and add functionality if you wanted but with HTML those two things are inherently the same.
I believe adding in the CSS the following code solves your issue:
.no-interaction {
z-index : -5
}
OR
.interaction {
z-index : 5
}
Turns out all it took was setting the pointer-events CSS attribute to none on whatever you want to have no presence.
I figured it would be a little more interesting than that, but there's a built in way in CSS.
<div id="canvas"></div>
<div id="overlay"></div>
#canvas, #overlay {
width: 500px;
height: 500px;
position: absolute;
}
#canvas {
background: blue;
}
#overlay {
background: red;
pointer-events: none; // right here
}
$('#canvas').click(function() {
alert('Clicked');
});
https://jsfiddle.net/ufsy33aw/
I have a site where I set the background image and color of the body tag via CSS. I hide it with the inline style display: none; so that optimizely has time to run and do any customizations without causing a flicker. This has worked till recently when the flicker came back but we haven't changed anything that seems related. I was debugging it and saw that in Chrome (Version 45.0.2454.101 (64-bit)) the background image and color are still displayed even though the body is display: none;. In firefox, safari, and IE11 the background is not displayed.
Here is some code to illustrate the issue:
<html>
<head>
<style>.background { background-color: red; }</style>
</head>
<body class="background" style="display: none;"></body>
</html>
I googled but couldn't figure out why. Any ideas?
To be clear the question is about why this happens on the body tag. I am open to alternate ways to hide the background image but wont consider them the answer.
Per the W3 CSS2 spec,
For HTML documents, however, we recommend that authors specify the
background for the BODY element rather than the HTML element. User
agents should observe the following precedence rules to fill in the
background: if the value of the 'background' property for the HTML
element is different from 'transparent' then use it, else use the
value of the 'background' property for the BODY element. If the
resulting value is 'transparent', the rendering is undefined.
According to this, if you set a background-color or background-image on the body, but don't set a background-color other than transparent on the html, then the html will use the body's background. So when you hide the body, the html will still be using it's background.
DEMO
var hideButton = $('#hide-body');
var toggleBGButton = $('#toggle-html-bg');
hideButton.on('click', function() {$('body').hide()} );
toggleBGButton.on('click', function() {$('html').toggleClass('bg')} );
html {
background-color: transparent;
}
html.bg {
background-color: orange;
}
body {
background-image: url("https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
background-color: blue;
}
body.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="hide-body">Hide body</button>
<button id="toggle-html-bg">Toggle <html> background-color</button>
I am redesigning a wordpress blog.There are 5 different pages and i want to use different background images on each of them. Is there any way to do this?
And,i don't want to change the background element. I want to change the background image of the #main element in my css..
I already have a css file so will overwriting the same elements using php affect anything?
Any help will be appreciated...Thanks
Each page or post will have a different class on the body, ie.
page-id-1234
post-id-4567
You can use this to your leverage inside your CSS file:
body {
background: url('home.jpg');
}
body.page-id-1234 {
background: url('page-1234.jpg');
}
body.post-id-4567 {
background: url('page-4567.jpg');
}
You could give each div#main (I assume it's a div) another class. So
<div id="main" class="pageOneBackground">...
<div id="main" class="pageTwoBackground">...
etc...
Then remove the background-img from the div#main and apply individual background-imgs to each new class.
This won't affect the php.
You can change the background with CSS/URL of image to apply to only the background of the post, only on the background of the home/main page, or both pages. http://wordpress.org/plugins/custom-post-background/screenshots/
If only only need to do it for 5 pages, set the main items of the body in your main CSS, for example:
body {
background-repeat:none;
background-position: center top;
etc...
Then on each page just add:
<style type="text/css">
body {
background-image:url(/images/background1.png);
}
</style>
You can also see this on the source of this page.
Some text
.sliderPart {
width: 25%;
height: 100%;
}
.sliderPart a {
display:block;
position:relative;
text-decoration:none;
height: 100%;
font: 1.3em Arial, Sans-serif;
}
How can I make my link clickable for all div-area?
The easiest thing is to remove the div altogether:
<a href="#computers" class="sliderPart">
<strong>Some text</strong>
</a>
a.sliderPart {
...
}
Try this:
$(".trigger").click(function() {
window.location = $(this).find("a").attr("href");
return false;
});
..you'd also need to give cursor: pointer to the clickable element.
Put the link outside the div. You can make an anchor tag act similarly to a div. Like you're doing in the css you posted.
For dropdown lists, I use the following method a lot...
If you're not opposed to using scripts, you can make the div itself a proxy of sorts, so that if you click anywhere on the div, the first link within that div is subsequently clicked automatically.
$(".sliderPart").bind("click", function(){
$("a:first", this).trigger("click");
});
Of course you would want to update your styles for the div when you mouse over it to indicate the entire thing is clickable.