BlogSkins Forum Replies For: a guide to profile styling

RE: a guide to profile styling

nobody@blogskins.com (Xavqior) — Sun, 23 Mar 2008 04:10:06 -0500

Kudos to you! :)

RE: a guide to profile styling

nobody@blogskins.com (chloe94) — Sun, 23 Mar 2008 03:49:08 -0500

the screenshot really helped alot!
thnks!

RE: a guide to profile styling

nobody@blogskins.com (icecool) — Sun, 23 Mar 2008 03:30:40 -0500

so sry haha at least nw i hope im nt too late to help others

RE: a guide to profile styling

nobody@blogskins.com (sweetlove-dd) — Sun, 23 Mar 2008 01:26:56 -0500

WOW WEE!
i'm so happy for the credits corner !
and you posted so LONG !!!!
love you!!! x3

RE: a guide to profile styling

nobody@blogskins.com (sweetlove-dd) — Sun, 23 Mar 2008 01:27:33 -0500

i mean disclamier :D

RE: a guide to profile styling

nobody@blogskins.com (if-ever) — Sun, 23 Mar 2008 01:48:29 -0500

You can abuse the heading tags like h1/h2/h3 to insert your own images! For example, I replaced my username with a picture of my own with this coding:

#user_profile_info h1 {
background:#FFFFFF url(http://i145.photobucket.com/albums/r229/dlockheart/nickname2.png) repeat scroll 0%;
height:89px;
padding:0pt;
text-indent:-9999px;
width:210px;
}

And like icecool mentioned, do not leave lines. I am leaving lines so it is easier to read =) Have fun! Oh and if you are using FF, try the Firebug extension, it helps =)

RE: a guide to profile styling

nobody@blogskins.com (icecool) — Sun, 23 Mar 2008 01:55:53 -0500

interesting i didnt knew it can be done haha

RE: a guide to profile styling

nobody@blogskins.com (Misery!Chronicle) — Sun, 23 Mar 2008 02:16:06 -0500

nice tutorial well explained:D

RE: a guide to profile styling

nobody@blogskins.com (XSTACY.) — Sun, 23 Mar 2008 02:16:40 -0500

seriously the screenshots helps a lot.
cause i didnt know where's footer and stuff.
thanks! i just styled my profile :o

RE: a guide to profile styling

nobody@blogskins.com (sweetlove-dd) — Sun, 23 Mar 2008 02:42:55 -0500

wahh.
-clap clap clap-
3 cheers for ice cool !!!! ;D

RE: a guide to profile styling

nobody@blogskins.com (狂然怪異) — Sun, 23 Mar 2008 03:13:17 -0500

Oh, heck.

This really helps too much.

Kudos to icecool!

RE: a guide to profile styling

nobody@blogskins.com (狂然怪異) — Sun, 23 Mar 2008 03:21:30 -0500

Rawr, icecool, you should have posted this yesterday when I was suffering with my new account. Hahahaha.

RE: a guide to profile styling

nobody@blogskins.com (erupted-kisses♥) — Sun, 23 Mar 2008 04:32:58 -0500

ifever, cnt...

RE: a guide to profile styling

nobody@blogskins.com ([DELETED USER]) — Sun, 23 Mar 2008 04:51:07 -0500

lolololol..
NICE ONE.
thanks a bunch eh :D

RE: a guide to profile styling

nobody@blogskins.com () — Sun, 23 Mar 2008 04:56:53 -0500

where do you start writing your about me part?

RE: a guide to profile styling

nobody@blogskins.com (狂然怪異) — Sun, 23 Mar 2008 06:45:56 -0500

♥closethedoor-

All the styles will be typed on the top in the About Me: field in the Settings page. After all the styles have been typed out, you can create a new line with the real content of the About Me section. :D

RE: a guide to profile styling

nobody@blogskins.com (hurricanecat) — Sun, 23 Mar 2008 07:35:20 -0500

Yup, looks like a real good tutorial. I'll come back to check this out later when I'm free, thanks!

RE: a guide to profile styling

nobody@blogskins.com (lix2004) — Sun, 23 Mar 2008 07:48:10 -0500

thx for those screen caps [: very helpful hahas

RE: a guide to profile styling

nobody@blogskins.com (icecool) — Sun, 23 Mar 2008 08:06:43 -0500

♥closethedoor - "where do you start writing your about me part?"

you started writing your able me after all your styles e.g

(style)blah blah(/style)start your about me, im so n so blah blah.

=D hope u catch wad im trying to say haha

RE: a guide to profile styling

nobody@blogskins.com (if-ever) — Sun, 23 Mar 2008 09:24:43 -0500

erupted-kisses♥ :
Eh? What do you mean?

RE: a guide to profile styling

nobody@blogskins.com (icecool) — Sun, 23 Mar 2008 10:10:05 -0500

if-ever's h1 code i have tested it, it works perfectly fine hmmm lol did you set the height and width correctly ?

a guide to profile styling

nobody@blogskins.com (icecool) — Sun, 23 Mar 2008 01:25:53 -0500

disclaimer*
================================
this is just another compilation done by me nothing amazing.
credits goes to Xavqior, if-ever , lix2004, eraseme. and most importantly sweetlove-dd.
without her i wun even have bothered to style my profile page let alone write this !!!
lastly this is just a rough guide as i only spend 1 day on it lol.

http://www.blogskins.com/forum/1/71719
http://www.blogskins.com/forum/1/60254
http://www.blogskins.com/forum/1/46292

foreword*
================================
skin, style or themeing of profile page is actually not difficult thats if you understand basic css styling.
but if im not mistaken some of us in BlogSkins still have problem understanding it through.
hopefully what i have written here would be simple enough for everyone to understand.

profile page dissected*
================================
refer to the 3 images below for reference to the list.

http://i166.photobucket.com/albums/u103/icecool1987/label1.png - item 1 - 15
http://i166.photobucket.com/albums/u103/icecool1987/label2.png - item 16, 17
http://i166.photobucket.com/albums/u103/icecool1987/label3.png - item 18

1. .logo{}
2. .navsearch{}
3. .footernavright{}
4. .footernav{}
5. .footer{}
6. #my_favorites{}
7. #my_comments{}
8. #user_profile_ad{}
9. #my_skins{}
10. #friends_skins{}
11. .tabs{}
12. .tabSelected{} + b{}
13. #user_profile_about{}
14. #user_profile_avatar{}
15. #user_profile_info{}
16. .topnav{}
17. #profile_skins{}
18. .body{}

listed above are the general areas of BlogSkins profile page. hopefully i hasnt miss out any. lol
but you may be wondering how does this helps right now =D

tips to know before styling*
================================
styling BlogSkins profile page is alittle bit and i mean alittle bit different from normal blogskins only.
so what are the differences and what i need to know ?

note* replace the ( ) with the arrows you know haha.

1. all styles declaration must be joined together unlike normal blogskins.
e.g of a normal blogskin
(style)
#main {
width: 100px;
height: 100px;
}
(/style)

