Walls.io-Logo
Walls.io-Logo
Walls.io-Logo

How to Create a Branded Social Media Feed | Design Tutorial

CSS Ready-Made Snippets and Tips for the Ultimate Branded Social Media Feed

Loading Logo
Photo of a cafe with a screen on the wall displaying a live social media feed.

In this article, you’ll learn how to create a branded social media feed. You will be surprised by all you can achieve with minimal effort! During this tutorial, we will be designing an Oreo demo wall, available here.

Two screenshots of the same social wall. The first image shows a colourless social wall, the second image shows a better looking branded social media feed, which anyone can achieve by following this tutorial.
The “before and after” of a social wall. With little to no effort, you can make your wall look like the second image!

Branding options built-in Walls.io — No custom CSS needed

The following steps are super easy and don’t require you to use any custom CSS code.

Theme selection

There are many different themes to choose from. Select your favourite theme with just a click. Yes, it’s that simple!

Screenshot of the theme selection page on Walls.io. The image shows the Fluid theme.
For this tutorial, we will use the fluid theme.

Logo upload

Now it’s time to upload your logo, which will be displayed on the top left corner of your wall. Simply click on the logo section and upload an image of your logo.

Tip: Logos’ work best if uploaded in a landscape format (width larger than height).

Screenshot of Walls.io's backend showing the drag & drop option to add a logo on a social wall.
Walls.io allows you to drag and drop your logo.
Screenshot of a social wall displaying the added logo on the top left corner of the wall.
In the top left corner, you see how the logo appears on the wall.

Customise colour scheme options

At Walls.io, you not only have the option to choose from predefined colour scheme options for your wall, but you can also customise the scheme to your liking.

Screenshot of the color scheme area in Walls.io.
Colour scheme section in Walls.io.

Changing your wall’s colour is such a crucial customisation feature, you won’t even recognise your wall.

Applying custom CSS

When you scroll down at the bottom of the design options, you will come across the custom CSS section. You can write your CSS code to design your wall even further.

Screenshot of the custom CSS section in Walls.io.
Custom CSS section in Walls.io.

Branded social media feed heading design — CSS partially needed

The following steps require you to use some custom CSS. If you’re not afraid of adding a little CSS, a whole bunch of customisation options are open to you. There’s really nothing to be afraid of. You don’t have to write the CSS snippet yourself either.

You can just use the code we are using here in this tutorial and just replace it with your own colours and images.

Adjust font size and weight in the header

With little to no effort, it’s possible to change the header’s visuals using custom CSS. To change the font size and weight, use the code snippet below:

.post_instructions {
    font-size: 1.8em;
}

.post_instructions li {
  font-weight: 900;
}
Screenshot of a social wall showing a personalised header.
In the top right corner, you’ll see the updated header text.

Reverse order of header elements

If you wish to have your logo on the right and the text to the left, all you have to do is copy and paste this code:

.socialwall_header_title { order: 2; }
.socialwall_header_infos { order: 1; }
Screenshot of a social wall with a header in the top left corner and logo in the top right corner.
The header appears to the left and the logo to the right.

Increase the size of the logo and header

If you want your logo and your header to appear bigger, copy and paste this CSS snippet:

.socialwall_header {
    height: 100px;
}

.socialwall_container {
    margin-top: 115px;
}

.socialwall_header.custom img.logo {
    height: 80px;
}
Screenshot of a social wall with a bigger header.
Here the header appears much bigger than in previous images.

Branded social media feed posts and background design — CSS needed

The following steps require you to use custom CSS. There’s no escape to CSS now. But seriously, it’s not complicated. All there is to do is copy the snippets and adjust them with your brand colours, images, or gifs.

Change the colours of the posts according to the social network

Yes, it’s possible to change the colours of the posts per social network. For example, you can make posts from Twitter blue. But of course, you can use every colour you like and change it for every network. Here’s a CSS snippet example for changing the colour of the Twitter tiles to blue:

.checkin[data-type="twitter"] { 	
background-color: blue; 
}
Twitter posts in blue, Instagram posts in white.

Apply a grayscale effect to the images and videos

If you want to go old school or give your wall a special touch, try this grayscale effect. It will turn the images on your wall into a range of grey shades from white to black.

Here’s the CSS:

.checkin-image {
    -webkit-filter: grayscale(100%); /*just add any percentage you like */
    filter: grayscale(100%);  /*same goes for here*/
}
Screenshot of the Oreo branded social media feed with images in a range of grey shades from white to black.
Images with a grayscale effect.

Add a gradient to the posts

If you’d like to make your posts shiny or mix two colours, copy and paste this code and add one or two hex colour codes of your preference:

