How to Customise Your Brand’s Social Media Wall

March 17th is St. Patricks Day! That’s next week already, so it’s high time to plan your brand’s social media activities for this Irish holiday, which has spread over the world.

The Sidney Opera House goes green for St. Patrick’s, as does the U.S. White House, and the International Space Station. Embrace St. Patrick’s Day and don’t let your brand lag behind. To make sure your social wall is also dressed up for St. Patrick’s Day, we have created two tutorials for styling your Walls.io hub accordingly.

A Tale of Two Tutorials

The first tutorial is pretty basic and doesn’t require any coding skills at all. We’ll show you how to adapt the colours of your wall. The result of our basic tutorial will look like this.

The second tutorial offers a bit more flexibility for those who are comfortable using CSS. We’ll add some custom footers and tweak things a little to make it look neat and tidy. After the advanced tutorial you’ll know how you can make your social hub look something like this.

Code snippets or not — both tutorials are really easy to follow, so you’ll have plenty of time left to throw on something green and go out to get drunk while pretending to be Irish.

Basic Walls.io Customisation — Colours

If you want to give your wall a new colour scheme, head to the design tab in your settings and click on “customize colorscheme.”

Step 1: Customising Your Background and Header

An Irish flag flapping in the wind. © https://www.flickr.com/photos/michalo/220399586/
Photo credit

Pick a background colour and a colour for the header background. I chose the green of the Irish flag for both the header and the background, since I prefer a more uniform look, that’ll let me use bolder colours for the tiles.

Walls.io Settings: Customise colour scheme
Irish flag green: #009B48

Step 2: Customising the Tile Colours

Here’s where my bolder colours come into play: the orange of the Irish flag, kelly green, and a little leprechaun gold thrown in for luck.

Walls.io settings: Tile colours
Orange: #FF7900 | Kelly Green: #4CBB17 | Gold: #FFD700

I’ve now got a nice and colourful wall and it’s taken me all about 5 minutes to set this up.

Walls.io colour customisation tutorial
See the finished basic tutorial wall in action.

 

Advanced Walls.io Customisation — 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. I myself know nothing about CSS, so Walls.io’s support hero Ray has provided me with the code snippets.

Please note that CSS customisation is available to pro and premium plans only!

First, we’re going to take a look at how to customise your social wall footer. Then we’ll go about creating some custom footers for your tiles in the Fluid theme.

Adding a Custom Wall Footer Overlay

This neat little tweak will will preserve the tile colours you’ve previously set and simply add a footer overlay. I went for a kitschy little pot of gold with a rainbow that I found on Pixabay, one of the myriad free stock photo sites, by searching specifically for cliparts.

Tutorial for creating a custom wall footer overlay for your social wall

Find the image you want to use in your custom footer. To get the best look it should be a .png file with transparent background and no higher than 300 px. If you use a higher image it will probably cover too much of your wall. Just play around with it and figure out what’s best for the image that you are using.

Then you need to upload that picture somewhere, so you can link to it: postimage.org, imgur.com, tinypic.com, etc. are all good options. Of course, you can also use your own server. Keep that link open, you’ll need it for your code snippet in a bit!

Still in the design tab, scroll down to “further customization”.

How to modify the CSS of your Walls.io social wall

In the CSS field add the following snippet, exchanging the placeholders (I’ve marked the parts you need to change in bold for you) for width, height and the image link with the info from your own image:

.socialwall_footer {
 width:XXXpx;
 height:XXXpx;
 background: rgba(255, 255, 255, 0.0) url(LINK) bottom left no-repeat;
}

My image is 274×300 pixels, so my snippet looks like this:

.socialwall_footer {
 width:274px;
 height:300px;
 background: rgba(255, 255, 255, 0.0) url(http://s19.postimg.org/t2yuo67zn/pot_of_gold.png) bottom left no-repeat;
}

You can also add a little padding to the sides of your wall, if you want to give the image some breathing room. I experimented a little and ended up sticking with a 7% padding:

.socialwall_container {
margin-left: 7%;
margin-right: 7%;
}

You could achieve a similar effect by adding a background picture, but in this case I wanted to avoid adding one more, likely green, image into the mix. 😉

Adding a footer overlay is something that you can do with all of our Walls.io themes!

Adding a Custom Tile Footer in Fluid Theme

If you’re using the Fluid theme you can also replace the tile colours with image footers — a different one for each tile type if you like.

Just like with the wall footer you first need to upload the images you want to use. In this case we recommend a height of 60px. Again, to get the best look, you probably want to go for a .png with a transparent background.

Decide how many different tile footers you want and set them up as you would with the tile colours (see above). In my case, I’m sticking with my three different types of tiles and I’m going to set custom footers for each of them:

Walls.io CSS Tutorial

As you can see, the actual colours of the tiles are meaningless in this case, since we’re going to replace them with images anyway.

To do this add the following code snippet to your CSS field, one referring to each tile colour, and adapt it according to your own data:

.checkin-color-1 {
 background: rgba(255, 255, 255, .80) url(LINK) bottom right no-repeat;
}

So, for me the custom footer for the first tile would look like this:

.checkin-color-1 {
 background: rgba(255, 255, 255, .80) url(http://s19.postimg.org/49tw19ecv/shamrock_for_st_patrick_day.png) bottom right no-repeat;
}

Don’t forget to change checkin-color-1 to checkin-color-2 for your second tile, and so on.

Walls.io customise your wall with CSS

There you go, custom tile footers — but, as you can see, they’re partly covered by social media icons. Fortunately, we can easily make those disappear with another bit of code:

.checkin-type {
 display: none;
}

If you notice a lot of usernames overlapping your fancy footer images, because of their long display names in parentheses, you can hide the parentheses as well, showing only the actual user handles.

.checkin-user-name-full {
 display: none;
}

Bonus Tweaks

If you’re comfortable editing CSS, you can also go ahead and change the colours of the tiles, by changing the RGB alpha. We currently have it set to white (255, 255, 255) at 80% transparency (.80):

.checkin-color-1 {
background: rgba(255, 255, 255, .80) url(http://s19.postimg.org/49tw19ecv/shamrock_for_st_patrick_day.png) bottom right no-repeat;
}

You can replace this with other colours for your tiles and change the transparency. Experiment to find out what works with your wall colours and footer images. But, before you go overboard, keep in mind that sometimes less is indeed more. 😉

I, for now, have left the tiles at 80% white, and here’s the result: Leprechauns, shamrocks and little green hats all over my wall, and a clean look because I’ve hidden the social icons and user display names.

Walls.io CSS customisation tutorial
Check out the finished CSS tutorial wall.

After these tutorials you should now know the basic processes of how to make Walls.io fit your brand perfectly — and not just on St. Patrick’s day. See how we’ve blatantly used something fun like a drinking holiday to sneak in an evergreen (no pun intended) product tutorial? 😉

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!