SlideShare a Scribd company logo
1 of 13
Forcetree.com Visualforce CSS User Guide – Tips for CSS implementation in Visualforce Pages
VisualForce offers the ability to customize the look and feel of your VisualForce Pages. This guide is intended to cover the methodologies to be followed, and some best practices while implementing your own look and feel using custom styles. Do visit http://www.forcetree.com (my personal blog) for more examples and articles. Abstract
<apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForcepages. Let us start by creating a simple page with some basic styles.  <apex:pageshowheader="false" sidebar="false">             <apex:form><h1> This is my first VisualForce Page! </h1>  </apex:form></apex:page> Let’s walk through the code line by line <apex:pageshowheader="false" sidebar="false">When you set showheader=“false” the sidebar is also removed by default, however when you set sidebar=“false” the header will still display (obviously ) The point to note here is when the header is removed Salesforce default stylesheets is no longer applied. Hence if you paste ordinary HTML code it will work perfectly. Getting Started
One step further….. Let’s modify the code and add a button.. <apex:pageshowheader="false" sidebar="false">            <apex:form>                 <h1> This is my first VisualForce Page! </h1>                   <apex:commandButton value="Done"></apex:commandButton>          </apex:form>      </apex:page> What did you notice? You’re right, the size of the text has reduced when you have not done anything to it. Why is this so? It is because we have used <apex:commandbutton> tag. This causes salesforce Standard stylesheets to be used. Not only this tag, but there are many others which cause a conflict. Hey!!, don’t worry there’s a way out there. Getting Started (cont..)
<apex:pageshowheader="false" sidebar="false" standardstylesheets=”false”> This will remove the salesforce standard stylesheets and you can now use your own styles without any worries. But, of course there are many more problems to be faced… Now lets add some color and effects…       <apex:pageshowheader="false" sidebar="false"> 	<apex:form> 		<h1 style="text-align:center;color:blue;"> 		This is my first VisualForce Page! </h1> 	</apex:form> </apex:page> Output: This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag STYLING….
When not to use INLINE STYLING???? Suppose if you have ten <h1> tags in your page and you want all the text displayed in BLUE. Ideally you would have to add INLINE styles in all your ten <h1> tags.Toovercome this, we use <style> tag. We will modify our previous example using <style> tag. <apex:pageshowheader="false" sidebar="false"> <style>   h1   { text-align:center; color:blue;   } </style> <apex:form>    <marquee> <h1> This is my first VisualForce Page! </h1> </marquee>    <h1> This text is displayed without INLINE styles </h1> </apex:form> </apex:page>                                    OUTPUT: STYLING….
USING STYLE CLASS…. How about a more complicated page with styleclass?. Adding many styles into a single holder is called a styleclass. You can then use the styleclass anywhere in your page <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <style> .red { background-color:red;} .green { background-color:green;} .blue { background-color:blue;} </style>    <apex:form >    <h1 style="text-align:center;color:blue;"> This is my first VisualForce Page! </h1>    <apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue"> <apex:columnheadervalue="Contact FirstName"> <apex:outputfieldvalue="{!con.FirstName}"/> </apex:column> <apex:columnheadervalue="Contact LastName"> <apex:outputfieldvalue="{!con.LastName}"/> </apex:column> <apex:columnheadervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/></apex:column>    </apex:datatable>    </apex:form> </apex:page>                                                         OUTPUT:
USING STYLE CLASS…. cont In the above code sample when you say columnclasses="red,green,blue" in <apex:datatable> tag it means that the styleclass "red" would be applied for the first column, "green" would be applied forthe second column and "blue“ would be applied for the third column. When you have a fourth column "red" styleclass would be applied again, because it works in a repetitive fashion. You can use as many classses as you need for any number of columns.
CSS with Visualforce CSS – stands for Cascading Style Sheets. It is a file which ends with the extension “.css” (Ex: mystyles.css) Why use CSS? Readability : Using a CSS makes your code more readable. It separates your style definitions from your Visualforce page. Reusability : You can use your CSS file across multiple visualforce pages, and whenever you need modifications to your styles changing the CSS file would change all your underlying Visualforce pages. Let us modify the previous example using   STYLECLASS   and achieve the same using CSS. Creating a CSS file: Step 1: Open Notepad, or any text editor. cont ….
CSS with Visualforce           (cont …..) Step 2: Paste the following code .red { background-color:red;} .green { background-color:green;} .blue { background-color:blue;} Save this file as, “mystyle.css” Step3: Upload this file into Static Resources, name the resource as “mystyle”.
CSS with Visualforce           (cont …..) Step 2: Create a visualforce page with the following code <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.mystyle)}"/> <apex:form >    <h1 style="text-align:center;color:blue;"> This is my first VisualForce Page! </h1>    <apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue"> <apex:columnheadervalue="Contact FirstName"> <apex:outputfieldvalue="{!con.FirstName}"/> </apex:column> <apex:columnheadervalue="Contact LastName"> <apex:outputfieldvalue="{!con.LastName}"/> </apex:column> <apex:columnheadervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/></apex:column>    </apex:datatable>    </apex:form> </apex:page> The line in GREEN denotes the place where we actually reference our CSS file in our Visualforce Page
CSS FOLDER with Visualforce CSS Folder: When you download/buy CSS from an external vendor like http://www.freecsstemplates.org/, the CSS usually comes as a bunch of files and folders as shown below. This is because your CSS uses IMAGES, and some other files, all of which are placed into the respective folders. For  your CSS to work properly, you would need these folders. In such a case, create a ZIP file of all the files shown above. For Example, Just place all the files shown above into a folder called “stylefiles”. Make a ZIP file of this, and call it “stylefiles.zip”. Now, upload this ZIP file into Static Resources with the name “stylezip”. Now, we will need to reference this CSS into our Visualforce Page.
CSS FOLDER with Visualforce Create a Visualforce Page with the following code. <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.stylezip ,'stylefiles/style.css')}"/> </apex:page> Note: “stylefiles/style.css”. Here, stylefiles is the folder name within which you have the style.css file.  If you have the CSS within a different folder, you will have to specify the appropriate structure.

