PDA

View Full Version : Styling a QTextEdit



hickscorp
30th March 2012, 17:21
Hello everyone,

i'm not new to Qt, however i'm very new to applying stylesheets to widgets. That's why i'm posting in this topic. If you feel that i should be posting in the "Programming" section, tell me and i'll delete this post and create it later.

So basically, i have a QTextEdit widget on a dialog, and i'm trying to apply a stylesheet on it. My stylesheet is in a resource file, and contains this:


* {
margin: 0;
padding: 0;
color: Black;
white-space: normal;
font-family: Arial;
font-size: 10px;
font-weight: normal;
}
h1 {
color: Red;
font-size: 11px;
}
h2 {
color: Red;
font-size: 10px;
}
h3 {
color: Red;
font-size: 10px;
}


Then on my dialog constructor, i do:


// Set up stylesheet on slip summary widget.
QFile fStyle(":/Resources/Stylesheets/SlipSummary.css");
fStyle.open (QIODevice::ReadOnly|QIODevice::Text);
_ui.txtSlipSummary->setStyleSheet(fStyle.readAll());
fStyle.close();


My main problem is that no titles are being shown in red. If i put the "color: red" on the first "*" selector, everything turns red, but no luck with the individual selectors... What can be the problem?

Related to styling widgets, i have a question. Lets say a QTextEdit base contents is set to:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<meta name="qrichtext" content="1" />
</head>
<body>
<h1>Test</h1>
<h2>Foo</h2>
<p>Bar</p>
</body>
</html>

Then would it be possible to set a stylesheet which would be in a QRC file like this within the <head /> tag:

<LINK href=":/Resources/CSS/Main.css" rel="stylesheet" type="text/css">

Thanks a lot for your help,
Pierre.

Lykurg
30th March 2012, 17:29
Hi,

with _ui.txtSlipSummary->setStyleSheet(fStyle.readAll()); you are setting a style sheet for a widget not for the HTML page, what is what you want. You have to set the css file to file in the editor. For that see my old wiki post that you can get a clue how to do that: QTextBrowser with images and CSS

hickscorp
30th March 2012, 17:41
Dear Lykurg,

Thank you very much, i'll have a look at this method in a few hours. It seems to be exactly what i'm looking for!

Pierre.

hickscorp
3rd April 2012, 16:31
Hello,

i have been playing around with QHtmlDocument with no luck regarding Lykurg's reply. i am still able to change some of the CSS properties, but not all of them work (Colors are fine now, but list-style and float / positions aren't taken into account). The code i am now using to style up my text is as follows:


// Prepare HTML document.
_slipSummaryDoc = new QTextDocument();
// Set up stylesheet on slip summary widget.
QFile fStyle (":/Resources/Stylesheets/SlipSummary.css");
fStyle.open(QIODevice::ReadOnly|QIODevice::Text);
QString css = fStyle.readAll();
fStyle.close();
_slipSummaryDoc->addResource(QTextDocument::StyleSheetResource, QUrl("SlipSummary.css"), css);
// Set document.
_ui.txtSlipSummary->setDocument(_slipSummaryDoc);
_slipSummaryDoc->setHtml(QString("<html><head><link rel='stylesheet' type='text/css' href='SlipSummary.css'></head><body>%1</body></html>").arg(_documents->htmlSummary()));


The CSS style looks like this (Although it's really becoming a sandbox that has changed upon each test i've made):


* {
color: #222;
font-size: 10px;
font-weight: normal;
margin: 0;
padding: 0;
list-style: none;
text-indent: 0;
}
h1 {
color: #555;
font-size: 12px;
font-weight: bold;
}
h2 {
color: #444;
font-size: 11px;
font-weight: bold;
}
h3 {
color: #333;
font-size: 10px;
font-weight: bold;
}
ul, li {
list-style: none;
margin: 0;
padding: 0;
text-indent: 0;
}
span.amount {
float: right;
width: 60px;
margin: 0;
padding: 0;
text-align: right;
}


Oh and here is the generated HTML code being inserted:


<h2>4 Invoices<span class='amount'>$30.42</span></h2>
<h3>2 Utility<span class='amount'>$0.00</span></h3>
<ul>
<li>2 Energy<span class='amount'>$0.00</span></li>
</ul>
<h3>2 Car<span class='amount'>$30.42</span></h3>
<ul>
<li>1 Gas<span class='amount'>$8.50</span></li>
<li>1 Repairs<span class='amount'>$8.10</span></li>
</ul>



Again, thank you for any kind help you may provide!
Pierre.

hickscorp
22nd April 2012, 01:47
Bump, is there anyone able to change list-styles, padding, margins, and float positioning in a QTextDocument via stylesheet?

Berryblue031
23rd April 2012, 12:14
You can do this two ways

1. Register your stylesheet as a resource, then in your html add

<link rel='stylesheet' type='text/css' href='qrc:/Resources/Stylesheets/SlipSummary.css' />

OR

2. Read your stylesheet manually into a QString and if you are using a QTextBrowser you can call

mTextBrowser->setDefaultStyleSheet(myStylesheetContentString);

You mentioned that your styles are actually just not applying properly (i.e. the global style is working but nothing else) there may be a bug in your actual style sheet not the loading/applying of it.

QTextDocument does not support all styles have a look at http://doc.qt.nokia.com/4.7-snapshot/richtext-html-subset.html

hickscorp
23rd April 2012, 14:11
Dear Berryblue031,
Thank you for answering me!

i tried it both ways. None of them actually worked for the properties i'm trying to apply changes on. My CSS validates and looks good.

Could you please try to make a simple HTML document containing a <ul><li>Foo</li></ul> and a <span>Bar<>, put it in a QDocument, and tell me if you're able to change the padding, the margins, make the bar span float right, and remove list bullets?

Thanks a lot for your help,
Pierre.

Berryblue031
24th April 2012, 08:20
If you can see just one of the styles in your stylesheet (i.e. the text turning all red) then the stylesheet is being applied correctly.

Your problem is the majority of your styles are not compatible with QTextEdit - It only supports a subset of html / css

If you look at the link I posted earlier ( http://doc.qt.nokia.com/4.7-snapshot/richtext-html-subset.html )

float attribute is only supported by images and tables - you cannot apply it to a span
list-style attribute is not supported at all - if you really want a list without any bullets make it manually with a table
margin and padding are only supported on block tags i.e. span/p/div - so put whatever content you want to apply padding/margins too into a span

hickscorp
24th April 2012, 12:06
Dear BerryBlue,

Thank you for your kind help!
i will use the table technique, as styling floating isn't supported for the tags i'm applying on.

Best to you!
Pierre.