Home | Top Skins | Tags | All Skins | Forums | Contribute | About

BlogSkins.com Forums

Forums > General > "For Blogskinners: Restyling Your Profile" (34 replies)
Xavqior's icon Author: Xavqior
Posted: 9 months ago
(link)
I apologise for this late reply. :)

Okay, as promised, I have come up with the basic codes for blogskinners who wish to obtain an overwritten profile page at blogskins.com. However, do note that the codes may have flaws so you may wish to modify your page anyway you want and I hold no responsibility for this. Before you use these codes, kindly do not remove the default blogskin navigation and links(My Skins, My Comments, etc) from your profile page in due respect of blogskins.com. (unless you really do feel the need to remove, but that would obstruct accessibility to other links at blogskins.com!)

This is the part where you want unnecessary things to be removed so that you can overwrite your content. Insert this part inside your style sheet:
#user_profile_avatar, #user_profile_ad, #user_profile_info, #header_login, .topnav, .navsearch, .logo, .footernav, .footernavright, .footer{display:none}

There are also parts where you may wish to leave alone. All you need to do is to align them accordingly to your layout. They include:
#my_favorites - this is the section about your favourite blogskins
#user_profile_about - this is the section containing your overall content
#friends_skins - this is the section featuring your friends' blogskins
#my_skins - this is the section featuring your own skins
#my_comments - this is the section displaying your comments on other blogskins


An example of how you'd align those parts would appear like this:
#my_skins{overflow:none; width:500px; position:absolute; top:200px; left:120px}

For #user_profile_about, you may only need to shift its position and size. An example of how this would look:
#user_profile_about{width:600px; position:absolute; top:0px; left:0px}

Lastly, you may wish to include an image/banner on your page. Insert this code into your style sheet:
#image{position:absolute; top:0px; left:0px; width:--px; height:--px}

You may choose to rename "image", and do remember to replace "--" with the appropriate measurement of your image. Of course needless to say, measurement is in pixels. In order to make sure your image appears, insert this after your stylesheet(note:not INSIDE it):
img src="url here" id="image"(remember to insert the close and open tags for this)

Basically that's all that is needed to know. Do remember not to leave any spaces in between the codes in your style sheet - make sure everything is placed together(yes, not even a single space, it would look like a chunk of nonsense strung together but that's the way it should be, I think) or else it may not work. If you find that there are better ways to do this/ways to improve, you may wish to notify me. :)

This post can also be found at my site - http://xavqior.co.nr. (post has been deleted, sorry!) Hope this helps.

------------------------------------------------------------------------ UPDATE: 20TH DECEMBER 2007 ------------------------------------------------------------------------

I understand that some of you do not understand the tutorial and have requested for the basecode so that you'd be able to modify it on your own. However, I would like everyone to understand that the purpose of this tutorial is to allow you to understand and learn how to create your own blogskin profile. If you truly wish to be a blogskinner, you will have to comprehend the fact that it is your own responsibility to learn html and its basics so that you would be able to learn and improve from your mistakes throughout this entire learning process. Everyone puts in effort in his/her own blogskins. Everyone takes pride in his/her own work.

Basically, all you have to do is to copy and paste all those codes under a stylesheet and further modify it on your own. One very simple example is this:

