  It's kinda plain, kinda boring, and often ignored by many. But what if we could change all that? What if we could make the Profile page look just a little more interesting?
Did you ever want to know how to get rid of those plain black borders you see around your Photos of Me when you click your "My Profile" link? Did you ever want to change the colors and style of the About Me and Contact Information?
You can change text size, color, and style and background and borders too without affecting other areas of your page ...
... except for the title areas where it says Photos of Me, Contact Information, About Me, etc. That is affected by whatever color you put in either .itemboxsub or .cattitle, so I'm not touching that one, but I can give you tips for customizing the other parts of your profile. Anything in red needs to be edited to suit your needs. You can click the image above to see a larger view of some of the things I tried on my profile page.
Any border added to the Photos of Me will be the same for all photos added, so if you have five, all five will have the same border. I got this double-border affect by using both border and outline. The border style and color shows on the inside and the outline style and color shows on the outside. Outline doesn't show in IE7 (at least), but you still have a nice border from the part of the code that does show.
/*Profile - Photos of Me*/
a#hires img {
border: ??? !important;
outline: ??? !important;
padding: ??px;
}
Then there are the labels, the parts where it says Name, Email Address, Gender, and so on. I haven't done a lot of experimenting with it, but I'm sure you guys can have fun getting creative. The font-weight is already set to bold in Multiply's codes, so if you want it a little less thick, you can set it to normal. I added font-style: italic; to mine to give it a bit more flair./*Profile - Labels*/
.label {
property: value;
} Finally there are the descriptions for the labels, the information you provide. Again, I didn't go too crazy, but I'm sure you guys can have fun with borders and backgrounds and colors and font styles./*Profile - Descriptions*/
.pad6r {
property: value;
}
«EDIT» As Hani mentioned in the comments, when you edit your profile settings, there are some areas that also allow HTML so that you can make Your Profile Page even more unique to you! Let me tell you, I went hog wild after I found out you really CAN add HTML, so now my profile no longer looks ANYTHING like what you see in the screenshot! «END EDIT»
So now it's time to go play! Have fun!  | thanks...need to bookmark this page |
 | Excellent !! The one part I never did play with. Thank you for this.
(hahaha at pacman) |
 | what's funny is that people are going to look at this that i did solely for the purpose of sharing the information with others, and they're going to go look at my profile, and they're going to see that it's back to being plain ol' boring. HAHAHA! except i kept a bit of the border style around the image. debating whether to go back to the two tone look. it IS kinda cool. |
| Something I don't always think to do is look at someone profile page, whether it's available or not. I never think of it lol |
| I mean the look, not what people write about themselves. |
| that black border drove me nuts. that had to go a long time ago. i'm surprised i didn't say something here sooner. |
| I'll admit mine is boring. Content and in looks hahaha |
 | okay, so here's my stupid question for the day. I wouldn't mind getting rid of that black border now that you've mentioned it. so I'm looking at this code:
/*Profile - Photos of Me*/
a#hires img {
border: ??? !important;
outline: ??? !important;
padding: ??px;
}
and wondering what sort of thing is supposed to go where the question marks are? colour codes? could I have an example that I could tweak? |
| snowburst wrote on Aug 18, '09, edited on Aug 18, '09  and wondering what sort of thing is supposed to go where the question marks are? colour codes? could I have an example that I could tweak?  border and outline have the same type of code. first the width, then the style, then the color, so it would look like:
border: 1px solid #000000 !important;
outline: 1px dashed #0000ff !important;
that would be a solid black border of 1 pixel width with a dashed blue outline of 1 pixel width around it.
edit: I added !important to the examples here because it's needed for a new border in a#hires img to work. |
 | by the way how can change font it  |
| and the padding is to put a little space between the image and the border if you wish. it is optional, like giving a matte background. so it could work well with a background color too, like this:
background-color: #ff0000;
padding: 5px;
that would give a red 5 pixel wide matte background between the border and the image. if you do not add a background color, the background of your itembox would show through between the border and the image |
| nolver wrote on Aug 18, '09, edited on Aug 18, '09 Sounds very interesting Leigh Ann! Since you brought this up, I wanna take a peek at your profile page ;-) |
| hahaha! i warn you ... it's BOOOOOOOOOOOOOOOORRRRRRRRRRRRRIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIING!!! LOL |
| It's not that bad...heheee! |
| thanks, snow - this worked even for me :-) |
| yay! pretty blue to match the links!!! : ) |
 | It is very beautiful :)
