6

Working in Visualforce, is there any way to set a class on the <body> of my generated HTML page?

As a work-around, I could probably do something like the following, but would prefer to do this without any scripting:

<script>
    $('body').addClass('{!VisualforceExpression}');
</script>
Improve this question
4
  • document.body.className += ' {!JSENCODE(var)}'; would save you loading jQuery ;-)
    – Matt and Neil
    Apr 9, 2013 at 14:20
  • Also, to apex:page you can add a tabStyle attribute which will append a 'Tab' suffixed lowercase class of the same name. Of course, this is limited to the names of objects in the org and affects the theme!
    – Matt and Neil
    Apr 9, 2013 at 14:22
  • 1
    Can I be cheeky and ask why you're trying to do this?
    – Wes Nolte
    Apr 9, 2013 at 14:25
  • 4
    @WesNolte sure. I have various kinds of users in a customer portal, distinguished by Profile. I'd like to vary the styling of the Customer Portal header based on the profile. CP header files are static HTML, so I can't do anything in javascript, html, or CSS based on dynamic info. My work-around is to set the body class via Apex/Visualforce and use that as a hook in the header.
    – Benj
    Apr 9, 2013 at 14:54

4 Answers 4

Reset to default
8

While you can specify the body tag in your page and then just specify the class attribute, this requires you to use the following attributes on your page:

<apex:page sidebar="false" showHeader="false" standardStylesheets="false">

otherwise you end up with two body tags - one provided by the platform and one provided by you. This also means that you lose the standard look and feel, headers etc, so unless that is what you want, its probably not the way to go.

If you need to set a class attribute, as opposed to just the style of the body, you will need to use javascript.

Improve this answer
1
  • This is a great approach for cases where the SF header, sidebar, and stylesheets aren't needed - but unfortunately, we do need them. Thanks!
    – Benj
    Apr 15, 2013 at 0:57
1

Have you tried to access the body with css?

Controller:

public Integer fontSize { get; set; }

public MyClass() {
    fontSize = 12;
}

public PageReference getText() {
    fontSize += 10;
    return null;
}

Page:

<apex:page>

<apex:outputPanel id="styles">
    <style>
    body {
        font-size:{!fontSize}px;
    }
    </style>
</apex:outputPanel>

<apex:form>
    <apex:commandButton value="Increase font size" reRender="styles" action="{!getText}"/>
</apex:form>

</apex:page>
Improve this answer
2
  • This would set styles (or dynamic behaviors) for all pages. I want this to be a dynamic hook based on the value generated by the Visualforce expression.
    – Benj
    Apr 9, 2013 at 13:39
  • 1
    @Benj What i mean is that you can set some css style for the body tag at the visualforce page. This would not be set styles for all pages, why should it? Updated my example.
    – Sergej Utko
    Apr 9, 2013 at 13:43
1

This isn't currently possible with simple visualforce, and requires javascript. I ended up adding the following to a Visualforce template which is the base for most of my pages:

<script>
    (function () {
        var profileName = '{!$Profile.Name}',
            isFlagSet = profileName.indexOf('TheFlag') === -1;
        if (isFlagSet) {
            document.getElementsByTagName('body')[0].className += ' app-flag-set';
        }
    })();
</script>
Improve this answer
1

There's a newer solution to this:

<apex:page applyBodyTag="false">

Then you can include your own body tag however you'd like:

<body class="page1">
Improve this answer
1
  • have you verified this? I tried it and it wouldn't work for me. Do you have to have showHeader=false and standardStylesheets=false ?
    – Phil B
    Apr 13, 2015 at 21:51

You must log in to answer this question.

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