Visualforce Page Styling - some useful stylings

2:41 AM

I found some style specifications which i thought would be worth sharing...

Here it is..

Positioning

Get Rid of   for adding white spaces to your Visualforce Page. Here is a better way of doing it..

<div style="position:relative;left:75px;">

Left specifies how many pixels from the left of the screen should the component be displaced. Right,top,bottom also can be used..

Put your Visualforce tags inside this div.

To draw a coloured box(container) to place components inside it

<div style="border-width:2px;border-style:solid;border-color:orange;">

Visualforce tags placed inside this div will appear with a orange coloured box.

Remove Blue Border around images as links in IE:

IE displays a blue border around images to denote that it is a link. To remove it use the following code


a img {border-style: none; }

color:transparent does not work in IE:

IE does not recognize this property, whereas Firefox and Safari does. To overcome this, use the following code.

a span{
            visibility:hidden;
         } 

Check this article for the complete description ... Click here . Check the bottom most part of the article for a full example.

Share This Story

Tags:

6 comments

  1. UnknownJuly 11, 2009 at 11:18 AM

    i have embedded a vf output page section in the already existing standard pagelayout . to make it seamless with other sections i want this line to go . do you have any idea that how to remove it .

    ReplyDelete
  2. UnknownJuly 11, 2009 at 11:34 AM

    it is an opportunity pagelayout and i want the typical yellow lines to go

    ReplyDelete
  3. Edwin RaymondJuly 13, 2009 at 9:29 AM

    Hi Vijay...

    I suppose we cant control this.. but if i get any idea i will keep you posted for sure..

    And, thanks a lot for following my blog..

    ReplyDelete
  4. OlegJuly 21, 2009 at 8:59 AM

    Does anyone know if there is an editor for Visual Force? Something like FronPage?

    ReplyDelete
  5. Edwin RaymondJuly 21, 2009 at 9:09 AM

    Hello Oleg..

    There is not a visual editor available as of now.. But i believe you must be aware of the PageEditor.. Even though you cannot drag and drop components you can still get assistance while you type your code..

    ReplyDelete
  6. Edwin RaymondJuly 23, 2009 at 2:50 AM

    Hey Oleg,

    I just found a app released by salesforce labs.. I have not used it yet but thought would be of help to you..

    https://sites.secure.force.com/appexchange/listingDetail?listingId=a0N30000001SlHNEA0

    ReplyDelete