I'm trying to make the background of all tabs from a TabNavigator completely transparent (via CSS), but somehow I can't get this done correctly.
This is what I've got so far:
TabNavigator
{
tabStyleName: "tabNavTab";
fillAlphas: 0, 0, 0, 0;
backgroundAlpha: 0;
focusAlpha: 0;
borderStyle: none;
}
.tabNavTab
{
fillAlphas: 0, 0, 0, 0;
backgroundAlpha: 0;
borderStyle: none;
focusAlpha: 0;
}
But the tabs still have borders and the inactive tabs still have a tiny gradient from white to transparent.
What am I missing?
edit:
I got it. I have to set the upSkin, downSkin... properties, too!
I always recommend the use of the style explorer:
http://examples.adobe.com/flex3/consulting/styleexplorer/Flex3StyleExplorer.html
Helps me with almost all of my CSS issues.
Related
What's the best way to darken a background image in emails with CSS?
Eg I know usually you can use Filter etc, but I'm not sure if it works across all email providers
If using filter, this darkens the entire email including the 'overlay', and since absolute positioning isn't appropriate it's not a good solution
If using background linear gradient, it works great on many email apps, but some like hotmail won't recognise it since it uses 'shorthand' (background:linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url('my_url')) -is there a way to not use shorthand for this?
There are two common ways:
1) using CSS3:
.yourBackgroundImage {
//halve image brightness
filter:brightness(50%);
}
2) Using overlay:
.yourBackgroundImage {
position: relative;
}
//yourBackgroundImageOverlay is a div inside youBackgroundImage
.yourBackgroundImageOverlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// control overlay alpha by tweaking .5 in background color
background-color: rgba(0, 0, 0, .5);
}
I'm working on a Gtk3 application. Therefore I designed the window on Ubuntu with Glade 3.16.1.
I have a GtkWindow layout with a vertical seperating GtkPaned. Loading a CSS file I give the window a background image like this:
GtkWindow#window {
background-image: url("Glade Prototype/background.png");
}
But It seems like the layout component is drawn on it with a solid color and so the background image is only partially visible. You can see it
here
My first try was setting the background color of the layout transparent, but it didn't changed anything (Any other color works):
GtkPaned#mainLayout {
background-color: transparent;
/* OR: background-color: rgba(0, 0, 0, 0.0) */
/* OR: background-image: none */
}
Thanks for help,
Greetings Thomas
PS: Does anyone have a Glade version for Windows supporting Gtk3 (+CSS)? I only found Glade 3.8 (CSS supporting versions are e.g. 3.16 / 3.18) on their website.
Edit: Here a better example for this problem:
GtkWindow#window {
background-color: #00FF00;
}
GtkPaned#mainLayout {
background-color: rgba(255, 0, 0, 0.5)
}
-> Image with Alpha 50% / 0.5
You can see that it looks like a mix of red and white color. But i want that white color to disappear.
Edit2:
I've also tried overriding the draw function and drawing a transparent rectangle with Cairo -> No success. My code:
G_MODULE_EXPORT gboolean drawMainContainer(GtkWidget *widget, cairo_t *cr, gpointer data) {
guint width, height;
GdkRGBA color;
width = gtk_widget_get_allocated_width (widget);
height = gtk_widget_get_allocated_height (widget);
cairo_rectangle (cr, 0, 0, width, height);
gtk_style_context_get_color (gtk_widget_get_style_context (widget),
0,
&color);
cairo_set_source_rgba (cr, 0, 0, 0, 0);
cairo_fill (cr);
return FALSE;
}
Is it possible to style or color the window pane background of the browser?
When scrolling beyond the edge in Chrome and Safari on Mac,
the whole page is pulled a bit down and/or sideways.
It shows a basic canvas style of texture,
is it possible to style that region (with CSS) ?
Edit: i found a (crude) way to prevent the overscrolling entirely,
but i'm looking for a way to set a color or texture, to match the overall design.
Prevent "overscrolling" of web page
probably this is not needed anymore but maybe someone else wants to do the same :D
this should put a background-color on the overscroll-area of any ios device
body:after {
content: '';
position: fixed;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
z-index: -1;
background: #000000;
}
here is the link to my gist
Unfortunately this is not possible. This is part of the application (Safari) and can not be styled with webpages.
Set the body colour body {background-color: white} should work.
More complex, if you need to change the overscroll colour, while leaving the body colour white (only tested on iOS10.3 Safari). I did the following using a 1x1 white pixel:
body {
background-color: rgba(0, 0, 0, 0.4);
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==);
background-size: 100% 100%;
}
FYI 1: three other things I tried that didn't work for me were: outline: 100px solid rgba(0, 0, 0, 0.4);, box-shadow: 0 0 0 100px rgba(0, 0, 0, 0.4);, and background: #FFF, rgba(0, 0, 0, 0.4);.
FYI 2: I recall that really old versions of Safari needed the colour set on the html element.
You can now do this with a meta tag:
<meta name="theme-color" content="#923941">
I am working on a new theme for a wordpress site, http://hanahanpolice.com/test/ when I hover over the items the background is gray on some. This only happens when I am on the main page (/test) any other page I do not see the gray. I can not find where this color is coming from. Can anyone help?
Look for this class:
.front-page .menu .current_page_item a {
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: none;
}
And remove:
background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
In your style.css at line 1308 remove background from this class:
.front-page .menu .current_page_item a{
}
And btw, you can always use for problems like this FireBug for Firefox or with IE developer tools - just press F12.
I have almost invisible text on the webpage with opacity: 0.1;
I want it to become visible when selected.
However, the selection is also almost invisible.
Unfortunately, ::selection doesn't change the opacity.
You won't be able to use the opacity property with ::selection. It was never one of the allowed properties, and even if it were implemented, it wouldn't make sense as you're not modifying the opacity of the element itself anyway.
You can use rgba() colors with the text and background rather than opacity on the entire element instead. It's not the ideal workaround, but it works at least for colors:
body {
color: rgba(0, 0, 0, 0.1);
}
::-moz-selection {
color: rgba(0, 0, 0, 1);
}
::selection {
color: rgba(0, 0, 0, 1);
}
<p>Almost invisible text that turns opaque on selection.
Instead of using opacity, just set the alpha in the rgba color like so...
::selection {
background: rgba(255, 255, 0, 0.5)
}