e.g of BS profile

(style)#main{width:100px;height:100px;}(/style)

so with this we are good to go!!!

simple styling*
================================
now for some really simple styling.

e.g 1 - getting ride of some parts of the profile which you don't want to see. like your comments.
all you need is 1 simple line.

(style)#my_comments{display:none}(/style)

e.g 2 - how about putting some background image?

(style)body{background:white url(http://i214.photobucket.com/albums/cc105/24168/egobox/backgrounds/cat/Vintage/p9.jpg);}(/style)

hmm i guess you must be wondering why am i using body instead of .body as stated in the list above rite?
well .body is actually just a div covering the shaded area as shown in label3. while body is a default html declaration that covers your entire page.

e.g 3 - changing how your links look like

(style)a{color: orange;text-decoration:none;}(/style)

a is a very general statment there is a:active, a:hover, a:link and a:visited.

e.g 4 - changing looks for the titles

(style)h1,h3{color: purple;}
(/style)

hopefully with these four examples you can roughly get an idea what to do.

more precise styling*
================================
so now you want to customise just a portion of the profile. below again i will show simple examples of how to do it.

e.g 1 - changing the links of just the #user_profile_about{}.

(style)#user_profile_info a{color:red;text-decoration:none;}
(/style) or
(style)#user_profile_info a:hover{color:red;text-decoration:none;}
(/style) or
(style)#user_profile_info a:hover,a:visited{color:red;text-decoration:none;}
(/style)

e.g 2 - changing the title of just the #user_profile_about{}.

(style)#user_profile_info h1,h3{color: purple;}
(/style)

well hopefully you can understand what i have written up to this point. for more info on css tags and how to use them please refer to
http://www.w3schools.com/css/css_intro.asp.

additional tips and tricks*
================================
http://blogskins.com/forum/1/72292/1/#72297

example code*
================================
im currently using these codes so well don't mind dun be too alike ok haha =D and remember to add your (style)(/style) + join them all together

.logo{display:none;}
.footer{display:none;}
.navsearch{display:none;}
.footernav{display:none;}
.footernavright{display:none;}
#my_favorites{display:none;}
#my_comments{display:none}
#user_profile_ad{display:none}
body{background:#ffffff;font-family:tahoma;font-weight:normal;text-transform:lowercase;}
b{color:#595b3e;}
a{color:#ffffff;text-decoration:none;}
a:hover{color:#ffffff;text-decoration:none;}
.nickname{padding:0px;}
.tabSelected{background:#c0c0c0;}
.tabs{padding:0px;}
.body{padding:0px;}
#user_profile_avatar{border:0px;padding:5px;}
#user_profile_info a{color:#595b3e;text-decoration:none;}
#user_profile_info{font-size:11px;line-height:90%;letter-spacing:2;color:#595b3e;border-top:6pxsolid#ffffff;border-bottom:4pxsolid#000000;text-align:left;margin:3px;}
#profile_skins a{color:#ffffff;}
#profile_skins td{padding:1px;}
#profile_skins{border-collapse:collapse;}
#profile_skins h1,h3{font-size:15pt;letter-spacing:2px;color:#595b3e;}
#profile_skins img {position:relative;display:inline;background-color:#f1f1f1;border: 1px solid #000000;padding: 2px 2px 4px 2px;}
td{color:#ffffff;}
td a{color:#ffffff;text-decoration:none;}
td img{position:relative;display:inline;background-color:#ffffff;padding:2px2px4px2px;}
.topnav a{color:#595b3e;}.topnav img{background-color:#ffffff;}
.topnav{background:transparent;font-size:11px;line-height:90%;letter-spacing:0;border-top:6pxsolid#ffffff;border-bottom:4pxsolid#c0c0c0;text-align:center;margin:3px;}

end*
================================
after you have done all the styling, you can start writing your about me section haha.
having done all that it has to be inserted into the form field call About Me in your profile edit page.

e.g of a finished code with about me.

(style)a{color: orange;text-decoration:none;}(/style)hi im so and so, how tall how short.

or of a finished code with an image.

(style)a{color: orange;text-decoration:none;}(/style)(img src="some url" border="0" )

happy styling everyone and oh yea if theres any mistake do drop a comment to let mi know and update thks.