Setup and Page Creation
Many of our customers and prospects utilize SkyVisualEditor to create highly customized Salesforce pages, which include changing the overall look of Salesforce quite a bit. This article will address how to add in your own custom CSS changes to your pages. In this walkthrough, we will make the assumption that you have seen the basics of how SkyVisualEditor works and/or are familiar with it from personal use. If this is not the case, feel free to learn the basics by watching our video on Environment Setup and Getting Started. Below is a screenshot of the finished style that we will be creating today:
The first step in this process is to create your page in SkyVisualEditor. SkyVisualEditor does not display custom CSS code in the studio, so you will want to design the layout of the page first and then focus on adding in your custom code. We will use the custom page below for the starting point of our modifications.
Step 1
Now that the page is designed we need to begin changing the look of it with the custom CSS. On the right side of the SkyVisualEditor studio, there is a tab called “Page”, click that tab. Next, find the section called PageStyle and expand it. Click the Edit PageStyle button. This will open the in-studio CSS editor that we will use for the next few steps. Paste the code below into the in-studio CSS editor.
.sveTabColorBlueInActive .sveTabColorBlueActive{ background-image: none !important; }
.rich-tab-inactive{ background-color: #ebecf0; border-color: #ebecf0; color:black !important; background-image:none; border-width: 2px 2px 0; font-weight: bold; padding: 7px; }
.rich-tab-active{ background-color: #0f6fb2; color:white !important; background-image:none; border-color: #0f6db2; border-width: 2px 2px 0; font-weight: bold; padding: 7px; }
Click the OK button when you are done pasting the code into the studio. Next, click File–>Deploy–>specify whether it is going to Sandbox or production–>click Deploy. This will send your page, with the custom CSS into Salesforce. Below is an example of what you should see. Notice that the changes have only effected the interior tabs. The active tab color is now blue and tabs that are not actively selected are gray.
Step 2
Let’s continue our changes. Go back to the SkyVisualEditor studio. Open the PageStyle editor and scroll to the bottom. Add the code below to the end of the PageStyle editor.
.btn, .button,.formulaButton, .btnWhatsNew{ background: #ebecf0 !important; border-color: #0f6fb2 !important; font-family: Verdana !important; }
tr.dataRow.highlight td{ background-color: #B5D2D5 !important; }
.mainTitle, h3, .apexp .bPageBlock.apexDefaultPageBlock .pbBody .pbSubheader{ color: #0F6FB2 !important; }
.mainTitle{ font-size:18px !important; }
The code above will change the way the buttons look, change the way the PageBlockSection headers look, change the way the PageBlock headers look and add a color change to the related list hover-over effect. Click the OK button when you are done pasting the code into the studio and deploy the page into your Salesforce environment. Below is how the new change affected the page.
Step 3
We will repeat this process one more time. Enter the SkyVisualEditor platform once more and open the CSS editor. Copy the code below and paste it into the bottom of the CSS editor window. One thing important to note is that the sections that are highlighted in the code below are specific to the object they reference. If you are using a standard object, let’s say Account, then the highlighted tags will be specific to the standard object only. You will need to add additional code specific for the Opportunity object if you wish to reuse this code for that object as well. You can see how this is done by looking at the different parts of the code that are bold. This should only be necessary for standard objects, but if you don’t know to look for this than it could cause an unexpected result when you try to use this code in a page for a standard object.
body, td{ font-family: verdana; color: #000 !important; }
body .bPageBlock .pbBody .labelCol, body .print .topics-label{ color: #000 !important; }
.accountTab .tertiaryPalette, .individualPalette .accountBlock .tertiaryPalette, .layoutEdit .individualPalette .accountBlock .tertiaryPalette, .opportunityTab .tertiaryPalette, .individualPalette .opportunityBlock .tertiaryPalette, .layoutEdit .individualPalette .opportunityBlock .tertiaryPalette{ background-color: transparent !important; font-size: 16px !important; }
.rich-tab-header, body .x-btn button, body .btn, body .btnImportant, body .btnDisabled, body .btnCancel, body .menuButton .menuButtonButton, body .menuButton .menuButtonMenu a, body .menuButton .menuButtonMenu input.theOption, h1, h2, h3, h4, h5, h6{ font-family: Verdana; }
.rich-tabhdr-side-cell{ border-top-color: #ebecf0; }
.rich-tab-bottom-line{ background-color: #0f6fb2; }
This newly added code will change the main body’s font family, it will change the way sub-headers look (no longer will they have a bar spanning the page), it will place a blue background on the tab header, and it will provide a darker gray for the alternating line items in your related lists. Deploy the page once you have finished adding the CSS to the PageStyle editor. Below is what the final result will look like.
Create the CSS Template
Now that we have created the final page style that we want we need to create the CSS “template”. Let’s begin by opening Notepad, Notepad++, or your favorite text editor. We will be creating a CSS file to upload to Salesforce as a static resource. The purpose behind this is to utilize this CSS file across multiple pages without having to write the same code on each page. Ultimately you can view this as a method of creating a CSS “template”. Open the PageStyle editor within SkyVisualEditor. Select all of the custom CSS code in this editor and copy the code. Open your text editor and paste the code into that environment. Save your page with a name that is meaningful. *IMPORTANT* Make sure that your newly saved file has the file extension .css as this will ensure it is correctly utilized as a CSS file. Once the code has been copied successfully out of SkyVisualEditor you can delete the code from the PageStyle editor.
Now that your file is saved, open Salesforce. Click Setup–>Build–>Develop–>Static Resources. Create a new static resource and upload your CSS file. In this example, I will call my static resource “TerraSkyCSS_LightGrayBlue_Theme”. Save your static resource. Open SkyVisualEditor for the final two steps. Expand the PageStyle section and click the “Stylesheet include setting” button. Click the Add button. Now we need to properly reference your newly created static resource. The syntax for this is displayed below:
Click OK and deploy your page. Your page is now successfully referencing your CSS code that is being stored in Salesforce. Additionally, you can create other pages with SkyVisualEditor and use the exact same CSS static resource reference to utilize this new style on those pages. I hope that you have found this helpful as you create your own custom Salesforce styles. To learn more about SkyVisualEditor you can view our Resource library on the website and if you are not yet a customer you can try SkyVisualEditor out for yourself!