How to set a footer dynamically in a print html file - css

I have a print HTML file.
I can set the footer using CSS/SCSS like this:
#page {
#bottom-center {content: "Copyright AMCE Pty Ltd";}
}
Problem is, CSS/SCSS are static. The Ruby On Rails pipeline compiles them once on production when you push them to the server.
How can I set a different footer for each HTML print document using Rails?

Refer to an attribute value:
#page {
#bottom-center { div.my_placeholder {content: attr(data-footer-text);} }
}
The actual text is the value of the data-footer-text attribute. The div element serves the only purpose of carrying the attribute containing the daat to print.
Of course, this approach will only work if your application can modify the html accordingly.

Related

How to store custom css in external css file for JqGrid

I am working on jqGrid. I tried to apply some custom style on jqGrid pager and it is working fine when I put them in style tag of html. Something like given below.
<style>
.ui-paging-pager {
background-color: white !important;
}
</style>
But, when I store them externally in .css file, it is not working. I have created customPager.css file, in which I have stored all the css code for pager and used the path of the css file in html file link.
Can someone tell me where am I wrong and How to store custom css in external file for JqGrid?
Inline styles or those in <style> tags within a document will automatically override externally defined style rules.
However to override a style in an external stylesheet you need to give the rule you define in your own stylesheet a higher specificity. You can do that by including the parent elements in the selector. For example:
#container .foo > .bar .ui-paging-pager {
background-color: white;
}
Also note that the !important rule should be avoided for this reason.

CSS: How to print (by default) a file with footer (no any classes for it in HTML)

How to print a html page with header and footer by default (without explicitly clicking checkboxes during printing)?
For example, for displaying background picture, i found "-webkit-print-color-adjust: exact;":
.print-layout {
width: 210mm;
margin: 0 auto;
#media print {
-webkit-print-color-adjust: exact;
}
}
But how to do it for footer and header?
In my HTML page, I don't have any header and footer classes explicitly.Hence in my case,header is name of tab and date, footer is link of site and number of page in my case.
As far as i am aware you cannot get a header and footer added on by just adding css, the new features in HTML allow you to add <footer> and <header> tags to your HTML and you could add in an <a> tag with the URL link to the webpage, again if you need something dynamic like the data changing every time you would have to add in a script with the new Date() method.
The -webkit-print-color-adjust property is a non-standard CSS extension which is not really recommended to be used as it does not give reliable outcomes every time.

Flying-Saucer PDF Using :first With A Named Page

Currently in java I am generating an HTML document with applicable CSS styles.
I have verified that my document is correct, however it appears that the :first pseudo selector is not working when I use it in conjunction with a named page. as an example:
#page mainReport:first {
#top-center {
content: element(header);
vertical-align: bottom;
};
#bottom-center {
content: element(footer);
vertical-align: top;
};
}
The reason for me doing this is that I want to use the first page on a specific named page, does the CSS selector support this functionality for paged media? And if not, is there a work around for this issue, either through flying-saucer or some sort of CSS magic.
Thanks

How can I apply CSS style changes just for one page?

I have two css files:
A main file (main.css)
A specific page file (page5.css). My page.css contains main.css (#import url(main.css));)
My main.css has this as one part of it that sets the height of the page
#content {
background:url(../images/image.png) no-repeat;
width:154px;
height:356px;
clear:both;
}
This works fine for all the other pages, but at page 5, I need a little bit more height.
How would I go about doing it?
You don't even need a separate CSS file necessarily. You can add classes to your body for various purposes, identifying page or page type being one of them. So if you had:
<body class="page5">
Then in your CSS you could apply:
.page5 #content {
height: XXXpx;
}
And it would only apply to that page as long as it occurs after your main #content definition.
Just re-define it somewhere after your #import directive:
#content { height: 456px }
for identical CSS selectors, the latter rule overwrites the former.
In page5.css, simply re-define the height.
page5.css
#content {
height:400px;
}
The other answers did not help me on a more complex page.
Let's suppose you want something different on page X.
On your page X, create a class at the body tag (body class="myclass").
Open the Developer tools (I use chrome) and select the item to be modified. Let's say it's a link ( a.class - 'class' is your class name of your anchor, so change it accordingly). The browser will give something rather generic that works on the developer tool - but messes up in real life.
Check the parent of the modified field.
Add the HTML tag to your developer tool as testing
f your new CSS path does not grey out, you are good. If it greys out, your selected path still needs fixing.
Let's suppose that the parent is a div with a class 'parent'. Add this path "div.parent >" to the already chrome selected a.class
The symbol > means you are going up on the tree.
You can keep going backward on the DOM all the way to body.myclass, or you may not need. There is no need to add the classes for the parents, but you can add them if there are great similarities on your pages.
This works for me.

How to style content of pages without adding css class to element?

I use CMS for client and client doesn't know CSS he use WYSIWYG editor to put content in pages. Client adds Paragraphs, images, images in paragraph (left or right floated), ordered and unordered list, Tables. Problems comes when he want to add images in paragraph (left or right floated). and without adding css class it's not possible. And i don't want to add <div> in content because WYSIWYG editor can't manage div and client works in WYSIWYG mode.
How to style content of pages without using css class?
You will need your user to add a CSS class/style attribute to the image somehow - without adding something to the image to tell it to float right or left it won't float right or left.
If your question is how the client can add the class without having to manually edit the HTML I reckon the only way is to dive into the WYSIWYG editor's javascript and write something a bit like this towards the end of the image-adding process:
var alignment = prompt("Type l to align the picture to the left, and r to align the picture to the right","l").strToLower();
if(alignment == 'r')
{
//line of code to add class "right" to the image tag
} else {
//line of code to add class "left" to the image tag
}
What the code to add the classes should depend on how the WYSIWYG editor works
You can try using element selectors or ID selectors to add styles to HTML elements without referencing CSS class in them.
Element selector would add border to all images on the page:
img { border:1px; }
ID selector would do the same only to image with ID 'image1':
img #image1 { border:1px; }
Still you will need to reference the stylesheet from your page.
There are lots of different ways you can make CSS Selectors that don't require CSS classes. For example, to make a rule that applies to all img tags inside p tags, you could write this:
p img { float: left; }
But how are you hoping to determine which images need to be right-aligned and which images need to be left aligned? Does that data exist in the document in any machine readable format?
A WYSWYG should have "align" property for an image (at least those I have seen). You can then use CSS attribute selector img [align=left] { float:left; } or img [align=right] {float:right;} This wont work on IE 6,7 though, you can use JavaScript to mimic this for those browsers.

Resources