Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
DevelopersDevelopers 

How to develop visualforce pages based on HTML Pages

Hi,

 

       Any body pls help me.......

 

       I have to develop a page based on HTML Pages........which includes Header,Menubar and Banner,...........

 

       Pls help me, i am new to Visualforce.........

 

      Thanks in advance..........

Best Answer chosen by Admin (Salesforce Developers) 
EIE50EIE50

Hi,

 

Do you need standard salesforce stylings (look and feel) in your VF page, or you want your own custom look and feel in your Vf page?

 

If you want complete custom look and feel, this is how you should proceed.

 

<apex:page controller="your controller" standardstylesheets="false" showheader="false">

  <html>

      <head>

          .style1{

             color : red;

             etc,.,.,. //give all your stylings like this in different classes

          }

         .style2{

             color :blue;

             etc,.,.,.

          }

        //give all your stylings like this in different classes

      </head>

 

      <body>

            <p class="style1">

                  Your text

            </p>

          <!-- Code for navigation / menu bar -->

             <ul class="yourstyleclass declared in the head section">

                   <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>            

             </ul>

      </body>

  </html>

</apex:page>

 

<li> lists your links, but using css you can dispaly it horizontally or vertically. You can go to w3schools.com to learn a bit of css and you should be good to go.

 

Thanks.

All Answers

sfdcfoxsfdcfox

If you want to, you can include an entire HTML document directly within the <apex:page> tags. There's no need to think that you have to perform any special tricks to get the page looking exactly like you want to. Just make sure you turn off the standard style sheets and headers (these are attributes of the <apex:page> tag).
DevelopersDevelopers

Thanks for reply.........

 

I tried the same. But, it is giving like a normal page without bgcolor,image and buttons.....

 

Pls suggest me, how to do this.......
EIE50EIE50

Did you include your custom style sheets in your page? Make sure you specify stylings and you will see the required.

 

Thanks.
sfdcfoxsfdcfox
<apex:page showHeader="false" standardStylesheets="false" sidebar="false">
    <html>
        <head>
            <title>Test</title>
        </head>
        <body>
            <p>This is a test.</p>
        </body>
    </html>
</apex:page>

Is rendered as the following:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>
        <head>
<script src="/jslibrary/1309972098000/JiffyStubs.js" type="text/javascript"></script><meta HTTP-EQUIV="PRAGMA" CONTENT="NO-CACHE" />
<meta HTTP-EQUIV="Expires" content="Mon, 01 Jan 1990 12:00:00 GMT" />

            <title>Test</title>
        </head>
        <body>

            <p>This is a test.</p>
        </body>
    </html>

As you can see, it adds some cache metadata and a single library (JiffyStubs), but it leaves your code otherwise perfectly intact.
DevelopersDevelopers

Hi,

 

      thanks for reply.....

 

      But, how we can achieve the same in visual force pages......By applying bgcolour,alignment,..............
DevelopersDevelopers

Hi,

 

 

I am trying like this.......pls check once.........

 

<apex:page showHeader="false" standardStylesheets="false" sidebar="false">
    <html>
        <body>
<!-- begin main container -->
<p align="RIGHT">
<a href="#">Home</a><span class="verbarheader_padding">|</span><a href="#">About SelectWD</a><span class="verbarheader_padding">|</span><a href="newsevents.html">News &amp; Events</a><span class="verbarheader_padding">|</span><a href="#">Logout</a> &nbsp;&nbsp;
<form id="yourform" name="yourform" method="post" action="">
    <input name="search" type="text" value="Search" />
  <input type="submit" name="Go" id="Go" value="Go" />
</form>
</p>
<div id="maincontainer">
<!-- begin main header -->
        <div id="header_top">
        <div id="search">
        </div><!-- end search -->
        </div> </div> </body>
      </html>
</apex:page>

 

 

 

 

 
sfdcfoxsfdcfox

You have no style sheet information, so your "class" attributes have no effect. Use any standard CSS import method (@import, <link> tag, <style> tag, etc) to import your style definitions, or copy and paste them inline to your page code.
DevelopersDevelopers

Hi Friend,

 

             Could u pls help me for creation of menubar in a visualforce page........
EIE50EIE50

Hi,

 

Do you need standard salesforce stylings (look and feel) in your VF page, or you want your own custom look and feel in your Vf page?

 

If you want complete custom look and feel, this is how you should proceed.

 

<apex:page controller="your controller" standardstylesheets="false" showheader="false">

  <html>

      <head>

          .style1{

             color : red;

             etc,.,.,. //give all your stylings like this in different classes

          }

         .style2{

             color :blue;

             etc,.,.,.

          }

        //give all your stylings like this in different classes

      </head>

 

      <body>

            <p class="style1">

                  Your text

            </p>

          <!-- Code for navigation / menu bar -->

             <ul class="yourstyleclass declared in the head section">

                   <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>            

             </ul>

      </body>

  </html>

</apex:page>

 

<li> lists your links, but using css you can dispaly it horizontally or vertically. You can go to w3schools.com to learn a bit of css and you should be good to go.

 

Thanks.

This was selected as the best answer
nickfs92840nickfs92840

How can I add my own api fields into a table I created in HTML? 

 

The above seems good, but how do I add the api fields to my HTML? What is the proper apex tag name?

 

Thanks!
sfdcfoxsfdcfox

Use <apex:inputField value="{!objectname.fieldname}"/> ... the force.com platform will automatically render a select box or input field, etc depending on the data type of the field.
James MichaelssonJames Michaelsson
I've had problems with visualforce pages too. It took about couple days to create website. Look at what I was able to do http://www.essaytrust.org/ (http://www.essaytrust.org)
shephalishephali
Hi James,

      The website "http://www.essaytrust.org" look great. Did you develop it using force.com???
    I also need to creat a eCommerce website and i am facing tons of problems with it as i am new to this.

Thanks
 
Imran Hussain 2Imran Hussain 2
Hi,

I am using below code to show data on Visualforce page.
<span id="{!pos.hHold.id}"><a href="/{!pos.hHold.id}" style="{!IF(pos.currentNode,'font-weight: bold;','')}" styleClass="columnHeadActiveBlack" target="_top">{!pos.hHold.name} - {!pos.hHold.ClientFullNm__c}</a></span>

AND using <a href="javascript:window.print%28%29%3B" class="printLink">Print This Page</a> It will give a way to print the page. So far its working fine but once click on "Print This Page" link, it will show record along with record id (which is coming from href="/{!pos.hHold.id}"). I don't want to show record id on print preview page. I have tried with other option like <output> instead of <a> and it resolved my problem but I am not able to open record while clicking on record name on visualforce page. That can we only done using <a>. Is there any way I can hide href="/{!pos.hHold.id}" value on print preview page?
Quick response is highly appreciate.

Thanks,
Imran