Okay what I am aiming for is a way to set the background color of a QGroupBox without overwriting any other styles that might be set on that object before.
Intuitively I'd use a QPalette for doing this but since my application is using stylesheets, I can't use palettes (using them just has no effect whatsoever).
Thus I am left with setting the background color via stylesheets. If the only style I want to set this was the background color, that'd be easy:
myBox->setStyleSheet("background-color: red;");
This however will overwrite all stylesheets that have been set on myBox before this call. In my case I am setting the font-size at a different place but on the same object and also via stylesheets.
So the next idea is to append to the existing stylesheet like this:
myBox->setStyleSheet(myBox->styleSheet() + " background-color: red;");
That's working so far, but the problem is that I want to change the background color rather frequently (not only once or twice) and while using the above method for the successive color changes (provided I append to the the stylesheet instead of prepending to it), it makes the stylesheet continually grow larger and larger. Furthermore I'd eventually be setting the background color hundreds of times in one and the same stylesheet just so I can have the currently active color as the final value. Parsing this seems like a huge waste of computational resources.
I am therefore looking for a way to change the background color of my box only. The method must preserve all attributes that are currently set in a stylesheet on my object (except the background color of course) and should not make the stylesheet grow to infinity without actually adding new information to it. And ideally the solution is not cascading the background color to children of my box.
How is something like this usually handled within Qt?
A possible solution that I could come up with would be to create a wrapper around the QGroupBox and introduce the style attributes I want to set on it as member variables and then creating the stylesheet based on the values of the member variables each time any of them changes.
This seems like a solution that doesn't scale very well and to me it seems like there should be a standard solution to this that doesn't require manually creating such wrappers every time...
You can have a selector like on CSS, example below:
QGroupBox { background-color: #fbca10;}
Or if you want more specific you can have the accessibleName as the selector also, example:
QGroupBox[accessibleName="mybox"] { background-color: #fbca10;}
the accessibleName is property on QWidget. You can set it on qt designer or by code.
My app features a progress bar which background and thumb Image need to be changed. I found that the thumb image could be changed via a constant in the designer but which I could not find in the #Constants paragraph of the page on CSS selectors.
I tried to change the slider UIID to the one I created in the css file like this
MyStyle {
background-image: url(pics/whatever.png);
cn1-background-type: cn1-image-scaled-fit;
cn1-source-dpi: 320;
}
but only the image appears I can't see the progress indicator (eg mySlider.setProgress(50)).
Can it be done and if so how ?
Please note : I read mission 2 of CN1 bootcamp about CSS styling but could not find slider styling.
EDIT September 18th 2017
Following Shai's advice, I set the MyTheme and MyThemeFull with different background images. Indeed MyTheme is always drawn completely in the background and MyThemeFull is drawn bit after bit while the progress is increasing. So when the progress reaches 100% MyThemeFull background image is shown completely.
The cursor (thumb) image can be set via Slider.setThumbImage().
Any help or links to resource material appreciated ;-)
Slider has two UIID's: Slider & SliderFull. Which are drawn one on top of the other to produce the slider effect.
If you change the UIID they become MyStyle & MyStyleFull and you need to customize both.
I am trying to place two svg files side by side in a web page. This I have done using susy to create the spans, first one is 2 columns wide, the second 10 columns. I place a narrow bar graph in the first span, and a wide line graph in the second span.
The problem I am having is scaling the graphs. they look like this:
But I want them to look more like this:
They are svg files generated with pygal and I achieved the second image by forcing a size in pygal, but it's not elegant and fails wehn the screen size changes.
How can I make the svg bar chart scale the height without scaling the width and do it dynamically in a web browser instead of manually changing the size in pygal? I also cant manually edit the svg files as they are generated via another system and update frequently.
Your graphs should load in two different divs, so that you can set a different width style for each, depending on a view-based css class (like col based classes in Twitter Bootstrap). If you load dynamic svg's (without any explicit_size setting in Pygal) you should be able to handle different window sizes.
Ever since I added a iFrame module to my website my main ContentPanes styling has changed.
The changes include a loss of padding to the main ContentPane and only on some pages I have lost the background colour of the main ContentPane(it should be gray buts its transparent instead). I didn't edit these individual pages so I assume its because of the iFrame module?
Why does this happen and how can I readd my padding and background colour to the main Content pane without having to edit each individual page?
Note: I have since removed the iframe module but that hasn't fixed the errors with the ContentPane.
EDIT: Link to padding error (Nowtice how the "12d Model Skilled Migrant Training for 2012" Div has no padding)
EDIT: Link to background error (Notice how the "64bit Computers, Windows7 and 12d Model" has no gray BK)
On the first example, there is no padding in the CSS - you will have to actually apply padding to the template. Looks like you are using inline styles for this? So just give it style="padding:20px;" or whatever you want there.
On the second one, the background style is missing. On the first one, it has style="background-color:#f3f3f3;" - you just need to apply the same thing.
I have used 960gs to get a first version of some pages going (I am not the designer, but would like to have an approximate layout before handing it to one). It has helped me greatly, but now I am wondering if there is a CSS grid framework where the columns will expand/shrink to make use of all available space in the browser window. Using a 960 pixel top-level container in 960gs, even in my humble 1280-pixel-wide screen there are large empty bands on both sides.
Are there alternative grid systems where I can define a certain column to "grow" if the browser window is larger than expected?
Many thanks!
lara
There is a Fluid 960 Grid System too.
See this ala article on fluid grids and example. Also see this example.
I'd use Unsemantic it's from Nathan Smith who developed 960.gs.
Either that, or you can customize Twitter Bootstrap so that you only take the responsive grid and leave out all the other features that might be unnecessary for your project.
Try the Dead Simple Grid. You can set the columns to have fixed or percentage widths. Setting to percent will dynamically fill the available space. It is very simple (the entire css code is 250 bytes!) but surprisingly powerful.
Cascade Framework's grid system can do exactly what you want... and lots, lots more.
If you use the tag <div class='site-center'></div>, you get a centered div with a fixed width for desktop (width is different depending on browser width) and the full available width for mobile. You can, however, just drop that tag and use the full available width on desktop as well. See this website as an example of an implementation thereof.
The grid elements themselves are percentage based. That means that they fill up a certain percentage of the available width. Out of the box, Cascade Framework's grid system supports 60%/40%, 25%/75%, 33.33%/66.66%, 20%/20%/20%/20%/20%, 43.75%/31.25%/25%, 30%/30%/40% and far more combinations. In fact, you can even use combinations like 42.8571429%/{fill to 100%}, {fit content}/{fill to 100%} or {fit content}/30%/{fill to 100%}.
To be able to use Cascade Framework's grid system, I recommend you use either the file 'build-full.min.css' (about 8kb minified + gzipped) or the file 'build-full-no-icons.min.css' (about 10.8kb minified + gzipped) in the folder 'assets/css/cascade/production, depending on whether you want to include support for its icon set. You can also create your own build and pick only the modules you want. For the sake of brevity, I'm skipping details on how to do that. If anything isn't clear about creating your own build and you'd like to know more about this, please send me a PM to avoid derailing this thread by going too far off-topic.
A grid element in Cascade framework is either
One of the following HTML elements : section, main, article, header, footer, aside or nav (these elements are polyfilled with the HTMLshiv for old IE in case you need it).
A div element with a 'col' class (can be used in old IE without a polyfill).
To add a width to a grid element, you add a class of the format 'width-XofY', where Y can be 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 16 or 24 and X can be any value lower than X.
More concretely, here are some examples of valid classes you can use in Cascade Framework : 'width-1of2' (width : 50%), 'width-3of4' (width : 25%), 'width-2of5' (width : 40%), 'width-2of5' (width : 40%), 'width-2of7' (width:28.5714286%) and 'width-13of16' (width:81.25%)
Additional to these classes, you can also use the classes 'width-fit' and 'width-fill' that respectively fit to content and fill whatever remains of your 100% width. Or, you could just define your own classes and IDs and just add a custom width for those classes to do things the 'semantic' way.
If your builds include the responsiveness module (which is the case for the recommended builds), the width of all grid elements automatic resets to 100% on mobile. You can use classes like 'mobile-width-3of16', 'phone-width-3of7' or 'tablet-width-2of4' to customize the layout for different width ranges and the classes 'desktop-hidden', 'mobile-hidden', 'phone-hidden' or 'tablet-hidden' to hide content for a specific screen with range.
See also http://www.cascade-framework.com/grid.html and http://jslegers.github.io/responsiveness/ .