I am designing a QGIS plugin. I am struggling to make the outer region of the UI to be grey (see image).
The QT file is:
A reference UI that I want to make my UI look like, all non-functional space is grey:
You simply need to add a stylesheet to your plugin. Right click on your widget and select 'Change stylesheet'. Add this stylesheet for turning your QTabWidget to grey.
QTabWidget {
border: 0px transparent black;
}
QTabWidget::pane {
border: 1px solid #76797C;
padding: 5px;
margin: 0px;
background-color: #D3D3D3;
}
Related
I believe, according to this stackoverflow answer, that WCAG 1.4.11 "Non-text Contrast" is intended for things like checkboxes, radios, etc. However, :hover is specifically mentioned, so I would like to clarify what I should do.
I have a button with a :hover css rule that changes the color property from #181B25 to #074ADF. Both colors have greater than 3:1 against the background color. However, against eachother, they have a ration of 2.49:1. Does this mean I am not meeting WCAG 1.4.11, as this :hover rule indicates the state of the button component changing?
No you are fine, technically there is no requirement for the contrast to change at all when hovering.
There is a full conversation about this on GitHub
Which relates to this piece of guidance:
This Success Criterion does not require that changes in color that differentiate between states of an individual component meet the 3:1 contrast ratio when they do not appear next to each other. For example, there is not a new requirement that visited links contrast with the default color, or that mouse hover indicators contrast with the default state. However, the component must not lose contrast with the adjacent colors, and non-text indicators such as the check in a checkbox, or an arrow graphic indicating a menu is selected or open must have sufficient contrast to the adjacent colors.
Source: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
As long as both states have sufficient contrast against the background and surrounding items it will pass WCAG.
If you think about it it makes sense, otherwise to create a AAA level button would require a contrast ratio of 4.5:1 with the background and then a further 4.5:1 contrast with the non-hovered state. That would mean all buttons would have to be practically black (or white if you had a dark background on the site) when hovered in order to match both criteria.
But WCAG isn't the end of it!
There are a few things you can do to improve accessibility (you don't have to stop at compliance, you can aim for "wowing" people who benefit from accessibility).
First thing is first, use cursor: pointer. This signifies something is clickable and it is now widely accepted that this is an acceptable / beneficial use.
The second thing you can do is use slightly different indication methods for hover vs focus.
So for example you can use border and outline in conjunction with each other to show the states of hover, focus, hovered and focused:
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
outline: 2px solid #333;
outline-offset: 2px;
}
<button>Test button</button>
Alternatively a neat trick instead of using outline is to use box-shadow. The advantage is it works for curved corners:
button{
background: #000;
border: 2px solid #fff;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 2.25rem;
font-size: 1.5rem;
margin: 2rem;
}
button:hover{
border: 2px solid #333;
}
button:focus{
box-shadow: 0 0 0 2px #fff, 0 0 0 4px #000;
}
<button>Test with curves</button>
I don't like the stacked option as it needs a lot of white space
If having two different indicators doesn't work for your design you can just have different states (and give priority to the focus state).
button{
background: #000;
color: #fff;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
border-radius: 0.25rem;
font-size: 1.5rem;
margin: 2rem;
border: none;
}
button:hover{
outline: 2px dashed #333;
}
button:focus{
outline: 2px solid #333;
}
<button>Different border styles</button>
Use your imagination! You could make the button shrink by a couple of pixels on hover (assuming it is implemented so it doesn't cause a layout shift), change the text style, but grow on focus, change the background to a pattern depending on state (but be careful with that one) etc.
Quick Tip: You will see that I made my buttons black and white. I find this is a great way to test / prototype different states.
When we have multiple images in the blog and if we click any of those images, blogger enlarges that image. When we click the enlarged image, it shows next enlarged image, and so on.
Is there any way to customize appearance of the enlarged image? At the moment, my image in blog is shadowed (I am using 'box-shadow' style) but when it enlarges its without shadow.
I tried putting 'box-shadow' style in 'href' but no luck.
Well, I found the answer on my own. Just putting here in hope it will help someone coming here.
The images in blog enlarged after clicking, and displayed one by one is done by Blogger's Lightbox feature. We can customize the enlarged images (e.g. we can make them round cornered, put shadow to them etc.) by doing this:
Go in bloggers HTML editor of template
Search using CTRL + F the tag < /head> (No space between '<' and '/')
Just above the tag, add the following code:
<style>
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 11px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 3px 3px 7px #888;
}
</style>
For more details please refer this:
http://helplogger.blogspot.in/2013/03/how-to-customize-bloggers-lightbox.html
Is it possible to disable animation of the progress bar in Qt and make it behave like a meter instead?
Below is the default behavior, and I would instead like it to not have the shiny wave go through it periodically. I was hoping to use it to show used resources such as CPU, memory, and disk space.
css for use in qt designer:
QProgressBar::chunk {
background-color: #3add36;
width: 1px;
}
QProgressBar {
border: 2px solid grey;
border-radius: 0px;
text-align: center;
}
pyqt example:
my_progress_bar = QProgressBar()
my_progress_bar.setStyleSheet(" QProgressBar { border: 2px solid grey; border-radius: 0px; text-align: center; } QProgressBar::chunk {background-color: #3add36; width: 1px;}")
It looks like the progress bar you are using is the Windows Vista look. You should be able to modify the behavior by changing the stylesheet. Try replacing the background, image of the progressbar and/or the chunk.
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.
I'm doing some stylistic text inside of rounded divs, where the text bumps right up against the top of the container. I've been able to control almost all content, nested divs, images set as backgrounds, etc, and had them all clip successfully, but this one has been giving me serious grief.
Using the old-school image borders or cover-ups is not a solution as we have dynamic graphical backgrounds. We need a solution to actually clip the text.
This is mostly visible in Firefox 3.x and older versions of Chrome
Here's the sample code to play with:
http://jsfiddle.net/vfp3v/1/
div {
-moz-border-radius: 45px;
border-radius: 45px;
background-color: #ccc;
font-size: 100px;
color: #777;
line-height: 70%;
overflow: hidden;
width: 257px;
}
the jank:
Notice it's been fixed in the new Chrome and FireFox 4 - the shui:
Most of our site users are Firefox 3.6, so would love to be able to provide an elegant solution for them as well. Any help appreciated! Cheers
This one works in FF 3.6: http://jsfiddle.net/vfp3v/15/
It has some drawbacks, as you can see in the second example (in FF 3.6) the clipped off border has a solid color, so if you are using some kind of background this might look ugly. Just take a look at it, it might fit your needs.
I just added a span:
<div><span></span>WXYZ</div>
and then positioned it over the text with a border in the same color as the background, and a displacement as big as the border:
div{
position:relative;
etc...
}
span{
position:absolute; display:block; width:100%; height:100%;
border:25px solid #fff; top:-25px; left:-25px;
-moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */
}
edit: just tested this in chrome 10.0.6 (which has the clipping bug) and it worked!
In browsers that correctly support the border-radius the span (and it's border-color) isn't even visible because it is clipped off (overflow:hidden).