Synchronizing the look of your profiles on deferent social media platforms

How about binding your profiles on deferent social networks together by adding to them common layout theme?



Facebook doesn't offer the opportunity to personalize the look of your own profile and that i think is a pretty cool choice by facebook that giving many clear advantages. However as a visual and artistically directed person i love the ability to costumes the look of my own profile like you can do in many of the existing social media.

So I started on twitter and was thrilled by the "costumes profile layout" facility and out of that an idea raised to make my home page, my twitter profile, my youtube channel, my blogger/blogspot blog and my myspace profile all mirror the same layout idea. So the following is walk through of my take on it. Hopefully it can inspire someone who wants to do something simular ore be a practical help on the deferent layout possibilities of these deferent social media profiles.

I'll do this in five chapters.

1. Customizing twitter profile layout
2. Customizing my own homepage layout
3. Customizing youtube profile layout
4. Customizing blogspot/blogger profile layout
5. Customizing myspace profile layout

1. Customizing twitter profile layout



Twitter is the "new kid on the block" for me and it is my very favorite construction. The simplicity and transparency in the infrastructure and the clean design is simply beautiful.

That was when I wanted to customize the layout of my twitter profile that the design-connecting idea came about. I had chosen to take a little bit of the background image from my personal website and used it as a repeating pattern as the background on my twitter profile to create a cohesion between the two.

Adapt profile layout in twitter is of course simple and easy :-)

As I said, I found an interesting selection of the background image on my personal homepage and customized it with an image editing program (gimp) approximately 250 x 250 pixels size.

Then on Twitter start by going to "sittings" in the top menu. When you click it you will come to a page where there is also a top menu. Here you must select "design". Then you'll get a lot of "themes". I chose none of them but went down to the bottom of the page and selected " Change background image " and uploaded my background image. Then I went back and pressed the "Change design colors" button.

As you can see, you can choose different colors for various general page elements to change the color just click on big colored square then you get a palette where you can choose a color with the mouse. Notice the small number to the right of the palette looking like a5825a. This is the html code for the color. If you know the code for the color you want, it is easier to simply type it into the little box. Inspired by an other persons profile on twitter @pernillerosen I chose a black sidebar and a golden colored text.

My Twitter profile: http://twitter.com/mimeini

2. Customizing my own homepage layout




I was so thrilled about the look of my Twitter profile with the black box and the gold text that I decided to go back to my personal homepage and make a big change on it so that I also here could get a black box with gold text.
My personal homepage is a completely hand-hacked and hand-scripted project of mine. It has been a long process to make it and it will lead too far to go into how I made the changes on this page.

so there is therefore a delicate link between my personal website and Twitter. I had long uploaded videos to youtube, but it was only very recently that I realized I had a youtube channel and youtube actually trade a kind of social netwærk with friends, etc. So now the idea for pulling my youtube profile layout under a common layout of the theme like the other two sides

My personal homepage: http://www.mimoart.ooz.dk/

3. Customizing youtube profile layout



So there is now a delicate design link between my personal homepage and my Twitter profile. For a long time I had uploaded videos to youtube, but it was only very recently that I realized that that implied having a youtube channel and that youtube actually trade a kind of social network with friends, etc. And that I had a customizable profile layout on youtube. So now the idea for pulling my youtube profile in under a same layout theme as the other two sites came about.

So how to do that on youtube?

On the top menu you click the menu item "Themes and Colors" There are a number of templates to choose from. On youtube you choose a template and the template can then be adapted further afterwards. I chose the templet "8-bit" because it had the black boxes as I needed. After that I go below and select "show advanced options". The advanced options appears as a table in two colon to fit here, I have the pictures of them here under each other.



If you look at the image above there is an option to upload a background image and I did that and chose exactly the same image as on twitter and I checked the check-box that the picture should become repeated. Then I filled out the color coding as you can see in the picture over here. The interesting thing is the box that says "transparency". If you let Transparency to NONE your background image can not be seen between the boxes so I put the transparency to 100%.



Here is the second column you can see the color codes I've chosen and here I set the Transparency to None to get a solid black background for the text.

My youtube canal: http://www.youtube.com/mimeini

4. Customizing blogspot/blogger profile layout



Blogger / blogspot operate a bit like youtube where you first choose a temple and since adjusts it. I chose a temple with a black background when I created the blog so now I just had to have the text color adjusted.

