I'm creating PDF from HTML using weasyprint. I have a content that has dynamic number of pages.
I can start a new page after it with style="page-break-before: always;".
How do I make this new page yellow?
I would use #page :nth(3) { background: yellow; } if I new it was third page. But I don't know the length of the content before.
Maybe something like <page> could be styled?
Thanks!
Found in samples! You can use page css property to name target page.
#page mypagename{
background: yellow;
}
#element-on-styled-page{
page: mypagename;
}
Related
How can i suppress/hide elements when printing especially a header at first page only.
<table>
<thead><tr><td>must be invisible at first page</td><tr></thead>
<tbody><tr><td>content></td></tr></tbody>
<tfoot><tr><td>footer</td></tr></tfoot>
</table>
i have read Remove Header from First Page of HTML Generated PDF - CSS, which is seems to be solutions, but it has dead link.
and i dont understand bellow code:
#page {
#top-center {
content: element(header,first-except);
}
what is content: element(...) ?
where can i get manual/reference to this element (xxx) function ?
thx
I have added a title color for each category that is displayed on the posts. This is how I want it to be displayed and this is the way it displays
It works fine for one category page https://everythingstudent.co.uk/category/discounts/, but on the others it doesn't https://everythingstudent.co.uk/category/sponsored/ - The section after In case you missed it.
I don't understand why it doesn't respect the CSS assigned. It bugs me out.
You have made small mistake. just replace your css with below css. same class in body and article tag so we need to add article tag with class name so it does not conflict with body tag :)
article.category-discounts .category_es_title {
background-color: #0072bc!important;
}
article.category-anothercat .category_es_title {
background-color: #f8ac87!important;
}
article.category-jackiscool .category_es_title {
background-color: #75d3f6!important;
}
article.category-sponsored .category_es_title {
background-color: #00a651!important;
}
article.category-student-life .category_es_title {
background-color: #ff1744!important;
}
Where is your CSS typed? did you do it manually or through a front-end editor?
In my experience, a lot of times it's something as simple as a theme compatibility issue so you may have to go directly into the source code for the theme itself.
Let me know some details & I should be able to elaborate more
I need to know if I can modify content on the last page with the :last selector.
I'm not sure if it exists, I see it being used in other stackoverflow answers like this: Footer on last printed page.
But I can't find it in the documentation and it does not work when I try to use it.
I'm trying to clear the content on the footer of my last page like this:
#page {
#bottom-right {
content: "Please turn over";
}
}
#page :last {
#bottom-right {
content: none;
}
}
It works when I use it with the :firstselector. How can I get the effect for the last page?
I'm using Weasyprint to print PDF files.
This can be achieved using named pages.
Create an element on the last page (or use an existing one that will appear on the last page) and assign it a last-page class.
Example below:
HTML
<div class="last-page"></div> <!-- Or add this class to an existing element that appears on the last page -->
CSS
.last-page {
page: last_page;
page-break-before: always; /* Use if your last page is blank, else omit. */
}
#page {
#bottom-right {
content: "Please turn over";
}
}
#page last_page {
#bottom-right {
content: none;
}
}
Tested with Weasyprint - worked a charm.
Based on the CSS3 Page docs it appears the :last pseudo-class was removed (or never included).
It might be possible to target the last page using the :blank pseudo-class if you can force a page break at the end of your document. This might have unwanted effects on other blank pages though.
Website: http://www.otislandscapedesign.com/
I am trying to remove the website title from the following selected pages/posts using id: category-portfolio, clients, about, contact.
I've tried the following css code unsucessfully:
.postid-576 .gk-logo-text.inverse > span { display: none; }
What am I doing wrong and how do I resolve this?
On the body tag, you'll see a class containing the page type (page, post, category) and its ID. For example on the Clients page, the class is .page-id-576
So for that specific page, the CSS that would hide the title is:
.page-id-576 .gk-logo-text.inverse > span {
display: none;
}
You would need to do the same for all pages, just look for the page type+ID class on the body tag of each page.
Your code is correct, you just need to add the !important keyword to override the existing style declaration in the stylesheet. Here is your final code:
.postid-576 .gk-logo-text.inverse > span {
display: none !important;
}
I have a simple partial view that shows the result of an action and displays the message to use either success or failure. The partial view is rendered from inside the main view.
However the css styling is not working if I want to use a specific css ID for a div tag. If I apply a class then the style works. eg
The partial view looks:
#Code
ViewData("Title") = "Results"
If Model.Result = True Then
#<div id="success">#Model.Message</div>
Else
#<div id="notsuccess">#Model.Message</div>
End If
End Code
the line ##Model.Message somehow does not work. The CSS is like:
#success {
background-color:Lime;
font-style:italic;
font-size:larger;
}
#notsuccess {
background-color:Red;
font-style:italic;
font-size:larger;
}
However, if I change the css to be .success and change the line to use the .success class instead of id then it shows the styling. Can anyone please point me to issue?
I am using the default MVC project for MVC 3.
Most likely there is another div named #success. You'll need to paste/inspect the complete HTML view of the page.