0

I have a visualforce pdf page, and I render different visualforce components depending on a value in my Apex controller:

<apex:page renderAs="pdf" controller="PresupuestoPDFController" showHeader="false" applyHtmlTag="false" applyBodyTag="false" standardStyleSheets="false">
<head>
    <style type="text/css">

        @page{
            background-image:url('{!URLFOR($Resource.fondosPDF, 'Fondo_presupuesto_atelier_2_900x1150.jpg')}');
            size: A4;
        }

        body{
            font-family: sans-serif;
        }

        tr.border-bottom{ 
            height:25px;
            font-size:x-small;
        }

        tr.border-bottom td{
            border-bottom:2px solid #867770;
        }

        .imag{
            width: 14%;
            text-align: center;
        } 

        .note-line{
            border-color:#CFC3BC;
            border-width:2px;
        }

        #price {
            color:#CFC3CB
            font-weight:600;
        }

        #detalle-unidad{
            /* background-color: #CFC3CB */
        }

    </style>
</head>

<c:presupuestoPDFTorreIII rendered="{!data.isLeParc3}"/>
<c:presupuestoPDFTorreIV rendered="{!data.isLeParc4}"/>
<c:presupuestoPDFAtelier rendered="{!data.isAtelier}"/>
</apex:page>

You can see, in the @page selector I'm adding a background image. the thing is, I want to add that image only for one of the components, but if I add the styling directly on the component, it doesnt work (adding the style tag and adding the background image). My question is, can I add a condition in my css at the page level? something like

@page{
    {!IF(condition, 'background-image:url(imageUrl)', '')};
}

Meaning, if condition is true, set background-image, or if condition is false, add nothing.

Improve this question
2
  • Can you not add appropriate data-id or style classes to the relevant component(s) then use more specific CSS selectors so you only set the background on the required components/HTML elements?
    – Phil W
    Commented Sep 21, 2022 at 15:06
  • @PhilW I don't know, I mean, the way I got the background image to cover the page like I wanted, was using the page selector. I don't know an alternative to this. If I add a container to my component and set the background image there, The image only covers until the default margins of the page (something I don't want to remove), So, if there is a way to set the background directly to my component and still cover the whole page, I'd be open to that .
    – joacoiudica
    Commented Sep 21, 2022 at 15:14

1 Answer 1

Reset to default
0

There's several ways you can do this. For example, you can use apex:outputText, as in the following example:

<apex:outputText rendered="{!someCondition}">
@page{
    background-image:url('{!URLFOR($Resource.fondosPDF, 'Fondo_presupuesto_atelier_2_900x1150.jpg')}');
}
</apex:outputText>
@page {
    size: A4;
}

Plenty of other choices also exist. I'd probably stay away from trying to render individual properties unless really need it, just to make it easier to read. Multiple matching CSS properties can be assigned in multiple rules, so there's no need to be ultra-efficient at it.

Improve this answer
1
  • Ok, so this worked, but what I did is add two outputText components, both with the same css but the one where the condition is true, also the background image. I don't know if that was what you meant, I mean, adding the outputText inside the style tag didn't work, so I ultimately had to duplicate the style tags and render the one I want based on the condition.
    – joacoiudica
    Commented Sep 21, 2022 at 15:30

You must log in to answer this question.

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