This blog

Welcome Guest Login or Signup

Blogs

Add your own profile Logo!

Posted On 10/21/2009 01:32:55 by Badly_drew_boy

I have seen lots of people saying they wish they could change the header logo to something that more matches the design of their profile, well i have worked how to do it.

It's not part of the basic profile designer (where you just pick colors for different sections and enter them into the inout boxes) you have to do this via the "CSS (Advanced users)" section

What you will be doing is replacing the image of the ccs class called .header_logo

paste this into the css box:

.header_logo {
background-image:none;
background-image:url(http://url-to-your-hosted-logo-or-picture);
background-color:transparent;
height:60px; /* you change this px number to the height of your logo or pic */
}

An example of what this does can be seen on my profile here: http://www.phreik.net/Badly_drew_boy

Note if you have an img that is really long, you will probly cause your profile to expand really big and look stupid, so you have to play around with it till you get it how you want! Any trouble doing it, message me and i'll try and help ya!

Hope this helps some of ya out!

Tags: Profile Logo Design Css

Viewing 1 - 9 out of 9 Comments

From: Badly_drew_boy

10/25/2009 13:36:43 You could always disable html posts in your guestbook?!

From: Snezza

10/23/2009 13:02:32 ahh that worked...(until someone pastes a big picture in there)... ty drew

From: Badly_drew_boy

10/23/2009 04:13:51 Hmm i would have thought just adding text-align:center; should have worked, but it doesnt seem to, try adding float:right;width:670px; (the px number may need tweaking to get it dead center!)

From: Snezza

10/22/2009 21:04:48 drew thanks for the code Could i be a pita tho how do i center it? ..... i have tried some things but its not working Thanks in advance

From: Badly_drew_boy

10/22/2009 06:12:35 Your welcome dauseone! Btw ... your logo would probably look better if the height in px was set to 70px rather than 60px :)

From: dauseone

10/22/2009 02:12:41 NICE! thanks.

From: JoshieKFT

10/21/2009 21:47:20 awesome. works great, thanks!

From: Badly_drew_boy

10/21/2009 18:04:44

There was just a few typos in it, well some missing ('s

Try this:

.header_logo {
background-image:none;
background-image:url(http://img257.imageshack.us/img257/7450/joshie15d6407rq0.png);
background-color:transparent;
height:60px;
}

Incidently, the use of /* and */ is similar to the way ; is used in mIRC to disable or comment out an area /* <--- this starts the section that will be ignored or not processed, and this */ signals the end of the area that will not be processed, I used it to be able to add comments to the code without it breaking it.

From: JoshieKFT

10/21/2009 17:45:32

i pasted the above code in CSS with my pic URL. but all i get is the dark green background and no pic. what am i doing wrong?

here is what i pasted in CSS box:

.header_logo {
background-image:none;
background-image:url http://img257.imageshack.us/img257/7450/joshie15d6407rq0.png;
background-color:transparent;
height:60px; }

and also tried with and without this: /* you change this px number to the height of your logo or pic */

and tried with and without these /* */

Hot Tags

[-]

Privacy | Staff |