Forum How do I...?

change @page background color depending on html's body class

robodisco
Hi,

Just want to say thank you for making Prince - the quality of the output is amazing.

In my application the user can create documents and choose from several themes to style it. Each theme has several colors.

For the onscreen preview I simply add the color as a class to the body tag and create background styles according i.e.

body.blue .doc {
background: blue;
}

But how do I do this for prices @page rule?

@media print {

body.blue @page {
background: blue;
}
}

Doesn't seem to be working.
mikeday
@page rules cannot be nested inside other selectors. You could use named pages, like this:
@page blue-page { background: blue }

body.blue { page: blue-page }

Or you could just apply the background to the body element, in which case it should be used as the background for the whole page if no other background is specified.
robodisco
Mikeday thanks for the quick reply - that looks exactly what I need. Ill give it a try.

Thank you.