Many customers have sent me emails over the past few months inquiring about how to make certain parts of a Visualforce page look different. This is the first of a three-part blog series, starting with this one, to show how you can easily modify various parts of SkyVisualEditor Visualforce pages. The process we will discuss is no different than if you wanted to hand-code and style a traditional Visualforce page. Here are the tools you’ll need to follow along with this blog series:
1. Visualforce IDE. You can use a preferred development IDE or you can use SkyVisualEditor to follow along. The CSS I will be showing is tailored to SkyVisualEditor, but the concepts are universal.
2. HTML/CSS Inspector. Depending on the browser you use, you’ll want to download or figure out how to use the native HTML/CSS inspector. I will be using Firebug in this blog series to identify things.
3. Text Editor. Pick your favorite text editor to use for creating the CSS or modifying the file that is available for download through this blog. I use Notepad++ and Atom; both are fantastic text editors.
Which Visualforce Tags Do We Modify With the CSS?
Many newcomers to the world of Visualforce often are Salesforce administrators who are being forced into using Visualforce. This is a great learning opportunity, but it can also cause a lot of frustration during the learning process. Let’s explain how Visualforce works. When we create Visualforce in our favorite IDE, or SkyVisualEditor, we are producing Salesforce specific markup language. HTML is the markup language used to create all web pages. Essentially, this means that the Visualforce page we’ve created will be translated by Salesforce into HTML. Now that the page is in HTML, we can begin the process of applying CSS to the markup language to make it look like we want.
Using any HTML and CSS inspector that you’d like, you can open the inspector when looking at your Visualforce page. This is why I use Firebug. You should see a portion of the inspector that shows all of the HTML code on one side and a bunch of CSS and/or JavaScript code on the other side. Here is a sample of what things look like with Firebug.
For people who are not developers, this might seem overwhelming at first, but we will cover how to easily use these inspectors to achieve your desired results. In Firebug the left side is the HTML code of the Visualforce page and the right side is all of the CSS associated with the HTML tag that is selected (highlighted blue). If you are using two monitors, I would suggest having Firebug open on one monitor and your Visualforce page open on the other. This will drastically speed up things, but you can also use a single screen with the two windows side-by-side. As you hover over an HTML element within Firebug, you will see that a portion of your Visualforce page is highlighted blue. This is to show you what portions of the web page that HTML tag governs. This is extremely helpful for identifying if we are working with the correct areas of HTML code. Once you find the right HTML elements, we can begin to modify the CSS to meet our needs.
Let’s Modify the DataTable’s CSS
The image above is the end result of the CSS we are about to implement. It comes with a column header and row highlights. If you are branding your pages to match your company colors, you will simply change the color that is being used from white to the new color. Let’s begin!
#bodyCell a{ color: #005FB2 !important; } td .odd{ background-color: #fff !important; } tr.dataRow.highlight td, .errorConsole .x-grid3-row-over, body .pbBody table.list tr.dataRow.highlight td, body .pbBody table.list tr.dataRow.highlight th{ background-color: #EEF1F6 !important; } body .pbBody table.list tr.headerRow td, body .pbBody table.list tr.headerRow th{ background-color: #fff; } body .pbBody table.list tr.headerRow th:hover{ background-color: #EEF1F6; }
The CSS above is all of the code we will be using today. We will dissect what each portion is doing and how to add it to the Visualforce page itself.
This first portion is very simple. It looks at any anchor references, HTML links, and turns them blue. This is to make sure that the links on the page are obvious. Salesforce Lightning has done a great job of making things more obvious to the user. These kinds of small changes are subtle but impactful. The !important text is there to ensure that this code takes priority over anything else that Salesforce might be doing to modify the color of this text.
td .odd{ background-color: #fff !important; }
The snippet above removes the row coloring that takes place in DataTables. Odd rows are colored slightly differently to stand out when looking at a list. However, with Lightning, the tables are now pure white with a highlight color for the rows and header.
tr.dataRow.highlight td, .errorConsole .x-grid3-row-over, body .pbBody table.list tr.dataRow.highlight td, body .pbBody table.list tr.dataRow.highlight th{ background-color: #EEF1F6 !important; }
This 3rd portion sets the row highlight when the record is moused over. It is a light gray color, but you can easily change that to a different color if you need a darker highlight or different hue/contrast.
body .pbBody table.list tr.headerRow td, body .pbBody table.list tr.headerRow th{ background-color: #fff; }
The 4th portion sets the table header to pure white. This follows the design style of the new Lightning tables. If you desire to have headers that stand out, you can change the background color to a different hue and contrast to ensure the user understands the distinction between the header and body of the table.
body .pbBody table.list tr.headerRow th:hover{ background-color: #EEF1F6; }
The final portion is going to set the highlight color for the column headers. When you mouse over each of the column headers, they will turn from white to light gray. Again, if you desire to have a contrasting highlight or a darker highlight, simply modify the background-color.
Putting it all together
Let’s put all of the pieces together. Open your text editor and paste the code that is mentioned above in your text editor. Then save that file as a CSS document. Once you’ve saved your file, you can now upload it to Salesforce’s Static Resources.
Setup –> Build –> Develop –> Static Resources
Once you’ve created a new Static Resource for your CSS file, you’re ready to associate the CSS to the Visualforce page. If you are modifying your custom made Visualforce page you will want to use the following line of code to reference the CSS class Static Resource:
<apex: stylesheet value=”{!Resource.MyCSS}”/>
If you are using SkyVisualEditor, you will open the PageStyle section and click the Stylesheet Include Settings button. Click the Add button in the modal window that appears. Enter a line of code that references your CSS file. Below is a sample of what that would look like.
Now that you’ve added your CSS class to your Visualforce page, make sure to save it or deploy it to Salesforce to verify that the styles have been correctly applied and are visible to the end-user.
Summary
Designing great-looking Visualforce pages are simple to do if you have the right tools and a basic understanding of how to use CSS or JavaScript. In this tutorial, we covered the tools I use to figure out what tags need to be modified and then showed some CSS that edits DataTables within SkyVisualEditor. Over the next few blogs, we will be covering how to change and modify PageBlockSections, Fields, Tabs, and Buttons. We hope you find these walk-throughs helpful!