How to Use Custom CSS to Personalize Beamer's Appearance

What is CSS?

CSS (Cascading Style Sheets) is a language used for design customization and presentation of documents in the internet. Alongside HTML and JavaScript is one of the most common languages used in the World Wide Web. To use Beamer's custom CSS you'll need at least a basic understanding of CSS or to consult with a coder or designer that can help you translate the appearance changes you want to make into the CSS language.

What is custom CSS and how to use it in Beamer?

Custom CSS is a special feature available for our Pro and Scale users. With custom CSS you can add your own CSS code to change the appearance of your Beamer widget to fit your site perfectly. The custom CSS will overwrite Beamer's default styles on the widget.

How to use custom CSS in Beamer?

1. Write your own CSS code to customize the appearance of your Beamer widget.

2. Go to your Beamer dashboard and open the Settings page.

3. Go to the Appearance page and scroll to the Custom CSS section.

4. Copy your custom CSS code and paste it in the provided input (don't add the <style> tags you would use in HTML, just plain CSS code).

5. Click save to keep your changes.

6. Voilà! Your new customized styles will be applied to your Beamer widget.

Useful tips and demonstrations

Here are some of the most common ways our users like to use custom CSS in their Beamer widgets.

How to change your Beamer widget font?

The easiest way to change the font of your Beamer is to call one from Google Fonts. Pick a font and open the Selected menu. There you'll find a standard and @import option.  Pick @import. We're going to use the font Roboto as an example.

1. Copy the URL provided by Google Fonts (ignoring the <style> tags) for example this one:

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

2. Copy the font definition provided by Google Fonts, for example this one:

font-family: 'Roboto', sans-serif;

3. Place the definition into a CSS valid expression to overwrite Beamers default font. Don't forget to add !important to make sure it will. Your code should look similar to this: ‍

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body, body * {
  font-family: 'Roboto', sans-serif !important;
}

4. Paste your final code into the Custom CSS section of your Beamer dashboard, in Beamer > Settings > Appearance.

5. Done! Your Beamer widget should have your new font instead of the default one.

6. Widgets with fonts Lato (default), Roboto and Roboto Mono.

If you don't want to use Google Font and prefer to host your fonts on your own server, or use another web font service just change the URL on step 1 for the one you prefer.

@import url('YOUR_OWN_URL');

How to change the appearance of posts?

Posts are individual div elements with the class .feature and are contained in a single shared feed (div.news). You can change the appearance of posts by adding new CSS rules to the .feature class and its children. As a demonstration we'll be creating a minimal console-inspired Beamer widget by adding a Custom CSS.This is the code used:

/* Import Roboto Mono font for the entire widget */
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');

/* Set the font family for the entire body and all elements */
body, body * {
  font-family: 'Roboto Mono', monospace !important;
}

/* Change the background color of the feed */
.news {
  background: black !important;
}

/* Customize the appearance of the post boxes */
.feature {
  box-shadow: none !important;
  border: 1px solid white;
  border-radius: 0 !important;
  background: black !important;
  color: white !important;
  font-size: 13px !important;
}

/* Customize the appearance of the post date */
.feature .featureDate span {
  color: white !important;
  font-size: 12px;
}

/* Adjust the appearance of the title */
.feature .featureTitle {
  margin-bottom: 10px !important;
}

.feature .featureTitle a {
  color: white !important;
}

/* Customize the appearance of the category tags */
.feature .category {
  background: transparent !important;
  border: 1px solid white;
  border-radius: 0;
  font-size: 12px;
}

/* Modify the appearance of the post link */
.feature .featureAction a {
  color: white !important;
}

.feature .featureAction svg {
  fill: white !important;
}

The code is commented to let you know what each part does. You can find many other ways to modify your widget by looking into the elements inside .feature (sometimes you'll need to use !important to overwrite some specific changes).We combined that custom CSS with some basic appearance changes in the Beamer settings page and here you can see the difference:

How to change the appearance of the post content?

To change the appearance of the content of the posts just look for the classes inside .feature. As an example we will give the post an appearance reminiscent of a newspaper by just modifying two classes. This is just an example of the many things you can do by adding custom CSS.

1. We are going to call an external font for our newspaper headline from Google Fonts.

@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap');

2. Next we're going to style it to pop more by changing the title font and increasing its size modifying the

.feature h3.featureTitle,
.feature h3.featureTitle a {
  font-size: 40px !important;
  font-family: 'DM Serif Display', serif;
  font-weight: normal;
}

3. Finally, we're going to change the size, line-height and font of the content text to a common serif font (Georgia) that will look more like a newspaper or book modifying the

.feature .featureContent,
.feature .featureContent p {
  font-family: 'Georgia', serif !important;
  font-size: 14px;
  line-height: 1.8;
}

4. Copy and paste the final code into the Custom CSS section of the Beamer settings page. The final code should look like this :

/* Import DM Serif Display font for titles */
@import url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap');

/* Customize the font style for feature titles (h3 elements) */
.feature h3.featureTitle, .feature h3.featureTitle a {
  font-size: 40px !important;  /* Set font size */
  font-family: 'DM Serif Display', serif;  /* Use 'DM Serif Display' font */
  font-weight: normal;  /* Ensure font weight is normal */
}

/* Customize the font style for feature content */
.feature .featureContent, .feature .featureContent p {
  font-family: 'Georgia', serif !important;  /* Set 'Georgia' font */
  font-size: 14px;  /* Set font size */
  line-height: 1.8;  /* Adjust line height for better readability */
}

5. Done! We have our newspaper inspired widget.

How to change the appearance of the feedback icons / reactions emojis?

Just as any other change you want to make, you need to find the selectors involved in that specific area. For feedback icons that would be everything inside the .feature Feedback class.

1. Hide the img with the current icons (with a display: none).

2. Modify the containers to have the desired size and position.

3. Pick your favorite alternative icons and upload them somewhere (save the URLs).

4. Add the new images as background.

.featureFeedback .emojis img {
  opacity: 0 !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}
/* Create a place for the new icons */
.featureFeedback .emojis span {
  background-color: #fff;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: inline-block !important;
  border-radius: 50%;
  margin: -6px 6px 0;
  -webkit-transition: all .25s ease;
  transition: all .25s ease;
}

/* Handle hover action */
.featureFeedback .emojis span:hover {
  cursor: pointer;
  opacity: 0.8;
}

/* Add new icons */
.featureFeedback .emojis span:nth-of-type(1) {
  background-image: url('YOUR_IMAGE_HERE');
}

.featureFeedback .emojis span:nth-of-type(2) {
  background-image: url('YOUR_IMAGE_HERE');
}

.featureFeedback .emojis span:nth-of-type(3) {
  background-image: url('YOUR_IMAGE_HERE');
}

/* Add the visual feedbacks */
.featureFeedback .emojis span.unselectedemoji {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.featureFeedback .emojis span.selectedemoji {
  /* You can add styles for selected emoji here */
}

5. Enjoy your new icons. Our example has doggos!

What other classes can I modify?

With custom CSS you can modify any class inside the widget you would like. Here's a list of the most important:

/* The entire header bar */
.header {
  /* Add your styles for the header */
}

/* The header title */
.headerTitle, .headerTitle a {
  /* Add your styles for the header title */
}

/* The container of the posts */
.news {
  /* Add your styles for the news container */
}

/* The post box */
.feature {
  /* Add your styles for the post container */
}

/* The section that includes categories and date */
.feature .featureDate {
  /* Add your styles for the feature date */
}

/* The post category */
.feature .featureDate .category {
  /* Add your styles for the category */
}

/* The post date text */
.feature .featureDate span {
  /* Add your styles for the date text */
}

/* The post title */
.feature h3.featureTitle, .feature h3.featureTitle a {
  /* Add your styles for the post title */
}

/* The post content */
.feature .featureContent, .feature .featureContent p {
  /* Add your styles for the post content */
}

/* The post custom link */
.feature .featureAction {
  /* Add your styles for the custom link */
}

/* The link's text */
.feature .featureAction a {
  /* Add your styles for the link text */
}

/* The link's arrow */
.feature .featureAction svg {
  /* Add your styles for the link's arrow */
}

What about standalone?

When you add a custom CSS code it will be embedded both on your widget and standalone page. We added special classes to the HTML body to signal what kind of feed is being shown. You can use those classes as parent to affect only one of the versions of your Beamer feed use the following classes

/* This targets the Beamer widget when embedded */
.body.embed {
  /* Add any styles specific to the embedded widget */
}

/* This targets the Beamer widget when displayed as a popup */
body.embed.popup {
  /* Add any styles specific to the popup widget */
}

/* This targets the Beamer widget when used on a standalone page */
body.standalone {
  /* Add any styles specific to the standalone page */
}

/* Example: Make the header title huge on a standalone page */
body.standalone h1.headerTitle {
  font-size: 40px !important;
}

/* Example: Change the background color of the Beamer widget to aquamarine */
body.embed .news {
  background: aquamarine !important;
}

How to have multiple CSS templates?

With Custom CSS you can have multiple themes with different styles and use them in specific circumstances. This is done by a special class that will be added to the <body> tag of your Beamer widget. You just need to link the specific theme styles to that class and call it when you need them in your embed code.

1. Think in a name for your theme. The name should be able to be called as a CSS class so you can't use spaces but you could use dashes (-) or camel case (camelCase). This name will be your theme class. For example dark, compact, extended, awesome-theme, newTemplate.

2. Add to your custom CSS your theme styles prefixed with the theme class. See the next example:

/* Change the color of post titles and action links to aquamarine */
.featureTitle a, .featureAction a {
  color: aquamarine !important;
}

/* Change the color of post titles and action links to aquamarine for the 'aqua' theme */
.aqua .featureTitle a, .aqua .featureAction a {
  color: aquamarine !important;
}

3. Call your theme only when you need it by including the parameter 'theme' in you Beamer Embed Code. You can learn more about the embed code here. The parameter value should be your theme class or name.

<script>
  var beamer_config = {
      product_id: '1234567890abcdef',  // Replace with your actual product ID
      theme: 'aqua'                    // Example theme class, replace with your preferred theme
  };
</script>
<script type="text/javascript" src="https://app.getbeamer.com/js/beamer-embed.js" defer="defer"></script>

4. Each time you call the theme parameter it will be added to the body tag of your Beamer widget and your custom theme styles will take effect.

Beamer offers appearance customization directly from your settings page in the Starter, Pro and Scale plans. You can change the colors to fit your site with no special skills required, using an array of color pickers. Easy and straightforward. But what if you want to go beyond that? What if you want to change something that's more specific or not included in the default appearance customization? Then you can always count on custom CSS, available for Pro and Scale users.In this tutorial you're going to learn what is custom CSS and some common ways our users like to use it to customize their Beamer's appearance to fit their brands UI.