How to Create a Branded and Accessible 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 design an Oreo demo wall, which is available here.

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

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

Theme selection

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

Logo upload

Now, it’s time to upload your logo, which will be displayed in the top-left corner of your wall. Simply click on the logo section and upload an image of your logo. If you don’t have a custom logo ready, using a logo maker like Zoviz Logo maker can simplify this process.

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

Customise colour scheme options

At Walls.io, you can choose from predefined colour schemes for your wall and customise the scheme to your liking.

Changing your wall’s color is such a crucial customization feature you won’t even recognize your wall.

Accessibility options built-in Walls.io

At Walls.io, our mission is to deliver a top-tier platform accessible to everyone. To enhance the accessibility of our social walls, we’ve partnered with an expert to rigorously test our solutions and create VPATs, ensuring compliance with the World Wide Web Consortium’s WCAG 2.1 Level AA standards.

While all our layouts support essential accessibility, our Fluid layout was specifically optimized to meet the WCAG 2.1 Level AA standard. For maximum accessibility, we recommend using Fluid on all embedded social walls on your website.

You can improve accessibility even further by activating this https://my.walls.io/starbucks?accessibility=1 when creating the embed code:

Branded social media feed heading design — CSS partially needed

Applying custom CSS

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

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

You can use the code we use in this tutorial and replace it with your own colors 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 you can do is copy the snippets and adjust them with your brand colours, images, or gifs.

Change the colors of the posts according to the social network

Yes, it’s possible to change the colors of the posts per social network. For example, you can make posts from Twitter blue. But of course, you can use every color you like and change it for every network. Here’s a CSS snippet example for changing the color 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 colors, copy and paste this code and add one or two hex color 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 fitting for your wall.

If you’d like to get some ideas for button designs, 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, from which you can choose.

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 an image or a GIF as a 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.