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:

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

Then on my dialog constructor, i do:

Qt Code:

Switch view

// 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();

// 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();

To copy to clipboard, switch view to plain text mode

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:

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

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

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

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: [WIKI]QTextBrowser with images and CSS[/WIKI]

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

Qt Code:

Switch view

// 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()));

// 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()));

To copy to clipboard, switch view to plain text mode

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

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

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

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

[/edit]

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

Qt Code:

Switch view

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

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

To copy to clipboard, switch view to plain text mode

OR

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

Qt Code:

Switch view

mTextBrowser->setDefaultStyleSheet(myStylesheetContentString);

mTextBrowser->setDefaultStyleSheet(myStylesheetContentString);

To copy to clipboard, switch view to plain text mode

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

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

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

Thread: Styling a QTextEdit

Thread Tools

Search Thread

Display

Styling a QTextEdit

Re: Styling a QTextEdit

The following user says thank you to Lykurg for this useful post:

Re: Styling a QTextEdit

Re: Styling a QTextEdit

Re: Styling a QTextEdit

Re: Styling a QTextEdit

Re: Styling a QTextEdit

Re: Styling a QTextEdit

The following user says thank you to Berryblue031 for this useful post:

Re: Styling a QTextEdit

Similar Threads

Styling SeekSlider

Styling QTabBar?

Styling a tab bar without frame

qscrollbar styling

Styling a QComboBox

Bookmarks

Bookmarks

Posting Permissions