Whenever the orbit slider finishes loading, png images and the text appear to have black backgrounds instead of transparancy...
I have tried using !important tags by setting the background and the color properties, but to no avail. Image attached. Any help is appreciated!
In your orbit.css change this
#featured {
background: #000 url('orbit/loading.gif') no-repeat center center;
}
to this
#featured {
background: rgba(0,0,0,0) url('orbit/loading.gif') no-repeat center center;
}
Related
Image of QFrame issue:
I am putting a frame around the window and my window is having a scrollbar (vertical scrollbar only).
I have set the QFrame styling as
QFrame {
border: 8px solid gray;
}
and for styling of scrollbar I have used customizing-qscrollbar.
Now I am seeing that there a white line at the bottom of the scrollbar next to the down arrow. The same line is not there above the up arrow of scrollbar.
Seems like a corner widget was causing the above issue.
Since i found the fix, i would like to share.
QAbstractScrollArea::corner {
background: none;
border: none;
}
I'm trying to change what I would call the footer background color where the google-visualization-table-page-numbers go. I would like the background color to extend the entire width of the table. I am hoping someone can help me find the correct solution.
since the chart uses a gradient, use css background to change to a solid color
.google-visualization-table-div-page {
background: magenta !important;
}
to keep the gradient and only change the color, use css background-color
.google-visualization-table-div-page {
background-color: magenta !important;
}
Say I have a button like this:
<button>Some Text</button>
And by default the stylesheet has the text as black.
I then have this css:
button {
transition: color 0.15s ease-out;
color: rgba(255,255,255,0.75);
}
button:hover {
transition: color 0.15s ease-out;
color: #fff;
}
The goal is to subtly fade from a grayish off-white, to white, on hover, and then back again to normal button appearance on hover off.
The problem is when i firstly load the page, the black initial color of button is overwritten by the transition that i applied on button, and one can briefly see black text fading to off-white.
How do I make it so that the initial state just loads without animation? Or more precisely, is there a way to achieve something like :hover-off to control the animation only when the hover state turns off?
Sorry i have less reputation to comment. Your animation does not work, please explain clearly what you want to do?
are you trying to achieve this.
button:hover {
transition: 0.5s ease-out;
color : white;
}
If you have to load some JavaScript, you can put it in the <head> after your CSS. Kind of a hack, but it works.
HTML parsing is blocked by <script> tags that initiate requests for external resources. I guess CSS animations won't start until the <body> has been fully parsed and that's the reason this works.
QTabBar has a 1px border that separates tabs from their content.
QTabWidget::pane { border:1px solid #C4C4C3; }
I want the border to disappear under selected tab, like it's done in all browsers and most of applications using tabs.
However, setting styles for QTabBar::tab doesn't help:
QTabBar::tab:selected { border-bottom-color:white; }
So how can I achieve this?
That line is controlled by the top border of QTabWidget::pane.
For example:
QTabWidget::pane { border: 1px solid #C4C4C3; top: -1px; }
would move the line behind/under the tabs (somehow using top alone seems to remove the border completely).
i need to get this little gray rectangle (red circle) to be displayed both on top n bottom of a div that coitains thumbnails (btw this div might aswell cointain 2 or 3 rows of thumbnails)
Picture:
here is my code for how it looks atm:
.jq_thumbnails {
background: url("/site_media/static/coffee_small_top.png") top left no-repeat;
overflow: auto;
height: 100%;
}
Is it possible to achieve this effect easily? I thought of making ifequal tag that would check the length of thumbnails list and use a certain background picture accordingly, but maybe it is possible to achieve this using html/css only?
You can leverage CSS3 Multiple Background Images:
.jq_thumbnails {
background-image: url(../images/bg-top.png), url(../images/bg-bottom.png);
background-position: 0 0, 0 bottom;
}
Set the background-repeat property to suit your particular scenario:
background-repeat: repeat-x, repeat-x;
This is supported in all current versions of the major browsers:
Of course you can make an outer div and an inner one that covers the background, so you can repeat-y the background ;)