Advanced customization of your ShoutEm network

Update: this post is outdated as of March 17th, 2010

At this moment ShoutEm supports 18 different styles that you can use on your network (and we are adding even more styles, like Marble), but you may want to customize the look of your micro-blogging network just the way you want.

Using ShoutEm Admin pages, you can change look of many parts of your network, sometimes even without special knowledge of programming and/or designing. For example, look at the great example at HorseTweet network. These guys created a great skin using Settings page under their ShoutEm Admin panel. Let me show you what can you do using your admin page, and how can you modify some of our skins to look just the way you want.

For starters, let”s see the screenshot of my test network ilijabrajkovic.shoutem.com. I use “Elegant Dark Groove” skin, which (because of its dark color) gives me good foundations for what I want to achieve.

 

elegant_dark_groove

 

Let’s try to change it a little bit.

First, go to your admin page, then from the left menu select Appearance –> Settings. You’ll see the page where you have a lot of options to change the look and feel of your ShoutEm network. The first part of this page is called Header settings, and here you can change look of the header of your network. For example, you can change the logo image, if you have a logo for your network. Just be aware that the maximum size for the logo is 990×50 pixels. Also, you can setup background image for your header, and also text, navigation and background color.

header_settings

In the Body settings part of the admin page you can change the way how the main part of your network looks like: list of the shouts on your network and users panel. You can setup Body font, Font size, colors… This procedure is pretty much straightforward, so spend some time playing with these settings and choose the right settings for your design.

body_settings

 

Shout settings area gives you ability to change the look of a single shout on your network. You can change colors of the text, links, info and background as well as shout transparency.

shout_settings

You can see the preview of these settings applied to my test network in the screenshot below.

 

shout

Also, if you want to monetize your network and you want online casino to show Google ads on it, you can change the Ads style. You have the option to choose between five different styles: Red, Green, Blue, Dark and Light. Just choose the one the will be the best fit for the design of your network.

 

ads_style

You can also change the background color and/or background image on your network. Using the simple color picker you can select the color, or upload a background image from your computer.

background_settings

You can even upload your own Favicon. Just create an icon that is not larger than 16×16 pixels, convert it to .ico file, and upload it.

favicon_settings

I’ve been playing with these settings for a little bit, here you can see the end result:

 

final_result

As you can see, most of the design is changed. This is just a quick, rough style change; I”m sure you can do better than me with a bit of effort!

This tutorial shows you how easy is to change design of your Shout’Em network, if our predefined designs don’t satisfy you.

Also, there are some other things that you can do to change some of the design of your network, but we’ll leave that for some other post. For now, go to your Admin page and play with these setting for a while, and if you still don’t have your network, go to https://shoutem.com and create one for free.

Ilija Brajkovic