| Forums > General > "a guide to profile styling" (21 replies)
|
|
|
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.
www.blogskins.com/forum/1/71719
www.blogskins.com/forum/1/60254
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.
i166.photobucket.com/albums/u103/icecool1987/label1.png - item 1 - 15
i166.photobucket.com/albums/u103/icecool1987/label2.png - item 16, 17
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
www.w3schools.com/css/css_intro.asp.
additional tips and tricks*
================================
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.
Edited 1.6 years ago. |
| |
|
| |
|
| |
WOW WEE!
i'm so happy for the credits corner !
and you posted so LONG !!!!
love you!!! x3
|
| |
| |
|
| |
i mean disclamier 
|
| |
| |
|
| |
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 =)
Edited 1.6 years ago. |
| |
| |
|
| |
interesting i didnt knew it can be done haha
Edited 1.6 years ago. |
| |
| |
|
| |
nice tutorial well explained
|
| |
| |
|
| |
seriously the screenshots helps a lot.
cause i didnt know where's footer and stuff.
thanks! i just styled my profile 
|
| |
| |
|
| |
wahh.
-clap clap clap-
3 cheers for ice cool !!!! ;D
|
| |
| |
 |
Author: 狂然怪異
Posted: 1.6 years ago
(link)
|
|
| |
Oh, heck.
This really helps too much.
Kudos to icecool!
|
| |
| |
|
Author: 狂然怪異
Posted: 1.6 years ago
(link)
|
|
| |
Rawr, icecool, you should have posted this yesterday when I was suffering with my new account. Hahahaha.
Edited 1.6 years ago. |
| |
| |
|
| |
so sry haha at least nw i hope im nt too late to help others
Edited 1.6 years ago. |
| |
| |
|
| |
the screenshot really helped alot!
thnks!
|
| |
| |
|
| |
Kudos to you! 
|
| |
| |
|
| |
ifever, cnt...
|
| |
| |
|
| |
lolololol..
NICE ONE.
thanks a bunch eh
|
| |
| |
 |
Author:
Posted: 1.6 years ago
(link)
|
|
| |
where do you start writing your about me part?
|
| |
|
| |
|
Author: 狂然怪異
Posted: 1.6 years ago
(link)
|
|
| |
♥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.
|
| |
| |
|
| |
Yup, looks like a real good tutorial. I'll come back to check this out later when I'm free, thanks!
|
| |
| |
|
| |
thx for those screen caps [: very helpful hahas
|
| |
| |
|
| |
♥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
Edited 1.6 years ago. |
| |
| |
|
| |
erupted-kisses♥ :
Eh? What do you mean?
|
| |
| |
|
| |
if-ever's h1 code i have tested it, it works perfectly fine hmmm lol did you set the height and width correctly ?
|
| Subscribe To This Thread: RSS 2.0 or Atom (?) |
| This thread has been locked, and no new replies can be posted. |
Home | Top Skins | Tags | All Skins | Forums | Contribute |
About
![[DELETED USER]'s icon](http://images.blogskins.com/user_images/393/131/avatar_tn_1246109887.jpg){kind=avatar}
