{"id":49,"date":"2013-10-23T08:28:47","date_gmt":"2013-10-23T08:28:47","guid":{"rendered":"http:\/\/www.greytrix.com\/blogs\/salesforce\/?p=49"},"modified":"2025-05-29T06:05:16","modified_gmt":"2025-05-29T06:05:16","slug":"overriding-standard-visual-page-styling-in-salesforce","status":"publish","type":"post","link":"https:\/\/www.greytrix.com\/blogs\/salesforce\/2013\/10\/23\/overriding-standard-visual-page-styling-in-salesforce\/","title":{"rendered":"Overriding standard visual page styling in Salesforce"},"content":{"rendered":"\n

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.<\/span><\/p>\n\n\n\n

A visualforce page with the default padding is as shown below:<\/span><\/p>\n\n\n

\n
\"Fig2\"<\/a><\/figure><\/div>\n\n\n

As you can see in above screenshot, the page has white-space around the text \u201c<\/span>Congratulations <\/b>This<\/span> <\/b>is your new page Test\u201d.<\/span><\/p>\n\n\n\n

In order to remove these white padding spaces, we have overridden the inbuilt CSS provided by Salesforce using the following code:<\/span><\/p>\n\n\n\n

\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<snip>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013
<style>
.noSidebarCell,.outerNoSidebar
{
padding-top: 0px !important;
padding-right: 0px !important;
padding-bottom: 0px !important;
padding-left: 0px !important;
}
<\/span><\/style>
\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<\/snip>\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2013<\/p>\n\n\n

\n
\"Fig2\"<\/a><\/figure><\/div>\n\n\n

After using the above code, the page will now appear as shown below:
<\/span>You can see the difference in the Message \u201c<\/span>Congratulations <\/b>This<\/span> <\/b>is your new page Test\u201d. Now you don\u2019t have white space of 10 pixels before text as we have in Fig1.<\/span><\/p>\n\n\n\n

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.<\/p>\n\n\n\n

For more such tips keep following us or contact us on accpac@greytrix.com.<\/p>\n\n\n\n

About Us<\/strong><\/span>
Greytrix<\/a> 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.<\/p>\n\n\n\n

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

Greytrix GUMU™ integration for Sage ERP \u2013 Salesforce is a 5-star app listed on Salesforce AppExchange<\/a>.<\/p>\n\n\n\n

For more information, please contact us at salesforce@greytrix.com<\/a>. We will be glad to assist you.<\/p>\n","protected":false},"excerpt":{"rendered":"

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: As you can see in above screenshot, the\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[63,251,520],"class_list":["post-49","post","type-post","status-publish","format-standard","hentry","category-salesforce-srv","tag-css","tag-override","tag-visual"],"_links":{"self":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/49","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/comments?post=49"}],"version-history":[{"count":2,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/49\/revisions"}],"predecessor-version":[{"id":10492,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/posts\/49\/revisions\/10492"}],"wp:attachment":[{"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/media?parent=49"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/categories?post=49"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.greytrix.com\/blogs\/salesforce\/wp-json\/wp\/v2\/tags?post=49"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}