I'm creating a Qt application with some web pages loaded on QWebViews and also some plain QWidgets, all inside a QMainWindow. Both the webpages and widgets are going to have some checkboxes here and there, and I'd like them to look the same. Well, at first they DO look the same, because they inherit their style from the native theme engine, but I'd like to define a new CSS style for both.
I tried some things like
QCheckBox::indicator:unchecked {
image: url(:/image/checkbox_unchecked.png);
}
but that only works for checkboxes inside my QWidgets.
I also tried some plain CSS style, but then they only apply to webpage checkboxes.
So, is there a way I could design a single CSS style for checkboxes and apply it to all sorts of checkboxes inside my application?
For the record, I could achieve exactly that when it comes to text selection. I set the main window stylesheet to
*{
selection-color: #363636; selection-background-color: #bfebeb;
}
and both web page and qwidget selections followed this style.
UPDATED
change your code to
QCheckBox:!checked {
image: url(:/image/checkbox_unchecked.png);
}
QCheckBox:checked {
image: url(:/image/checkbox_unchecked.png);
}
http://harmattan-dev.nokia.com/docs/library/html/qt4/stylesheet-syntax.html
Related
I want to change my kendo ui theme from default. The problem is it changes but only for controls: grid etc. but charts stay exactly the same.
I'm adding this styles in the bundle.
bundles.Add(new StyleBundle("~/Content/kendoUi").Include(
"~/Content/kendo/2016.1.112/kendo.common.min.css",
"~/Content/kendo/2016.1.112/kendo.mobile.all.min.css",
"~/Content/kendo/2016.1.112/kendo.metro.min.css"
));
Am I missing something ?
I was struggeling with the same thing today. For some reason, the Theme of a chart must be set via widget configuration.
From the Documentation of the Kendo Client Library:
The Kendo UI Chart widgets come with a set of predefined themes. Use
the theme option to select a theme, as demonstrated in the example
below. The theme name is case insensitive.
$("#chart").kendoChart({
theme: "blueOpal",
//...
});
There is no documentation for the Server-Wrappers. However, it will work this way:
#(Html.Kendo().Chart().Theme("blueOpal"))
The reason for this, seems to be explained here:
Kendo UI Gauges, Charts, Barcodes, Diagrams, and Maps use a mix of
browser technologies to attain the required precision and
responsiveness. Visualization is rendered as vector graphics with
computed layout. In contrast, interactive features are built using
traditional HTML elements. As a result, the appearance settings of
these widgets are split between declarative options and traditional
CSS.
If you want to do it globaly, you need to override kendo:
var themable = ["Chart", "TreeMap", "Diagram", "StockChart", "Sparkline", "RadialGauge", "LinearGauge"];
if (kendo.dataviz) {
for (var i = 0; i < themable.length; i++) {
var widget = kendo.dataviz.ui[themable[i]];
if (widget) {
widget.fn.options.theme = "blueOpal";
}
}
}
I am trying to write a program that will use a tabbed document interface (TDI) like seen in Notepad++ or most web browsers. I know how to build GUIs using Qt Designer, and code in Qt C++ (after a few days of playing around).
I have created an example of what each page widget will look like using Designer, and now I want to add the ability to create and testroy tabs at runtime, each containing a unique instance of the page widget. However, I have no idea how to do this without adding a class that extends QWidget, and building the page widget with code. I could go down this route, but I'm sure there must be a better way of creating a TDI; but I can't find any tutorials or examples of how to do this.
Does anyone have any suggestions?
For creating tab interfaces you should look into QTabWidget.
It is a container widget included in Qt Designer which automatically handles operations on tabs. It has several build in methods for manipulating its tabs and theirs contents.
Each page of QTabWidget is handled separately and can have different layouts and functionality.
If you want to include several different objects to one page assign a layout to it and then assign the objects to the layout.
I have html in a QString, what widget can I use to display it?
(QWebView is not necessary as I dont access Internet)
QWebViews setHtml():
The QWebView class provides a widget that is used to view and edit web documents.
In Qt QWebView is the widget that renders pages for you - if you don't need the networking features it provides, simply don't use them.
Depending on what HTML tags you are using, you might be able to get away with a QTextEdit. It has support for most of HTML, including tables and images. Take a look at the docs and see if it fits your particular needs.
If you need something more advanced, then you will have to use the widgets in QtWebKit.
I am using QT 4.3. I have created one custom widget plugin. I could be able to show it in the desiner tool box as well as use it on the form with no problem.
This custom widget internally holds QGroupBox, QLabel, QTextEdit.
Now I want to apply the styles to individual componets of this custom widget.
I want to expose these internal conrols as sub-control and style them. This would be similar to tear subcontrol of QTabWidget. In style sheet we can refer it as QTabWidget::tear...
Is there any way by which I can do similar thing with my custom widget?
The subcontrols are defined in the (internal to Qt) knownPseudoElements array in qstylesheetstyle.cpp, so you won't be able to add your own pseudoelements. However, you can use the ID Selector feature to address individual controls in your widget. For example, if the names of your QGroupBox, QLabel, and QTextEdit are group, label, and edit, you can use:
#group {color:green} #label {color:blue} #edit {background-color:red}
to change the sub-widgets
This is a question about Qt library, not about Web design.
For QLabel and other controls I can set HTML text, for example "<h3>Some Text</h3>". The question is: where is the default HTML style is defined? How can I find out what a font would be used for <h3> tag?
The next question: can I change the default HTML style?
Edit: I want to specify in one place in my code how my controls would be displayed. To specify css style in all the labels doesn't seem to be an elegant solution to me.
Edit2: It seems people don't get the question. I'll try again. Suppose I do the following:
QLabel* label = ...
label->setText("This <b>is</b> a <h3>Header</h3>");
The question: what fonts will be used for label text rendering? How can I control them? Is there a way to specify, say, default font size for <h3> headers?
Edit3: Thomi have suggested to use QTextDocument::setDefaultStyleSheet. But this is just a workaround. I have to manually apply css style to all the QTextEdits (and not QLabels) in the interface. And the question was: how to find out the default style sheet? QTextDocument::setDefaultStyleSheet just overrides it for a single QTextDocument object. Maybe QTextDocument::defaultStyleSheet returns it? I don't have a computer with Qt insatlled right now so I can't check it.
What you want cannot be done with a QLabel. The QLabel is designed to hold primative text labels - it's HTML support is rather... ropey.
However, You can achieve this using a QTextEdit & QTextDocument.
Try something like this (I'm writing this from memory, so it may not compile or be 100% correct):
QTextDocument *doc = new QTextDocument(this);
doc->setDefaultStyleSheet("h3 { font-color: red; }");
QTextEdit *edit = new QTextEdit(this);
edit->setDocument(doc);
edit->setHTML("this is a red <h3>heading</h3>");
The important thing is to use a QTextDocument, which allows you to change the HTML stylesheet. From the QT documentation:
The default style sheet is applied to all newly HTML formatted text that is inserted into the document, for example using setHtml() or QTextCursor::insertHtml().
The style sheet needs to be compliant to CSS 2.1 syntax.
Note: Changing the default style sheet does not have any effect to the existing content of the document.
see here for more info
Edit:
To get the default stylesheet, you can call QTextDocument::DefaultStyleSheet() - however, this only applies to QTextDocuments, and may or may not apply to all Qt controls (including QLabel).
As mentioned in other answers you can do it for widget styles but not for HTML tags. The only way to do it is to set CSS styles inside your widgets text property individually.
Qt uses its rich text engine to render HTML tags which are defined according to rules in HTML 4 specification. See Supported HTML Subset
If you need just one style for all your labels why not to set it using setStyleSheet() like this:
MainWindow w;
w.setStyleSheet("QLabel{font-size:20px; color:purple;};");
Unless you want to use more than one style inside your labels (for example: "More than one style") that's the right way to do it.
Have a look at Qt Documentation about Style Sheets
You can probably use QApplication::setStyleSheet() or QWidget::setStyleSheet() to get it done.
In latest QT ie on QT4..The above answers are working.
Tell which QT version u r working on...
Try the following...
QLabel{
border: 2px solid green;
border-radius: 4px;
padding: 2px;
background-image: url(images/welcome.png);
}
link