I have a visualforce page renderAs="pdf" in which I'd like to put a footer :

<apex:page standardController="Opportunity" showHeader="false" sidebar="false" renderAs="pdf">
    <style type="text/css" media="all">
        @page {
            @bottom-center {
             content: element(footer);

        div.footer {
            display: block;
            padding: 5px;
            position: running(footer);

<!--some html here-->

<div class="footer">

But the css style is not applied : the footer stay just at the end of the other elements, not at the end of the document. In addition if I try to add some css to another element, for example :

.myClass{ color: red; }

this is not applied too.

How can I add css style into my pdf ?

  • 3
    Add applyBodyTag="false" to apex:page it worked for me with the same code. – javanoob Jan 9 '17 at 17:07

You need to increase your specificity because you are conflicting with the standard stylesheets. Or the simpler solution is just to remove them.

<apex:page standardStylesheets="false" ...>
    <!-- markup -->
  • I just tried to add this but that don't resolve my problem, the css is still not applied – dou Jan 9 '17 at 16:06
  • 2
    One way to debug this problem is remove visualforce render as pdf. treat it like a normal VF page . inspect using browser debugger tools fix the problem and then again put the render as pdf attribute. – RedDevil Jan 9 '17 at 16:09
  • So if I remove the renderAs="pdf" the style is applied ... is ther a way to add some style to a pdf ? – dou Jan 9 '17 at 16:13
  • 1
    Try adding these attributes to your page: renderAs="pdf" showHeader="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" – Martin Lezer Jan 9 '17 at 16:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.