Overriding standard visual page styling in Salesforce

By | October 23, 2013

Recently we had a requirement in which our client wanted us to remove the standard padding across the visualforce page. The visualforce page has an inbuilt CSS that applies padding of about 10px across the page.

A visualforce page with the default padding is as shown below:

Fig2As you can see in above screenshot, the page has white-space around the text “Congratulations This is your new page Test”.

In order to remove these white padding spaces, we have overridden the inbuilt CSS provided by Salesforce using the following code:

—————————————————–<snip>—————————————————–
<style>
.noSidebarCell,.outerNoSidebar
{
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
}
</style>
—————————————————–</snip>—————————————————–

After using the above code, the page will now appear as shown below:
Fig2
You can see the difference in the Message “Congratulations This is your new page Test”. Now you don’t have white space of 10 pixels before text as we have in Fig1.

In similar way, Salesforce provides rich feature of customizations.  If we have some knowledge of CSS then we can override the inbuilt CSS of visualforce pages and further enhance the UI.

For more such tips keep following us or contact us on accpac@greytrix.com.

About Us
Greytrix as a Salesforce Product development partner offers a wide variety of integration products and services to the end users as well as to the Partners across the globe. We offers Consultation, Configuration, Training and support services in out-of-the-box functionality as well as customizations to incorporate custom business rules and functionalities that requires apex code incorporation into the Salesforce platform.

Greytrix has some unique solutions for Cloud CRM such as Salesforce integration with Sage Enterprise Management (Sage X3), Sage Intacct, Sage 100 and Sage 300 (Sage Accpac). We also offer best-in-class Cloud CRM Salesforce customization and development services along with services such as Salesforce Data Migration, Integrated App development, Custom App development and Technical Support to business partners and end users.

Greytrix GUMU™ integration for Sage ERP – Salesforce is a 5-star app listed on Salesforce AppExchange.

For more information, please contact us at salesforce@greytrix.com. We will be glad to assist you.