Join our Community in its new Home - The Datorama Trailblazer Community Group!

It's been an amazing 3 years coming together in this forum to collaborate, innovate, support, and inspire each other about our shared usage of Datorama. While this is not quite a goodbye, we are excited to announce that we are getting a fresh start in our new home within the Salesforce Trailblazer Community. We have a ton of fun new content planned and you may even see the revival of some of our most popular posts from the past few years.

We’ll be keeping this group around for a bit for you to peruse, but as of November 15, we will no longer be allowing new posts or comments. Be sure to join our new group at https://www.salesforce.com/success-datorama to keep the conversation going.

We can’t wait to see you there!

How to Add Locally-Saved Images to Custom Widgets (that need urls)

AdamLurieAdamLurie NYCSYS_ADMIN IMG42
edited October 2020 in Tips & Tricks
A lot of platform users have realized that a quick and easy way to spruce up a dashboard is to include a custom widget that embeds a logo or image file, using the CSS field of the Custom Widget Editor:
.container {
  height: 100%;
  width: 100%;
  background-image: url("https://datorama.com/wp-content/themes/datorama/images/logo-3.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  display: flex;
  //justify-content: center;
  align-items: center; 
}

.header {
  padding-left: 25px;
  width: 400px;
}

.title {
  color: #030A27;
  font-size: 26px;
font-family:Arial ;
font-weight:bold ;
}

Where the 'background-image:' parameter specifies a url location to source and bring in an image. 

However, you may also be wondering, "I have an image file that's on my local drive. Is there any way to use that kind of image in this kind of setup?" The answer is yes:

  1. First, simply create a new dashboard page within Datorama
  2. Next, within that dashboard page, add a new image file widget:

  3. Then, drag and drop the image you'd like to use:

  4. Then, you'll need to open up Developer Tools (Option + ⌘ + J on Macs; Ctrl + Shift + J or F12 on PCs), and either use the inspect elements tool, or search (Ctrl+F) within the Elements tab for 'app.datorama.com/webresources/' to try and find the now stored url value of the image you've uploaded to this widget. Once you've found the Datorama url location for your uploaded image file, simply copy and paste this into the original Custom CSS widget you want updated!
Sign In or Register to comment.