function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
sryansryan 

Centering Text Inside Background Image in Visualforce Email PDF Attachment

Hello - I'm trying to dynamically center apex:OutputPanel text that I'm laying on top of a background image for a Visualforce2PDF Email Template. The majority of the Visualforce gets rendered as a PDF attachment. I'm able to get the image to stretch to its full size, but I'm (so far) unable to get the text centered.

 

I would appreciate any help in figuring this out.

 

Thanks,

SRyan

 

My VF Email template code:

 

<messaging:emailTemplate subject="Your Completed ACME Fire Proteciton Products Training Certificate:{!relatedTo.Course__c}" recipientType="Contact" relatedToType="Enrollment__c">
  <messaging:plainTextEmailBody >
        Dear {!recipient.name},
           
        Congratulations for successfully completing the ACME Fire Protection {!relatedTo.Course__c} course. Please see your Certificate of Completion attached to this message.

        Regards,
        John Doe
        ACME Fire Protection Products
        Director, Technical Services and Training
  </messaging:plainTextEmailBody>
  <messaging:attachment renderAs="PDF" filename="{!relatedTo.Name}">
  <html>
    <script type="text/javascript" src="/js/functions.js"></script>
    <script src="/soap/ajax/11.1/connection.js"></script>
    <script language="javascript">
        function init() {
                sforce.connection.sessionId = '{!$Api.Session_ID}';
                }
     </script>
  <style>
    @page {
    /* Landscape orientation */
    size:landscape;
    margin:0.25in;
    }
    body {
    background-size:976px 689px;
    }

    #BackgroundImage {
        width: 976px;
        height: 689px;
        border-style: none;
        background-image: url('{!URLFOR($Resource.TycoFPTrainingCertbackgroundimage)}');
        }
    
    #Text {
        text-align: center;
        }
        
    .stretch {
        width:100%;
        height:100%;
        }
    .largeBoldFont { font-weight:bold; font-size:24px; }
    .normalFont { font-weight:normal; font-size:12px; }
    .mediumBoldFont { font-weight:bold; font-size:18px; }
    .normalBoldFont { font-weight:bold; font-size:12px; }

  </style>    

  <body onload="init();">
  
  <div id="BackgroundImage">
    <div id="Text">
      <apex:outputPanel >
        <apex:panelGroup >
          <p><apex:outputText value="We Hereby confirm that" styleclass="normalFont"/></p>
          <p><apex:outputText value="{!relatedTo.Contact__r.FirstName}" styleclass="largeBoldFont"/> <apex:outputText value=" "/> <apex:outputText value="{!relatedTo.Contact__r.LastName}" styleclass="largeBoldFont"/></p>
          <p><apex:outputText value="has completed the training program" styleclass="normalFont"/></p>
          <p><apex:outputText value="{!relatedTo.Course__c}" styleclass="largeBoldFont"/> <apex:outputText value=" - " styleclass="largeFont"/> <apex:outputText value="{!relatedTo.Class_Number__c}" styleclass="largeBoldFont"/></p>
          <p><apex:outputText value="on this day " styleclass="normalFont"/><apex:outputText value="{!Day(relatedTo.Date_Certified__c)}" styleclass="normalBoldFont"/><apex:outputText value=" of this month " styleclass="normalFont"/><apex:outputText value="{!Month(relatedTo.Date_Certified__c)}" styleclass="normalBoldFont"/><apex:outputText value=" of this year " styleclass="normalFont"/><apex:outputText value="{!Year(relatedTo.Date_Certified__c)}" styleclass="normalBoldFont"/> <apex:outputText value=" and has been awarded a total of " styleclass="normalFont"/><apex:outputText value="{!relatedTo.Hours__c}" styleclass="normalBoldFont"/><apex:outputText value=" Contact Hour(s)." styleclass="normalFont"/></p>
          <p><apex:outputText value="This is an authorization to " styleclass="normalFont"/> <apex:outputText value="{!relatedTo.Certificate_Activity__c}" styleclass="normalBoldFont"/><apex:outputText value=" for " styleclass="normalFont"/><apex:outputText value="{!relatedTo.Course__c}" styleclass="normalBoldFont"/><br/>
          <apex:outputText value="as a Distributor of " styleclass="normalFont"/><apex:outputText value="{!relatedTo.Class__r.Course__r.Brand__c}" styleclass="normalBoldFont"/><apex:outputText value=" - Contract NO. " styleclass="normalFont"/> <apex:outputText value="{!relatedTo.TFPP_Contract__r.Name}" styleclass="normalBoldFont"/><br/>
          <apex:outputText value="This authorization expires three years from the date of training described above." styleclass="normalFont"/></p>
        </apex:panelGroup>
      </apex:outputPanel>
    </div>
  </div>
  </body>
  </html>
  </messaging:attachment>
</messaging:emailTemplate>

 

 

Jay EcklesJay Eckles

I have found that using JQuery to find the DOM element and then setting its style can do the trick.
sryansryan

Jay,

 

Thanks for your reply. Do you have an example of how I would code/mark this up in this context or any guidance you can provide.

 

Thanks,

SRyan