Styling Options for Your Social Hub — No CSS Skills Needed!

Loading Logo

Originally, Michael was going to be the one to tell you about our new Style Editor. “New feature, technical stuff,” he muttered. But then we thought, who better to write about a feature that makes things easier for non-tech people than the resident n00b? Yeah, and that would be me.

Everyone can customise their social media wall

Up to this point, Walls.io users needed to possess a modicum of CSS skills to change the appearance of their social media wall. Background images, tile colours, etc. could only be customised by entering CSS rules in the Walls.io settings.

Before the Style Editor was introduced one had to know CSS to customise Walls.io.
This is how it used to be. To customise your wall you needed at least some CSS skills.

I don’t know about you, but my CSS is only slightly better than my Klingon, which holds at pretty much zero. So, unless you’re a social media manager in a big company where you can simply strongarm the next IT person into helping you with the CSS, you’ll need an easier way to customise your Walls.io appearance.

This is where the new Style Editor comes in. I swear, no tech skills needed! This is completely n00b-approved by yours truly.

As always, you’ll find this new feature in the Walls.io backend, under the “Design” tab. Right after choosing your theme you click on the button that says “Customize colorscheme”:

The Style Editor is a brand new feature that lets you customise your wall without knowing CSS.
Hit that button and, voilá, a whole range of new options will pop open for you.

Show your true colours on your social media wall

Let me walk you through everything you can set up and change here:

“Show header”: Here you can choose whether to show or hide the header that shows your wall’s URL, name, logo and hashtags at the top of the page.

“Header background color”: If you’ve decided you want to show your header, you can easily change its background colour here. Choose a colour from the colour picker (you can even change the transparency) or enter the hex code of, for instance, your corporate colour.

“Background color”: This works just like setting the background colour for your header. Choose from the colour picker or enter a hex code, and the background on your wall – the part that is peeks out from behind the tiles – will change accordingly.

“Background image”: Of course, you can also use a background image instead of a solid colour. Whether you want to use a photo of your choice or a background texture – just upload the file from your computer and you’re good to go. Conveniently, the uploaded background image is automatically stretched to cover the whole screen, so make sure you upload a decently sized image (Full HD, 1920×1080, would be best).

“Font weight” and “Font weight for text-only posts”: You have two settings for font-weight. The first one concerns all posts that have preview images attached. The second one concerns all text-only posts.

Customise backgrounds and fonts with the Walls.io Style Editor.

You can keep the font weight the same for both post types or use the options to emphasise one type of post more than the other. I, personally, like to keep text-only posts on normal font weight and the other posts on bold, simply because I prefer that look.

Customise your post tiles to your liking

So, you’ve set up your backgrounds to look snazzy, but the post tiles don’t fit your colour scheme? No problem. We have a simple solution for that as well. Scroll a little bit further on your settings page and you’ll get to the section for “Tile colors”:

Change the colours of the tiles on your wall.

Here, on the left hand side, you’ll see a preview of the colour scheme, which you have set up above. For instance, you can see here that I set up the same texture background I use on my own website. You can edit the colours of your tiles by clicking them and, again, entering either a hex code or using the colour picker dropdown.

You can change the tile background, the text colour and the tile border colour. This gives you pretty much endless possibilities of colour combinations. Delete some tile colours if you need only a few different colours on your wall, and feel free to add more colours by clicking on the “plus” button on the bottom of the list. The tile colours you’ve set up are distributed randomly among all visible tiles on your wall.

Of course, if you prefer to use CSS to customise your wall or want to additionally change something in the CSS, you can still do so in the “Further customization” section towards the end of your settings page.

Meanwhile, I’ll be over here learning Klingon …

Did you do some interesting customisation on your social hub? Let us know in the comments, on Twitter or on Facebook. We’re always happy to share great showcases with our community there!