More Related Content

What's hot

Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSBG Java EE Course
 
Creating a webpage in html
Creating a webpage in htmlCreating a webpage in html
Creating a webpage in htmlShrey Goswami
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you needDipen Parmar
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Contentmaycourse
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingStu King
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop NotesPamela Fox
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5Gheyath M. Othman
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSSMario Hernandez
 

What's hot (15)

Creating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSSCreating Web Sites with HTML and CSS
Creating Web Sites with HTML and CSS
 
Creating a webpage in html
Creating a webpage in htmlCreating a webpage in html
Creating a webpage in html
 
Html css java script basics All about you need
Html css java script basics All about you needHtml css java script basics All about you need
Html css java script basics All about you need
 
Css 2010
Css 2010Css 2010
Css 2010
 
Webpages And Dynamic Content
Webpages And Dynamic ContentWebpages And Dynamic Content
Webpages And Dynamic Content
 
The Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint BrandingThe Pragmatist's Approach to SharePoint Branding
The Pragmatist's Approach to SharePoint Branding
 
Master page
Master pageMaster page
Master page
 
HTML & CSS Workshop Notes
HTML & CSS Workshop NotesHTML & CSS Workshop Notes
HTML & CSS Workshop Notes
 
How To Write Beautiful Code
How To Write Beautiful CodeHow To Write Beautiful Code
How To Write Beautiful Code
 
Web Design Course: CSS lecture 5
Web Design Course: CSS  lecture 5Web Design Course: CSS  lecture 5
Web Design Course: CSS lecture 5
 
David Weliver
David WeliverDavid Weliver
David Weliver
 
Tercer trabajo de drapi 02
Tercer trabajo de drapi 02Tercer trabajo de drapi 02
Tercer trabajo de drapi 02
 
Introduction to HTML4
Introduction to HTML4Introduction to HTML4
Introduction to HTML4
 
Introduction to HTML and CSS
Introduction to HTML and CSSIntroduction to HTML and CSS
Introduction to HTML and CSS
 
