Log in / Register

Forum › How do I...?

Different colored pages

Cuberic
How do I change the color of specific pages?

I have
@page {
size: A4;
margin: 10pt 10pt 10pt 10pt;
prince-shrink-to-fit: auto;
background: #f6f6f6;
}

but I want to make specific groups of pages a different color.

I'm not quite sure if I could use named pages because I'm not understanding the documentation.

If I use a class that wraps the parts that I want a different page color and give it a page name then I can set the page color?

For example like:

.siv-r-bsi {
page:basic-indicator;
}
@page basic-indicator {
background:#efefef;
}

But i tried that and it didn't change the color.
mikeday
That should work, try this sample document:
<html>
<head>
<style>
@page greenpages { background: green }
@page bluepages { background: blue }
</style>
</head>
<body>
<p>Default pages will be white/transparent.</p>
<div style="page: greenpages">These pages will be green!</div>
<div style="page: bluepages">These pages will be blue!</div>
<p>Default pages will be white/transparent.</p>
</body>
</html>