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
Malik ButlerMalik Butler 

Is there any way to style a vf page similar to this?

User-added imageUser-added image
Deepali KulshresthaDeepali Kulshrestha

Hi Malik,


You can use custom styling to style your page as per your need.
Please refer to the following link as it may be helpful to you:
https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_styling_custom.htm
 

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
Malik ButlerMalik Butler
Deepali,
I added the pdf as a resource, and added the code into my vf page. Unfortunately nothing has changed. Is there anything specifically that I need to change? 
<apex:page standardController="Case" renderAs="pdf" applyBodyTag="true">
    <head>
        <style> 
            body { font-family: 'Times New Roman Unicode MS'; }
            .companyName { font: bold 30px; color: red; }  
        </style>
    </head>
    <body>
      <center>
        <apex:stylesheet value="{!$Resource.CasePDF}"/>
        <h1>Service Work Order</h1>
       <h6>Integrated Precision Systems</h6>
<h6>9321 Ravenna Rd. Suite C. Twinsburg, OH 44087</h6>
       <h6><apex:outputText value="{!Case.CaseNumber}"/> <apex:outputText /></h6>
      </center>
       
         </body>
    <body>
    <left><apex:outputText value="{!Case.Account.Name}"/> </left>
    
    </body>
    <body>
    <left><apex:outputText value="{!Case.Contact.Name}"/> </left>
    </body>
    <body>
    <left><apex:outputText value="{!Case.Phone__c}"/> </left>
    </body>
    <body>
    <left><apex:outputText value="{!Case.Address__c}"/> </left>
    </body>
    <body>
    <left><apex:outputText value="{!Case.Subject}"/> </left>
    </body>
    <body>
    <left><apex:outputText value="{!Case.Description}"/> </left>
    </body>
</apex:page>

 
Deepali KulshresthaDeepali Kulshrestha
Hi Malik,
Everything seems to be good with your code. Can you please post a screenshot of how it is displayed on the screen because it looks like there is some issue with the CSS you have uploaded in the static resource. 
Malik ButlerMalik Butler
Hi Deepali,
Here is what the page looks like. This is how the page looked before adding the resource to the code.


User-added image