Styling a QTextEdit

Printable View

30th March 2012, 17:21
hickscorp

Styling a QTextEdit
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:
Code:

* { 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:
Code:

// 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:
Code:

<!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:
Code:

<LINK href=":/Resources/CSS/Main.css" rel="stylesheet" type="text/css">
Thanks a lot for your help,
Pierre.
30th March 2012, 17:29
Lykurg

Re: Styling a QTextEdit

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: [WIKI]QTextBrowser with images and CSS[/WIKI]
30th March 2012, 17:41
hickscorp

Re: Styling a QTextEdit

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.

Re: Styling a QTextEdit

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:

Code:

// 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):

Code:

* {
	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;
}

[edit]Oh and here is the generated HTML code being inserted:

Code:

<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>

[/edit]

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

22nd April 2012, 01:47
hickscorp

Re: Styling a QTextEdit

Bump, is there anyone able to change list-styles, padding, margins, and float positioning in a QTextDocument via stylesheet?
23rd April 2012, 12:14
Berryblue031

Re: Styling a QTextEdit
You can do this two ways

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

<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
Code:

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...ml-subset.html
23rd April 2012, 14:11
hickscorp

Re: Styling a QTextEdit

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.
24th April 2012, 08:20
Berryblue031

Re: Styling a QTextEdit
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...ml-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
24th April 2012, 12:06
hickscorp

Re: Styling a QTextEdit

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.