#my_favorites,#user_profile_avatar,#user_profile_ad,#user_profile_info,#header_login,.topnav,.navsearch,.logo,.footernav,.footernavright,.footer{display:none;visibility:hidden}
body,p,font,tr,td,.my_skins,.my_comments,.friends_skins{font:normal 12px georgia; color:#000000}


You just have to embed everything and contain it inside the style tag: (style) and (/style) (replace the brackets with angle brackets). That's what I mean by putting them inside a stylesheet, if you are unsure of what it is.

Hope this helps, and good luck!

Edited 5 months ago.
 
 
!down.beat♥'s icon Author: !down.beat♥
Posted: 9 months ago
(link)
  Ahhh this is gonna help much. Thanks! :D
 
 
thatphobia's icon Author: thatphobia
Posted: 9 months ago
(link)
  yay!
 
 
♥cookiemonsters-'s icon Author: ♥cookiemonsters-
Posted: 9 months ago
(link)
  gonna give it a try(:
 
 
purpl3d's icon Author: purpl3d
Posted: 9 months ago
(link)
  Hey i love your profile page Xavqior!
 
 
[DELETED USER]'s icon Author: [DELETED USER]
Posted: 9 months ago
(link)
  lol thanks XD
 
 
eraseme.'s icon Author: eraseme.
Posted: 9 months ago
(link)
  oh please sticky this
 
 
simplicity*'s icon Author: simplicity*
Posted: 9 months ago
(link)
  Hey, thanks so much (:
 
 
{/autumnlove♥'s icon Author: {/autumnlove♥
Posted: 9 months ago
(link)
  its gna help, thanks loads, [:
 
 
Xavqior's icon Author: Xavqior
Posted: 9 months ago
(link)
  No problem guys. :)
 
 
intrigue.d's icon Author: intrigue.d
Posted: 9 months ago
(link)
  loves man~
 
 
heroine's icon Author: heroine
Posted: 9 months ago
(link)
  Thank you for a great guide!
 
 
paradoxical-lilium's icon Author: paradoxical-lilium
Posted: 9 months ago
(link)
  Woots!
 
 
starry7star's icon Author: starry7star
Posted: 9 months ago
(link)
  OMG! thank you.
 
 
purpl3d's icon Author: purpl3d
Posted: 9 months ago
(link)
  I wonder if Myles welcome this o.o
Erm, so all these tags is under css right?
Sorry, my coding s****.
 
 
madeline_tn's icon Author: madeline_tn
Posted: 9 months ago
(link)
  =DD
 
 
Xavqior's icon Author: Xavqior
Posted: 9 months ago
(link)
  purpl3d: Hopefully it is allowed as long as we retain its original navigations and features... I guess? Haha. If Myles is against this way of styling our profile page, I guess I'll have to take down this thread. (hopefully not!)
 
 
purpl3d's icon Author: purpl3d
Posted: 9 months ago
(link)
  Oh, ok maybe i'll try out this.
 
 
.twenty-two-ish.'s icon Author: .twenty-two-ish.
Posted: 9 months ago
(link)
  whoa this helped! thanks! :D
 
 
[DELETED USER]'s icon Author: [DELETED USER]
Posted: 9 months ago
(link)
  this is cool!
 
 
Hasegawa-San:D's icon Author: Hasegawa-San:D
Posted: 9 months ago
(link)
  OH MY GOSH YOU ROCK. :D
 
 
DayBefore!Misery's icon Author: DayBefore!Misery
Posted: 9 months ago
(link)
  I cant seem to move the 'skins from friends' and 'my favs' part o.o
 
 
♥mircale.'s icon Author: ♥mircale.
Posted: 9 months ago
(link)
  I love you and I really do . ♥♥
 
 
Xavqior's icon Author: Xavqior
Posted: 9 months ago
(link)
  You're welcome guys. :)

To DayBefore!Misery:

#friends_skins - this is the section featuring your friends' blogskins

In order to move that section, the code should be something like this: e.g. #friends_skins{overflow:none; width:--px; position:absolute; top:--px; left:--px}
 
 
edwardhjt's icon Author: edwardhjt
Posted: 9 months ago
(link)
  Oh damm,this is gonna help loads.Thx :D
 
 
DayBefore!Misery's icon Author: DayBefore!Misery
Posted: 9 months ago
(link)
  Thanks! Somehow it worked now ._.
But what about the 'Friends' Section?
I ♥ this tutorial :D
 
 
Xavqior's icon Author: Xavqior
Posted: 9 months ago
(link)
  DayBefore!Misery:

Well I've mentioned that this coding has flaws, and one of the things that's missing is the 'friends' section. @.@ I can't figure out how to shift that section. So basically the layout overwrites it. I can't find any way to move it. Haha.
 
 
DayBefore!Misery's icon Author: DayBefore!Misery
Posted: 9 months ago
(link)
  x.x
Haha. ohkay. Thanks anyway.
 
 
[DELETED USER]'s icon Author: [DELETED USER]
Posted: 8 months ago
(link)
  Sweet, thanks!
 
 
rettop-x's icon Author: rettop-x
Posted: 8 months ago
(link)
  DayBeforeMisery:
I might be able to find out.
 
 
rettop-x's icon Author: rettop-x
Posted: 8 months ago
(link)
  I took this portion of codes from glen's profile. :

eraseme. has 4 friends, like:


it may help.

P.S. this is from the friends portion, below this portion is where your frens go.
 
 
rettop-x's icon Author: rettop-x
Posted: 8 months ago
(link)
  And i have a question. Too.

Can someone put in your codes for your profile page so i can analyze it? i dun really understand where to put and how it applies to what.
 
 
sweetest_addiction's icon Author: sweetest_addiction
Posted: 8 months ago
(link)
  helped alot thanks :)
 
 
hothouseviolets's icon Author: hothouseviolets
Posted: 8 months ago
(link)
  great, i was always wondering how the hell people's pages got so nice.
thanks loads!
 
 
DayBefore!Misery's icon Author: DayBefore!Misery
Posted: 8 months ago
(link)
  [sacarsm]Well, from some people, ive learnt that all you have to do is to view source and tada; copy, paste, edit, done. [/sacarsm]
Subscribe To This Thread: RSS 2.0 or Atom (?)
This thread has been locked, and no new replies can be posted.


Site

- Home
- News Archives
- About
- Stats
- Feeds
- Privacy Policy

Skins

- Tags
- Search Skins
- All Skins
- Random Skin
- Skin Of The Day
- Contribute

Forums

- General
- Tips & Tricks
- Help!
- Suggestions
- Skin Requests
- Blogging Software
- Web Hosting

Account

- Log In
- Register
</BlogSkins>

Warning! Do not follow this link! It is a trap for poorly-behaved bots. If you follow this link, you will be banned from accessing this site and several others. I will not have mercy on you. Do not follow this link!