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.

6 comments

  1. 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. it is an opportunity pagelayout and i want the typical yellow lines to go

    ReplyDelete
  3. 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. Does anyone know if there is an editor for Visual Force? Something like FronPage?

    ReplyDelete
  5. 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. 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