CSS
CSSCSS
CSS
 

Viewers also liked

A research on- Sales force Project- documentation
A research on- Sales force Project- documentationA research on- Sales force Project- documentation
A research on- Sales force Project- documentationPasupathi Ganesan
 
Recruitment Application full SRS developed in Salesforce.com
Recruitment Application full SRS developed in Salesforce.comRecruitment Application full SRS developed in Salesforce.com
Recruitment Application full SRS developed in Salesforce.comRavi Gupta
 
Angular-ifying Your Visualforce Pages
Angular-ifying Your Visualforce PagesAngular-ifying Your Visualforce Pages
Angular-ifying Your Visualforce PagesSalesforce Developers
 
Salesforce course-training-material
Salesforce course-training-materialSalesforce course-training-material
Salesforce course-training-materialsfdc232
 

Viewers also liked (8)

A research on- Sales force Project- documentation
A research on- Sales force Project- documentationA research on- Sales force Project- documentation
A research on- Sales force Project- documentation
 
Salesforce crm projects
Salesforce crm projects Salesforce crm projects
Salesforce crm projects
 
Recruitment Application full SRS developed in Salesforce.com
Recruitment Application full SRS developed in Salesforce.comRecruitment Application full SRS developed in Salesforce.com
Recruitment Application full SRS developed in Salesforce.com
 
Angular-ifying Your Visualforce Pages
Angular-ifying Your Visualforce PagesAngular-ifying Your Visualforce Pages
Angular-ifying Your Visualforce Pages
 
Interview questions
Interview questionsInterview questions
Interview questions
 
Salesforce course-training-material
Salesforce course-training-materialSalesforce course-training-material
Salesforce course-training-material
 
MVC - Introduction
MVC - IntroductionMVC - Introduction
MVC - Introduction
 
Web api
Web apiWeb api
Web api
 

Similar to Visualforce css developer guide(by forcetree.com)

Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Finalematrix
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010Brendan Sera-Shriar
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from AustinLisa Adkins
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksCompare Infobase Limited
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 PresentationMichael Gwyther
 
Html in a box
Html in a boxHtml in a box
Html in a boxbdubuque
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introductionapnwebdev
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless OpacBill Drew
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Hatem Mahmoud
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakessanjay2211
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practicessachin9737
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practicesguest3ebcca
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPyucefmerhi
 
Advance Css
Advance CssAdvance Css
Advance Cssvijayta
 

Similar to Visualforce css developer guide(by forcetree.com) (20)

CSS
CSSCSS
CSS
 
Css
CssCss
Css
 
Html Expression Web
Html Expression WebHtml Expression Web
Html Expression Web
 
Flex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 FinalFlex For Flash Developers Ff 2006 Final
Flex For Flash Developers Ff 2006 Final
 
CSS Best practices
CSS Best practicesCSS Best practices
CSS Best practices
 
Html 101
Html 101Html 101
Html 101
 
WordPress Development Confoo 2010
WordPress Development Confoo 2010WordPress Development Confoo 2010
WordPress Development Confoo 2010
 
What I brought back from Austin
What I brought back from AustinWhat I brought back from Austin
What I brought back from Austin
 
How do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML TricksHow do speed up web pages? CSS & HTML Tricks
How do speed up web pages? CSS & HTML Tricks
 
Block2 Session2 Presentation
Block2 Session2 PresentationBlock2 Session2 Presentation
Block2 Session2 Presentation
 
Html in a box
Html in a boxHtml in a box
Html in a box
 
1 03 - CSS Introduction
1 03 - CSS Introduction1 03 - CSS Introduction
1 03 - CSS Introduction
 
Cheat codes
Cheat codesCheat codes
Cheat codes
 
The Frameless Opac
The Frameless OpacThe Frameless Opac
The Frameless Opac
 
Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02Cascading Style Sheets - Part 02
Cascading Style Sheets - Part 02
 
Basics Of Css And Some Common Mistakes
Basics Of Css And Some Common MistakesBasics Of Css And Some Common Mistakes
Basics Of Css And Some Common Mistakes
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practices
 
