When I was first asked to add a logo to a Salesforce community, I thought the task would probably take around an hour based on how easy it is to add a logo to the native Salesforce web interface. I was just a bit off on the time – it took over a day to complete.
Now, I’m not a seasoned web developer, so my knowledge of HTML and CSS is a bit rusty which probably contributed to the time spent on such a task, but I still thought it would be much easier than it was. So here’s how I did it.
First of all, I was using the Kokua template for this community, so I started with some basic template items. One of these is the Profile Header, which usually has the name of your Community as well as the smiley faced login drop down where you can access your profile. This looked fine from the beginning, but it had no logo.
The way I decided to add the logo was by putting the image inside its own div and floating it over to the left of the page while keeping the Profile login dropdown to the right of the page. Salesforce allows you to view the Folder structure of a Community Page within the Site.com Studio, so that’s where you’ll want to begin.
I created a new div folder within the same folder as the Profile Header div. Then I was able to create the logo class within that folder (this is just a content block) and I added the following HTML by clicking on the gear next to my content block:
<a href=”https://1771.force.com/Community/”><img style=”float: left; z-index: 10000;” alt=”/logo.png” src=”/logo.png” height=”75″ width=”175″></a>
Once I had the image appearing, I went into the logo content block and edited the custom Code (click the div that contains your logo and then click the tear drop, you should see the Code tab).
I added:
float: left;
width: 50%;
This gave the logo container a nice position on the left side of the screen and also allowed the div to go halfway across, from the left to the middle.
I applied a similar tactic to the div that contained my Profile Header:
float: right;
width: 50%;
Now I had a nice long 100% rectangle that included my logo on the right and the Profile Header on the left.
When I previewed the page, everything looked great and my logo even linked back to the home page of the Salesforce Community.
I know this wasn’t an extremely detailed post, so if you have any questions about specifics, please leave them below. I or one of our Minneapolis Salesforce Consultants will get back to you shortly!