2

Can we have visualforce bindings inside static resource CSS, i need certain params to be dynamic and do not want to have the Big length of CSS in my VF code, instead i am hoping i can use the visualforce bindings directly in my css static resource file like below

<apex:stylesheet value="{!URLFOR($Resource.Test, 'Asset/bootstrap.min.css')}" />

This is inside static resource

.header-navbar-dark #header-navbar {
      background-color: **{!oSitesetting.sHeadercolor}**;
      -webkit-box-shadow: none;
       box-shadow: none 
 }

Net result during output when i check the chrome console is that my visualforce bindings are not accounted and the background-color attribute above is escaped, is there any syntax i am missing?

  • 1
    Visualforce binding do not work inside static resources. I used visualforce components to add such CSS, and others in a static resources. – Raul Mar 7 '17 at 6:16
  • You could adapt this to use JS to set the css. bit of overkill though. CSS on the page that uses oSitesetting would be best salesforce.stackexchange.com/questions/162992/… – Eric Mar 7 '17 at 6:24
1

You can't do that with Static Resources but you can achieve dynamic CSS binding with a Visualforce page as external CSS file.

Visualforce page (apex:page) has a content type (contentType) property where you can specify the content type of the file. That means you can render a Visualforce page in different MIME types like JavaScript HTML and CSS etc.

To do that you have to use text/css as contentType of the Visualforce page as below.

Visualforce as external CSS file

<apex:page controller="CssController" contentType="text/css" cache="false" expires="0">
    .classgreen{
        color:{!testColor}
    }
</apex:page>

Visualforce Page where the above file is referenced as CSS file

<apex:page>
  <apex:stylesheet value="{!URLFOR($Page.csspage)}"  />
  <h1 class="classgreen">Congratulations</h1>
  This is your new Page
  <!-- End Default Content REMOVE THIS -->
</apex:page>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.