.checkin {
	background: linear-gradient(to bottom left, rgb(255, 255, 255) 0%, #7cc6f2 100%);
  }
Screenshot of a the Oreo branded social media feed with gradient colour in the image frames.
The image frames show the gradient effect in blue.

Change the design of the social media icons

You can turn the icons into whatever you like. Here’s the code:

.checkin-type-instagram { /*just add any source you like here*/
font-size: 0;
width: 32px;
height: 32px;
background-image: url(https://cdn3.iconfinder.com/data/icons/tidee-food/24/016_049_cookie_biscuit_baking_food-256.png); /*here you can change the image*/
background-size: 32px 32px;
background-position: center;
}
Screenshot of a social wall displaying social media posts in which icons were replaced with Oreo cookies.
The icons on each post appear here as Oreo cookies!

Change the style of the call-to-action buttons.

Change the button design to make it even more attractive or more fitting for your wall.

If you’d like to get some ideas for button designs, take a look at this.

Basic button CSS:

.checkin-buttons .checkin-cta {
    border: none;
    background: #6C6463;
    color: white !important;
    font-weight: 600;
;
    text-transform: uppercase;
    border-radius: 6px;
    display: inline-block;
    transition: all 0.3s ease 0s;
}

.checkin-buttons .checkin-cta:hover {
    color: #7cc6f2 !important;
    font-weight: 700 !important;
    letter-spacing: 3px;
    background-color: white;
    -webkit-box-shadow: 0px 5px 40px -10px rgba(108,100,99,0.6);
    -moz-box-shadow: 0px 5px 40px -10px rgba(108,100,99,0.6);
    transition: all 0.3s ease 0s;
}

.checkin-cta::after {
    border: none;
}
Screenshot of a social media wall with call-to-action buttons.
The call-to-action buttons appear underneath some posts.

Adjust post spacing and add rounded borders

Having custom spacing can make your wall look even better and ‘cleaner’, too. By default, the fluid theme already has rounded borders, but if you want to change the border-radius manually, here’s the code to do it:

.checkin {
  border-radius: 40px;
  margin: 1.2em;
}
Screenshot of a social media wall displaying posts with rounded borders and more space between each.
The spacing and borders of each post were changed to appear rounder and with more space between.

Adjust the font styling in the posts

There are many different fonts available here, which you can choose from.

First, select the font of your preference.
Import the font.

Then, in your CSS, you simply import the font at the top and add the style to your body, or wherever you wish to use this font (I used the Boogaloo font):

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

body {
  font-family: 'Boogaloo', cursive;
}

.checkin-message, .checkin-message a { /*I also changed the font-size and the color*/
  font-size: 20px;
  color: rgba(0,0,0,0.6);
}
Screenshot of a social media wall displaying each post post with a different font.
Each post uses now the Boogaloo font.

Change the walls’ background design

You can use either an image or a gif as background for your wall. If you’d like to have just a picture, you can do it right here in the settings:

Screenshot of the section in Walls.io where you can change the background image of a social wall.
Add the image as Background image.

But if you’d rather have a gif, add the following CSS with your gif:

body {
  background-image: url(https://media.giphy.com/media/qNpqSmKO4bn68/source.gif); /*put your gif here*/
}

Hide the timestamp and username on a post

Hide the timestamps as well as the usernames on posts with this CSS snippet:

.checkin-timestamp { /*hide the timestamp*/
    display: none;
}

.checkin-user-name { /*hide the username*/
    display: none;
}
Screenshot of a social media wall displaying posts without timestamps or usernames.
Each post hides the timestamp and username.

Bonus design hacks for your social wall — custom CSS needed

The following steps require custom CSS.

Hide the scrollbar

Hide the scrollbar on the right for all browsers with this CSS snippet:

html {
	overflow-y: scroll;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* Internet Explorer 10+ */
}
html::-webkit-scrollbar { /* WebKit */
	width: 0;
	height: 0;
}
Screenshot of a social media wall without a scrollbar.
No scrollbar to be seen.

Add a custom footer overlay

If there’s an important message you want everyone to read, add it as a footer overlay with this CSS snippet:

body:after {
  content: "-20% off now!"; /*put your message here*/
  font-size: 40px;
  position: fixed;
  bottom: 0;
  left: 0;
  text-align: center;
  width: 100%;
  height: 70px;
  color: white;
  background-color: #003087;  /*change the color*/
}
Screenshot of a social media wall with a footer overlay.
The footer overlay will communicate your message promptly.

After these tutorials, you should now know the basic processes of how to make Walls.io fit your brand perfectly.

Enjoy customising your social wall! And if you run into any snags, feel free to contact the Walls.io support team to ask for help!