How to use custom CSS to personalize Beamer’s appearance

9412
Mariano Xerez
Jul 19, 2019 | Last Updated Nov 15, 2019

Beamer offers appearance customization directly from your settings page in the Startup, Pro and Enterprise 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 Enterprise 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.


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 Enterprise 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.

    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:

/* This will change the font in the entire widget */
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
body, body * {font-family: 'Roboto Mono', monospace !important;}

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

/* This will change 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;
}

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

/* This will change the apparance of the title */
.feature .featureTitle {margin-bottom: 10px !important;}
.feature .featureTitle a {color: white !important;}

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

/* This will change 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:

The original widget and a custom made console-inspired widget

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 element:

    .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 element:

    .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 url('https://fonts.googleapis.com/css?family=DM+Serif+Display&display=swap');
    
    .feature h3.featureTitle, .feature h3.featureTitle a {
    font-size: 40px !important;
    font-family: 'DM Serif Display', serif;
    font-weight: normal;
    }
    
    .feature .featureContent, .feature .featureContent p {
    font-family: 'Georgia', serif !important;
    font-size: 14px;
    line-height: 1.8;	
    }
  5. Done! We have our newspaper inspired widget.

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:

.header /* The entire header bar */

	.headerTitle, .headerTitle a /* The header title */

.news /* The container of the posts */

	.feature  /* This is the post box */
	
		.feature .featureDate /* The section that includes categories and date */
		
			.feature .featureDate .category /* The post category */
			
			.feature .featureDate span /* The post date text */
			
		.feature h3.featureTitle, .feature h3.featureTitle a /* The post title */
		
		.feature .featureContent, .feature .featureContent p /* The post content */
		
		.feature .featureAction /* The post custom link */
		
			.feature .featureAction a /* The link's text */	
			.feature .featureAction svg /* 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.

body.embed {} /* this class is for the default Beamer widget */

body.embed.popup {} /* this class is for the special widget with display "popup" */

body.standalone {} /* this class is for the standalone page */


/* EXAMPLES --------------------------------------------- */

	/* 	This code will make your standalone title huuuuge */
	body.standalone h1.headerTitle {font-size: 40px !important;}
	
	/* 	This code will paint your widget's background aquamarine */
	body.embed .news {background: aquamarine !important;}