Css Best Practices
Css Best PracticesCss Best Practices
Css Best Practices
 
Lecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITPLecture 2 - Comm Lab: Web @ ITP
Lecture 2 - Comm Lab: Web @ ITP
 
Advance Css
Advance CssAdvance Css
Advance Css
 

Recently uploaded

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftshyamraj55
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxDavid Michel
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekCzechDreamin
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeCzechDreamin
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutesconfluent
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIES VE
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomCzechDreamin
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty SecureFemke de Vroome
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGDSC PJATK
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxJennifer Lim
 

Recently uploaded (20)

Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptxUnpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Speed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in MinutesSpeed Wins: From Kafka to APIs in Minutes
Speed Wins: From Kafka to APIs in Minutes
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
IESVE for Early Stage Design and Planning
IESVE for Early Stage Design and PlanningIESVE for Early Stage Design and Planning
IESVE for Early Stage Design and Planning
 
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone KomSalesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
Salesforce Adoption – Metrics, Methods, and Motivation, Antone Kom
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Google I/O Extended 2024 Warsaw
Google I/O Extended 2024 WarsawGoogle I/O Extended 2024 Warsaw
Google I/O Extended 2024 Warsaw
 
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptxWSO2CONMay2024OpenSourceConferenceDebrief.pptx
WSO2CONMay2024OpenSourceConferenceDebrief.pptx
 