When you just log-in on your blogspot account you are at your dashbord. Now you have a little menu for your blog.
Edit Posts – Settings – Layout – Monetise
So click layout for the blog you want to customize
Then you get to the "Add and Arrange Page Elements" page. Her you have the tabs:

Page Elements | Fonts and Colours | Edit HTML | New Template

If you go in the Fonts and Colours tab you will find a palette where you can customize the colors of text and borders and so.

I did so. Afterwards, I would find out how I could get a repetitive background image into the blogger layout like I did on youtube and twitter, but it didn't seem like there was an option to do that. So I goggled and found some suggestions on how this could be done by going into "Edit HTML" and add some css code there. None of the solutions I tried worked for me. I also began to think that a repetitive background in this way would probably fill the entire background so also where the text was and I didn't want that.

Therefore I gave up on the repeated background image and decided to go another way around it. On the layout page on blogger there is a table entitled "Add and Arrange Page Elements". Here is the opportunity to insert an image both at the top of the blog and on the the side. So I made again an image of the background image from my personal homepage this time slightly larger. Put that as the top of my blog layout. Then I piked the little image I had used on twitter and youtube and put that in to the right side element of the blog layout.

There is a well illustrated tutorial on doing that here.
http://web-site-tutorial.blogspot.com/2009/04/here-are-tips-how-to-add-background.html

5. Customizing Myspace profile layout



Myspace was the hardest. I spent hours to figure out how to do it. When I had found out it was of course very easy. The information I could google was not working properly so therefore I really hope people who are struggling with this would benefit from this post.

You start by going to profile and select "Edit Profile" from the profile drop-box. This will take you to a page where there is a top menu where you must select "customize profile".



Unfortunately, the text on the screen dump (image) here over is Danish because I am Danish. But anyway first. Myspace profile has two possible states. Profile 1.0 profile 2.0. Many of the suggestions I found on goolge was to go back to Profile 1.0 and make the changes that way. This was not possible for me. I was forced to use the possibility's in profile 2.0. Many of the suggestions I found online was about going in under the section labeled css as you can see in the picture over here and then simply put a lot of CSS code in the box which appears when you click the link. As I tested, I found out that the code I put into the css box only worked for what is called "body elements" in css. That is to say text color, background color etc. It seemed also that links elements worked, but css coding to affect the tables, that I have previously had called the black boxes on the page where the text should stand did not worked. Eventually I found out what I had to do. I had to choose the empty template which I have placed a circular ring around on the picture above.

Then I pressed the css item on the menu and pasted the below code in to the little css code box in the myspace interface. You should be able to customize the values in this to your purposes with your html color codes.

body {
background-color:#000000;
font: normal 8pt Verdana, Arial, Helvetica, Sans-serif;
color:#a5825a;
text-decoration:none;
line-height:100%;
}

h1 {
font: normal 13pt Verdana, Arial, Helvetica, Sans-serif;
}

h2 {
font: normal 18pt Verdana, Arial, Helvetica, Sans-serif;
color:#ffffff;
}

p {
font: normal 10pt Verdana, Arial, Helvetica, Sans-serif;
line-height:110%;
color:#a5825a;
text-decoration:none;
}
a:link {
font: bold 10pt Verdana, Arial, Helvetica, Sans-serif;
color: #ba825a;
text-decoration:none;
}
a:visited {
font: bold 10pt Verdana, Arial, Helvetica, Sans-serif;
color: #ba825a;
text-decoration:none;
}
a:hover {
font: bold 10pt Verdana, Arial, Helvetica, Sans-serif;
color: #c0c0c0;
text-decoration:none;
}
a:active {
font: bold 10pt Verdana, Arial, Helvetica, Sans-serif;
color: #ba825a;
text-decoration:none;
}

After that I had a solid black background and my gold text on top, but we still lacked the background image. On myspace background picture may be deployed in different ways.



Click advanced settings. This opens a box with five menu points: Background, content, modules, module titles and module text. Selecting one of these five menus will open up an opportunity to upload an image. If you upload an image under the "background" menu item the whole surface will be covert by the repeating image wallpaper. If you upload your picture under the "content" menu item. The image will fill the space around the modules. If you upload your image under "modules" the modules will be felled out with the repeating image while there is black around them. So I selected menu item number two from the top down "content" and that gave me exactly the look I was looking for.

My Myspace profile: http://www.myspace.com/mimeini

I hope this post has been helpful. You are very welcome to comment or contact me with questions. My mail address can be found on my website.

Best wishes

Mikkel