In Xul, how to get rid of the popup's background color and make it transparent? - xul

To make a window transparent, I just don't use the "window" tag. I use a "myWindow" tag, so it don't show the default window background.
But how do I do with a popup dialog?

To make an element transparent, setting background-color: transparent; and/or -moz-appearance: none; normally suffices, it's not necessary to fiddle around with non-standard tag names.

Related

Positioning in Slimbox

Slimbox is working perfectly for me with one exception... my slideshows often open way to low. The positioning is effected by any scrolling already done on the page. Every time the page is scrolled a bit, the slideshow opens lower than it had previously for the same page. Scroll down the page much and the show can be completely out of sight.
lbCenter and lbBottomContainer in the CSS control the positioning, but I can't find how to adjust them accurately. The default is:
#lbCenter,
#lbBottomContainer {
position: absolute;
z-index: 9999;
overflow: hidden;
background-color: #fff;
}
In an old thread here, I found suggestion for adding:
top: 30px !important;
As long as !important is included, this does work but with a significant caveat; the caption is moved from below to above the image and covers some of it. ( And !Important doesn't seem like an ideal solution )
How can I adjust the positioning of both while keeping the caption below the image?
This one was on me. My links included href="#" as some others required. The # caused the page to scroll to the top even as the slide show opened where the link was located.
<a href="#" onclick="show('homes')">
Eliminating the hash tag resolved it.

Bootstrap Nav issue

I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.

bootstrap - how to add background color for all the screen width when using containter

I need to use container (and not container-fluid) , but I still need to add background to all the remaining background( the background color differ from container to container). any idea how to do it?
thanks!
Your question is not pretty clear.
I will answer according to my understanding.
There should be only one container in the web application. Because it comes with fix width(not in %) i.e. 1170px/970px/750px.
So there should be only one to contain the website.
Now the only background out of container can be styled with the body tag.
body{
background-color: #ddd;
}

PyQt Scaling background image using styleSheet ? or any other way?

I'm trying to resize a background image on a button
btn.setStyleSheet("background-image: url(:/AddButton.png);"
"background-repeat: no-repeat;");
tried it with
background-size: 10px auto;
but pyqt seems to be missing this CSS attribute
Is there any other way of scaling the background image on the button?
I need the background image as the icon on the button will be used on top.
any suggestions?
I believe you need to use border-image. Since the border-image property provides an alternate background, it is not required to specify a background-image when border-image is specified. In the case when both of them are specified, the border-image draws over the background-image.

Placing an image from the sprite in the specific position

Let's say i have a sprite with lots of icons. I want to place one of the icons in the specific position over the div, e.g. 15px from the right side and 20px from the top.
Previously, when i had single image file i used the following code:
background: white url(./imgs/some/icon.png) no-repeat 91% 47%;
Now then the image is in the sprite i can access it using
background-position: 0 -471px;
But as i see it there is no place to add my current 91% 47%. Is there some kind of workaround?
It's possible to use CSS3 in the project if it helps.
Thanks!
Would you be able to add another <div>, give it the correct background, and absolute position it where it needs to be? I'm thinking that your background-position percentages are probably out when you use a sprite sheet.
If I understand your set of constraints correctly, you might be able to pull it off with a single div, but only if your png has a transparent background and the icon has enough "transparent space" as to not reveal any other icons.
Try:
background: white url(./imgs/some/icon.png) 91% 47% no-repeat, transparent url(./imgs/some/icon.png) 0 -471px no-repeat;