Visualforce css developer guide(by forcetree.com)

  • 1. Forcetree.com Visualforce CSS User Guide – Tips for CSS implementation in Visualforce Pages
  • 2. VisualForce offers the ability to customize the look and feel of your VisualForce Pages. This guide is intended to cover the methodologies to be followed, and some best practices while implementing your own look and feel using custom styles. Do visit http://www.forcetree.com (my personal blog) for more examples and articles. Abstract
  • 3. <apex:page>is the topmost tag in any VisualForce Page. This tag determines the styles to be used in your VisualForcepages. Let us start by creating a simple page with some basic styles. <apex:pageshowheader="false" sidebar="false"> <apex:form><h1> This is my first VisualForce Page! </h1> </apex:form></apex:page> Let’s walk through the code line by line <apex:pageshowheader="false" sidebar="false">When you set showheader=“false” the sidebar is also removed by default, however when you set sidebar=“false” the header will still display (obviously ) The point to note here is when the header is removed Salesforce default stylesheets is no longer applied. Hence if you paste ordinary HTML code it will work perfectly. Getting Started
  • 4. One step further….. Let’s modify the code and add a button.. <apex:pageshowheader="false" sidebar="false"> <apex:form> <h1> This is my first VisualForce Page! </h1> <apex:commandButton value="Done"></apex:commandButton> </apex:form> </apex:page> What did you notice? You’re right, the size of the text has reduced when you have not done anything to it. Why is this so? It is because we have used <apex:commandbutton> tag. This causes salesforce Standard stylesheets to be used. Not only this tag, but there are many others which cause a conflict. Hey!!, don’t worry there’s a way out there. Getting Started (cont..)
  • 5. <apex:pageshowheader="false" sidebar="false" standardstylesheets=”false”> This will remove the salesforce standard stylesheets and you can now use your own styles without any worries. But, of course there are many more problems to be faced… Now lets add some color and effects… <apex:pageshowheader="false" sidebar="false"> <apex:form> <h1 style="text-align:center;color:blue;"> This is my first VisualForce Page! </h1> </apex:form> </apex:page> Output: This is called INLINE STYLING, it is called so because we have used style=” “ attribute inside the <h1> tag STYLING….
  • 6. When not to use INLINE STYLING???? Suppose if you have ten <h1> tags in your page and you want all the text displayed in BLUE. Ideally you would have to add INLINE styles in all your ten <h1> tags.Toovercome this, we use <style> tag. We will modify our previous example using <style> tag. <apex:pageshowheader="false" sidebar="false"> <style> h1 { text-align:center; color:blue; } </style> <apex:form> <marquee> <h1> This is my first VisualForce Page! </h1> </marquee> <h1> This text is displayed without INLINE styles </h1> </apex:form> </apex:page> OUTPUT: STYLING….
  • 7. USING STYLE CLASS…. How about a more complicated page with styleclass?. Adding many styles into a single holder is called a styleclass. You can then use the styleclass anywhere in your page <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <style> .red { background-color:red;} .green { background-color:green;} .blue { background-color:blue;} </style> <apex:form > <h1 style="text-align:center;color:blue;"> This is my first VisualForce Page! </h1> <apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue"> <apex:columnheadervalue="Contact FirstName"> <apex:outputfieldvalue="{!con.FirstName}"/> </apex:column> <apex:columnheadervalue="Contact LastName"> <apex:outputfieldvalue="{!con.LastName}"/> </apex:column> <apex:columnheadervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/></apex:column> </apex:datatable> </apex:form> </apex:page> OUTPUT:
  • 8. USING STYLE CLASS…. cont In the above code sample when you say columnclasses="red,green,blue" in <apex:datatable> tag it means that the styleclass "red" would be applied for the first column, "green" would be applied forthe second column and "blue“ would be applied for the third column. When you have a fourth column "red" styleclass would be applied again, because it works in a repetitive fashion. You can use as many classses as you need for any number of columns.
  • 9. CSS with Visualforce CSS – stands for Cascading Style Sheets. It is a file which ends with the extension “.css” (Ex: mystyles.css) Why use CSS? Readability : Using a CSS makes your code more readable. It separates your style definitions from your Visualforce page. Reusability : You can use your CSS file across multiple visualforce pages, and whenever you need modifications to your styles changing the CSS file would change all your underlying Visualforce pages. Let us modify the previous example using STYLECLASS and achieve the same using CSS. Creating a CSS file: Step 1: Open Notepad, or any text editor. cont ….
  • 10. CSS with Visualforce (cont …..) Step 2: Paste the following code .red { background-color:red;} .green { background-color:green;} .blue { background-color:blue;} Save this file as, “mystyle.css” Step3: Upload this file into Static Resources, name the resource as “mystyle”.
  • 11. CSS with Visualforce (cont …..) Step 2: Create a visualforce page with the following code <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.mystyle)}"/> <apex:form > <h1 style="text-align:center;color:blue;"> This is my first VisualForce Page! </h1> <apex:datatable value="{!Account.Contacts}" var="con" border="1" cellspacing="5" cellpadding="5" columnClasses="red,green,blue"> <apex:columnheadervalue="Contact FirstName"> <apex:outputfieldvalue="{!con.FirstName}"/> </apex:column> <apex:columnheadervalue="Contact LastName"> <apex:outputfieldvalue="{!con.LastName}"/> </apex:column> <apex:columnheadervalue="Contact Name"> <apex:outputfield value="{!con.Title}"/></apex:column> </apex:datatable> </apex:form> </apex:page> The line in GREEN denotes the place where we actually reference our CSS file in our Visualforce Page
  • 12. CSS FOLDER with Visualforce CSS Folder: When you download/buy CSS from an external vendor like http://www.freecsstemplates.org/, the CSS usually comes as a bunch of files and folders as shown below. This is because your CSS uses IMAGES, and some other files, all of which are placed into the respective folders. For your CSS to work properly, you would need these folders. In such a case, create a ZIP file of all the files shown above. For Example, Just place all the files shown above into a folder called “stylefiles”. Make a ZIP file of this, and call it “stylefiles.zip”. Now, upload this ZIP file into Static Resources with the name “stylezip”. Now, we will need to reference this CSS into our Visualforce Page.
  • 13. CSS FOLDER with Visualforce Create a Visualforce Page with the following code. <apex:pageshowheader="false" sidebar="false" standardcontroller="Account" standardstylesheets="false"> <apex:stylesheet value="{!URLFOR($Resource.stylezip ,'stylefiles/style.css')}"/> </apex:page> Note: “stylefiles/style.css”. Here, stylefiles is the folder name within which you have the style.css file. If you have the CSS within a different folder, you will have to specify the appropriate structure.