...thank you, dear Ann |
| ......and please, what is it ?
"property: value;"
Thank you :) |
| property: value; would be things like
font-color: #xxxxxx;
font-style: #xxxxxx;
etc. |
| snowburst wrote on Aug 18, '09, edited on Aug 18, '09 ......and please, what is it ?
"property: value;" the CSS element is made up of the selector, and its declarations, which are the property and its value. it is written like this: selector {
property: value;
}selector = what part we want to change (like the header, footer, rail, etc.) property = what we want to change about that part (like the background, border, color of the font, etc) value = how we want to change it (how big, which color, etc) patti gave you some good examples of properties and their values ... except ... property: value; would be things like
font-color: #xxxxxx; we do use font-style and font-size and font-family, but when it comes to the color of the font, we just use color. |
| Thank you very much...now I understand :)) |
| Thanks Leigh Ann. :) Should this be tagged something? |
| i will tag it. was just very tired and tried to get it out before i fell face first on my keyboard. |
| oh, shoot. and i just said that out loud. LOL |
| LOL i think i had the frame done even back then, but the person only asked for fonts. ; )
but the outline is something i only learned about a few months ago. i don't normally do things that don't work in IE unless it has a close enough equivalent, and in this case, you can still see the "border" even if you can't see the "outline" so i'm still good. |
| good job, another area we didn't explore it through..
i already have colors/pictures in my profile page.. i even put a video in the profile page since 2006..
it is called HTML..
that i think people should explore that too..
|
| when i joined, the profile page didn't allow HTML to be added. |
| didn't allow HTML to be added some items you cannot add HTML till now.. for example "the contact information"
but some allow HTML.. the "about me" "social" and "professional"
you need to try out HTML codes until you get what you want
the last picture, i was still a trainee or a houseman at HRPZII hospital.. and 30kg less than the current weight..
>: ) |
|
the last picture, i was still a trainee or a houseman at HRPZII hospital.. and 30kg less than the current weight.. i was refering to the picture inside my profile picture..
to see it, visit my site and click "view profile"
just for clarification, to some people here.. |
| cool. another way you can play with your profile. thanks hani.
as for me, i'm happy to keep mine simple and boring because i'm not really trying to attract outside attention. i just thought i'd share this idea with others who might like meeting new people. |
| i'm not really trying to attract outside attention. everyone has her/his own favourite cup of tea..
good job >: ) |
| I have no computer css code knowledge....I do not know to how to use this...wish I understood it...I would love to jazz up my page... |
| .I do not know to how to use this...wish I understood it... i see you use Custom Colors (you have chosen the Clean theme). are you able to follow the Beginner's Guide ~ One Step Beyond Custom Colors? in the main description before the images, i included examples of both color and border codes for filling in. i can add simple versions of these codes to that tutorial, since it's something else custom colors doesn't touch, but there would still be the matter of filling in the question marks. |
| you're just a buzz saw.. LOL well, i've been called a pit-bull before, but buzz saw is a new one. ; )
it's just that these two tutorials have two different goals. this one is for people who like experimenting with codes, trying to see what different things do, learning neat tricks for their pages or for theme design, so the codes are as general as possible. in the beginner's guide, i tried to make the codes as copy/paste friendly as possible so properties i didn't add here, i added there, like color and font-size and font-style. but i can't supply all the possible colors and sizes everyone might want so, unfortunately, even the codes in the beginner's guide are still not perfect copy/paste codes. |
 | Hey, um, how to take out 'view profile' in welcome box? |
| Hey, um, how to take out 'view profile' in welcome box? in your personal site.. click on "customize my site" under your profile/logo picture.. then click the "Edit" button of the welcome box.. un-tick (remove) the option to display a link to your profile..
but in Group sites, that option may not be available, so you may resort to CSS coding:
div.viewmore a[href="/profile/group"]{
display:none;
font-size: 0px;
}
>: ) |
| you can remove the link, but the page is still there. |
| Customize/Edit - there's a tick box to remove the link to your profile that's in your welcome box. You don't need to use CSS to hide it. However, your profile is accessible via the url so what you post on your profile can still be seen by those that have permission to see each sections content. Set your permissions first before hiding the link. |
| |
Multiply.Design
