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;
}
I want to make a mechanism that will display the css file depending on the url address
example
if url = www.domain.com/our.php then we print <style> background: red; </style> if not, <style> background: blue; </ Style>
chciałbym to umieśćić między <head>
In PrestaShop you can do this stuff directly in your template files, you have many helper variables available:
https://devdocs.prestashop.com/1.7/modules/creation/displaying-content-in-front-office
search for "Here is a list of Smarty variables"
You can load extra styles here:
/themes/your_theme/templates/_partials/head.tpl
You can do for example:
{if $page.page_name == 'product'}
{literal}<style>body { background: red !important; }</style>{/literal}
{/if}
This will result with a red background on product page.
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 a "print this page" button that works fine:
<a style="top:-40;left: 375;position:absolute;z-index:5000;">
<script>
document.write("<input type='button' " +
"onClick='window.print()' " +
"class='printbutton' " +
"value='Print This Page'/>");
</script>
</a>
It is exactly where I want it and it doesn't show on the print.
I have several navigation buttons that jump to other pages:
<button style="position:absolute;top:1050px;left:-105px;z-index:5000;">
Home</button>
These work fine, but they do print.
How can i make them not-print like the print button? I have tried several variations on modifying the print button script, but have not found the right combination yet.
Suggestions certainly appreciated. Please be very specific because I am very early into this.
You could do like suggested here.
Put this in your CSS file or add it to your style headers like you did with the "a" elements.
inside of a CSS document would look like this:
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Using inline-styles within your current document would look like this:
<style>
#media print
{
.no-print, .no-print *
{
display: none !important;
}
}
</style>
then wrap your buttons in the no-print class.
<div-class="no-print">
<button style="position:absolute;top:1050px;left:-105px;z-index:5000;">
Home</button>
</div>
I have a background image that I can not get to stay just on one page. I have made a welcome controller with one home view to display it. I am precompiling my assets as well. The background shows up just fine, but my goal is to just show the background image on my home.html.erb view.
welcome/home.html.erb:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<%= I18n.locale || 'en' %>"
lang="<%= I18n.locale || 'en'%>">
<body class="container">
<h1>title</h1>
</body>
</html>
welcome controller:
class WelcomeController < ApplicationController
def home
end
end
stylesheets/welcome.css.scss:
body
{
background: {
image: asset-url("image.jpg");
}
}
and I have the following in my application layout:
<head>
<%= stylesheet_link_tag "welcome" if controller_name == "welcome" %>
</head>
and in config/initializers/assets.rb :
Rails.application.config.assets.version = '1.0'
Rails.application.config.assets.precompile += %w( welcome.css )
Add specific css,
body.welcome
{
background: {
image: asset-url("image.jpg");
}
}
and in html,
<body class="container welcome">
You must be wondering even though you have not included specific file then why it is applying all over. This is because you must have specified require_tree . in application.css
In Rails:
Try creating a css class for the background image
.splash {
background-image: image-url("image.jpeg");
background-size: cover;
background-position: center;
background-attachment: fixed;
}
If you want all pages to display the image
<html class="splash"> ... </html>
But on one page only, on that view page, wrap everything in
<body class="splash"> ... </body>
You are overriding body for the entire application. Make a class instead and call it using div on the page you want to display the background image.
Also, you are calling the use of the stylesheet from the application layout rather than the page itself.
Stylesheet
#app/views/layouts/application.html.erb
<head>
<%= stylesheet_link_tag controller_name if controller_name == "welcome" && action_name == "home" %>
</head>
#app/assets/stylesheets/welcome.css.scss
body {
background: {
image: asset_url("image.png");
}
}
#config/application.rb
config.assets.precompile += %w(welcome.css)
This should load the welcome stylesheet if you're visiting the welcome#home view. I would strongly recommend against using classes to determine this page - it's far cleaner to include a stylesheet, as this will give you scope to extend the functionality as you wish
--
Test
To test this, you should first look at whether your welcome.css is being loaded when you hit the welcome#home view. To do this, you just need to right-click > view-source.
If the stylesheet is present, you'll want to ensure your styling is performing correctly. This will be trickier to debug, but will just entail you looking at the loaded CSS file & seeing what it's doing with the elements on your page.
If you do the above, comment as to whether you're seeing the welcome.css in your source. If you are, it's a good sign, and we'll be able to look at the CSS after that
Your welcome.css file is being included by the asset pipeline so will apply the background on every page. In order to apply the background image to the body only on the home page, you need to apply a class to the body when the home page displays.
However, if you are correctly using layouts, the opening <body> tag will be in your application.html.erb or in a partial so not available in your home.html.erb. You will need it to add it dynamically so I suggest you use a small jQuery script at the end of your home template.
<script>$('body').addClass('home-page');</script>
Then you can amend your CSS to
body.home-page {
background: {
image: asset-url("image.jpg");
}
}
That should give you the results you require.