[SalesForce] Visualforce and CSS – nothing

I can't get any CSS to work at all. Am I missing something extremely obvious?

EDITED to include URLfor

<apex:page standardStylesheets="false" showHeader="false" >
    <apex:stylesheet value="{!URLFOR($Resource.cssSampleGREEN)}"/>

    <h1>test content for color output</h1>
</apex:page>

If I have a static resource called cssSampleGREEN which is the COMPLEX CSS code

<style type="text/css">
h1
{
    color:#00cdcd;
}

I should at least have green output to my h1 text but that does not happen, I just get the below. What is my error?

enter image description here

Best Answer

It's fine - just take the <style> tags out of stylesheet.

Static resource like this :-)

h1
{
    color: #00cdcd;
}

Related Solutions

[SalesForce] Visualforce PDF and CSS overflow: hidden

Based on this SO answer it seems like you need to explicitly specify the width of the container.

enter image description here

<apex:page renderas="{!BLANKVALUE($CurrentPage.parameters.r, 'html')}" standardController="Account" showHeader="false" applyhtmltag="false">
    <head>
    <style>
    @page { 
        size: 8.5in 11in;
        @top-right {
            content: 'Page ' counter(page) ' of ' counter(pages);
            font-style: bold;
        }
    }

    span {
        border: solid 2px blue;
        display: block;
        max-height:200px;

        overflow: hidden;
        width: 7in;
    }
    </style>
    </head>
    <body>
        <span>{!Account.Description}</span>
        <p>{!Account.Name}</p>
    </body>
</apex:page>

[SalesForce] Add CSS classes and repeating header to Visualforce PDF

Change your <apex:page> to this:

<apex:page renderAs="pdf" applyBodyTag="false">

According to the docs:

A Boolean value that specifies whether or not Visualforce should automatically add a <body> tag to the generated HTML output. Set to false to disable adding the <body> tag to the response, for example, when the tag is statically set in your markup. If not specified, this value defaults to the value of the applyHtmlTag attribute if it's set, or true, if applyHtmlTag isn't set.

Using the sample you provided, I was able to render the following as PDF:

enter image description here

The header (logo) appears on every page as expected using the following VF:

<apex:page renderAs="PDF" applyBodyTag="false">
  <head>
  <style type="text/css" media="print">
    @page {
      margin-top: 1.5in;
      @top-center {
        content: element(header);
      }
    }
    div.header {
      position: running(header);
    }
    .sectionTitle {
      font-weight: bold;
    }
  </style>
  </head>
  <div class="header">
    <center><img src="{!$Resource.logo}" width="25%"/></center>
  </div>
  <div class="content">
    <table>
      <tr>
        <td class="sectionTitle">test</td>
      </tr>
      <!--rest removed for brevity...-->
    </table>
  </div>
</apex:page>

Best Answer

Related Solutions

[SalesForce] Visualforce PDF and CSS overflow: hidden

[SalesForce] Add CSS classes and repeating header to Visualforce PDF

Related Topic