I have been working on the force.com platform for nearly three years now, and the only problem which drives me nuts is when i have to deal with UI (User Interface) issues.

I have to admit that it really looks beautiful when you can have your own custom CSS for your visualforce pages with wonderful styles. But, when it comes to fixing UI issues i actually spend a lot of time to find the bug. Hence, in this article i have put together the methodologies i use to overcome them. This saves lot of your time (GUARANTEED).

The " !important " keyword:

!important - meaning - DONT take what is in the CSS. take what i tell here.

Let's jump straight. Let's say that you have a "div" with the name "styleme" and the defenition is as follows

.styleme
{
  margin:o;
}

This implies that there should be no space between the margin of your browser (actually the parent div) and the contents in this div.
And, let's say that you have a visualforce page like this

<apex:page>
<style>
.styleme
{
  margin:o;
}
</style>
     <div class="styleme">
             Hi!!! I am styled!!!
     </div>
</apex:page>

Just assume that this works fine in FireFox and when you view the same page in Internet Explorer there is a huge gap from the margin. Adding a simple keyword makes it to work across all browsers. Your visualforce page would now be like

<apex:page>
<style>
.styleme
{
  margin:o !important;
}
</style>
     <div class="styleme">
             Hi!!! I am styled!!!
     </div>
</apex:page>

This is just an example of how to use this keyword. Real scenarios may arise when you use your own CSS in conjunction with the Standard CSS of Salesforce. In such cases this keyword helps a lot.

Other uses of this keyword:

One other, major use of this keyword is when you want to override the Standard Styles of Salesforce.Say for example that want to override the color of the Page Block Header (this is transparent by default). The following code gives a red color to the header.

<apex:page>
<style>
.pbHeader
{
  background-color: RED !important;
}
</style>
     <apex:pageblock>
         <apex:sectionheader title="My custom Header"/>
     </apex:pageblock> 
</apex:page>

FIREBUG

Firebug is a great plugin for Firefox which comes in handy for debugging your pages. It helps you identify the associated style classes very easily.
You can download it from here .. Click here
It is using this plugin that i found that the styleclass for the pageblock header was 'pbHeader'.


How to use this???

When you open any normal salesforce page, click on the "bug" icon at the rightmost bottom of the page.

Then click on the select tool, like this


And then select the Element of which you want to know the styleclass.
Page Block Header in our case.



When you use this for Visualforce pages and have the "development mode" on your user page turned "on", make sure to remove the page editor by replacing your url with

htttp://cs1.salesforce.com/apex/samplevfpage?core.apexpages.devmode.url=1

This parameter removes the Page Editor and you get the clean CSS and HTML to analyze using FireBug.

Comments and Questions welcome!!!

A year back, this same day i started this blog. I was not serious at blogging, to be frank. But, i was really surprised by the support and encouragement that every visitor to this blog has given me. Your encouragement keeps me going and drives me to write more articles...

Thank you all !!!!!

Keep visiting!!!

Here is a simple example of a HTTP callout... I guess it does not need much explanation

Do write to me in case you need further clarification....

public class UploadFile_DifferentOrg {

    public UploadFile_DifferentOrg(ApexPages.StandardController controller)
    {

    }
    String ErrorMessage;

    public void Login()
    {
        
        ErrorMessage='';
        final string baseUrl = 'https://login.salesforce.com/'; 
        final string username = 'test@test.com'; 
        final string password = 'test@123';
        Http h = new Http();
        HttpRequest req = new HttpRequest();
        req.setMethod('GET');
        req.setEndpoint(baseUrl + '?loginType=&un='+username+'&pw='+password);
        HttpResponse res = h.send(req);
        
          
           req.setEndpoint(baseUrl + 'apex/UploadFile_DifferentOrg');
           
           res = h.send(req);
           if (res.getBody().indexOf('success=true')>-1)
           {
              system.debug('Success');
           }  
        }
    

    }