2

I can't seem to get page level styles to work with version 30.0 of the force.com eclipse IDE in my VF pages. Is this a bug or is there some change that occurred that I'm unaware of?

<apex:page renderAs="PDF" >
<head>
    <style>
        body { font-size: 1em; }
        h1 { text-align: center; margin: 0; font-size: 1.5em; font-weight: normal; }
        hr.seperator { margin: 10px auto 5px quto; width: 50%; color: #000; background-color: #000; height:1px; border: none; }
        h5 { text-align: center; margin: 0; font-size: .7em; font-weight: normal; }
        p { margin-top: 10px; margin-bottom: 10px; }
        p.proclamation { font-size: 1.3em; font-style: italic; }
    </style>
</head>


<apex:form >
    <h1>POWER OF ATTORNEY</h1>
    <hr class="seperator"/>
    <h5>Erasures and Alterations void this instrument</h5>
    <h5>This instrument void after sixty days from date herein</h5>
    <br />
    <p class="proclamation">Know All Men By These Presents, That I, the undersigned, do hereby make, constitute and appoint</p>
    <p>Name:</p>
    <p>Address:</p>
    <p>My true and lawful attorney-in-fact for the following described motor vehicle, to-wit:</p>
    <p><span>Make</span><span>Year</span><span>Serial No.</span></p>
</apex:form>

Thanks for any help.

3
  • Hi Dman -- a screen shot and sample VF code would be helpful
    – cropredy
    Sep 25, 2014 at 23:32
  • see updated post with code snippet
    – Dman100
    Sep 26, 2014 at 0:01
  • 1
    and does it render OK without renderAs="PDF" ? Styling and the SFDC PDF generator is an art, not a science.
    – cropredy
    Sep 26, 2014 at 0:06

1 Answer 1

7

Maybe you can wrestle with the machine that is the PDF output builder.

For styling to work in that API version, the page will need to look more like this:

<apex:page showHeader="false" applyHtmlTag="false" applyBodyTag="false" renderAs="pdf">
    <html>
        <head>
            <style>
                body { font-size: 1em; }
                h1 { text-align: center; margin: 0; font-size: 1.5em; font-weight: normal; }
                hr.seperator { margin: 10px auto 5px quto; width: 50%; color: #000; background-color: #000; height:1px; border: none; }
                h5 { text-align: center; margin: 0; font-size: .7em; font-weight: normal; }
                p { margin-top: 10px; margin-bottom: 10px; }
                p.proclamation { font-size: 1.3em; font-style: italic; }
            </style>
        </head>
        <apex:form >
            <h1>POWER OF ATTORNEY</h1>
            <hr class="seperator"/>
            <h5>Erasures and Alterations void this instrument</h5>
            <h5>This instrument void after sixty days from date herein</h5>
            <br />
            <p class="proclamation">Know All Men By These Presents, That I, the undersigned, do hereby make, constitute and appoint</p>
            <p>Name:</p>
            <p>Address:</p>
            <p>My true and lawful attorney-in-fact for the following described motor vehicle, to-wit:</p>
            <p><span>Make</span><span>Year</span><span>Serial No.</span></p>
        </apex:form>
    </html>
</apex:page>

Note carefully:

  • uses showHeader="false"
  • has both applyHtmlTag="false" and applyBodyTag="false"
  • addition of <html></html> tags

enter image description here

0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .