How to Create a Branded Social Media Feed | Design Tutorial

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.

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!

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

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.

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.

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;
}

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; }

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;
}

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; 
}

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*/
}

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%);
  }

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;
}

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;
}

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;
}

Adjust the font styling in the posts

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

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);
}

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:

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;
}

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;
}

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*/
}

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!