Profile Styling and Backgrounds

Profile Styling and Backgrounds · by **Josh Lewis** » Tue Jul 17, 2012 11:10 pm

After much experimentations using firebug and such I managed to style up my SP profile quite a bit which can be seen here: http://www.summitpost.org/users/josh-lewis/67750

Here is pretty much all the code I used to create this:

Code: Select all: <style type="text/css"> .footer {border: none !important;} .user_data_box p { font-size: 11px !important; line-height: 15px;} table {padding: 6px;} .quote {background-color:white; display:block; color:#000; border-radius: 7px; padding: 7px; width: 725px; margin-left: auto; margin-right: auto; box-shadow: 5px 5px 10px #000; font-size:11px; line-height: 15px;} #splogo {position: absolute; left: 25px; top: 25px; background-image:url('http://www.alpineascent.com/host/icon/logo.png'); width: 264px; height: 36px; text-indent:-9999px; background-repeat:no-repeat;} .logo {display: none;} .edit_body_div {background-color: transparent !important;} .user_header_text, .user_data_box, .ajax_messages_table {box-shadow: 5px 5px 10px #000;} body, table,.user_header_div {border-radius: 8px;} .artop {display: none;} .user_header_text, .hdr_nav {padding-top: 5px !important; padding-bottom: 5px !important; border-radius: 8px;} .parent_search_list {background-image: url("http://www.alpineascent.com/host/icon/mountain.jpg"); background-position: 0px 0 !important; padding-left: 20px !important;} </style> <script type="text/javascript">  </script>

Now for the explanations for what each piece of code does.

Code: Select all
<style type="text/css">
(with an ending style tag) allows you to place in css code into the profile.
Code: Select all
.footer {border: none !important;}
Removes one of the dotted line sets at the bottom.
Code: Select all
.user_data_box p {font-size: 11px !important; line-height: 15px;}
Slightly increases the font size and adds spacing between lines
Code: Select all
table {padding: 6px;}
Adds padding around table elements to make it blend better with the background.
Code: Select all
.quote {background-color:white; display:block; color:#000; border-radius: 7px; padding: 7px; width: 725px; margin-left: auto; margin-right: auto; box-shadow: 5px 5px 10px #000; font-size:11px; line-height: 15px;}
Assuming you add a class to the quote section this code styles up the quote area. SP unfortunately does not come with a class for the quote area so you have to assign it by doing something like <div class="quote">"A sense of uncertainty that is potentially fatal is what makes climbing an adventure. Anything less is just working out" </br>-Jim Bridwell</div>
Code: Select all
#splogo {position: absolute; left: 25px; top: 25px; background-image:url('http://www.alpineascent.com/host/icon/logo.png'); width: 264px; height: 36px; text-indent:-9999px; background-repeat:no-repeat;}
This one is a little tricky, you have to add an additional piece of code into the occupation section which the code is <a href="http://www.summitpost.org" id="splogo">SummitPost</a>. This places a logo right where the current SP logo is. SP's logo is not quite transparent so I redesigned it a bit which if you have a better version, place it in the background image area.
Code: Select all
.logo {display: none;}
This hides SP's current logo so that you can place in a better version.
Code: Select all
.edit_body_div {background-color: transparent !important;}
This makes a section of the profile transparent.
Code: Select all
.user_header_text, .user_data_box, .ajax_messages_table {box-shadow: 5px 5px 10px #000;}
This adds a nice shadow to the profile
Code: Select all
body, table,.user_header_div {border-radius: 8px;}
This makes round corners
Code: Select all
.artop {display: none;}
This hides another annoying block element.
Code: Select all
.user_header_text, .hdr_nav {padding-top: 5px !important; padding-bottom: 5px !important; border-radius: 8px;}
This adds some padding and more round corners
Code: Select all
.parent_search_list {background-image: url("http://www.alpineascent.com/host/icon/mountain.jpg"); background-position: 0px 0 !important; padding-left: 20px !important;}
This styles the list items (arrows) so that it's mountains instead.

The next script randomly displays a background which you can place in your own images so that your profile will look nicer.

Below where it says "IMAGE URL" simply place in the image url (usually ending with a .jpg in the url) between the "" quotes and removing the "image url" text.

Code: Select all: <script type="text/javascript">  </script>

Want more or less images? Not a problem, all you have to do to add more images is place a comma after the last image quote. So it would look something like "IMAGE URL 3", "http://www.summitpost.org/images/layout/logo2.gif". Be sure it is before the ); so that the code renders correctly. To remove an image simply delete a set of quotes "" and a comma (on the furthest right side).

If anyone has any additions, corrections, or needs help, feel free to ask me.

Also keep in mind that browsers like Internet Explorer 8 and earlier do not render some of the styling because they do not support round corners, drop shadows, ect.

The following user would like to thank Josh Lewis for this post
mrchad9

Re: Profile Styling and Backgrounds · by **Bob Burd** » Wed Jul 18, 2012 12:54 am

Didn't Myspace die a few years ago?

Re: Profile Styling and Backgrounds · by **Josh Lewis** » Wed Jul 18, 2012 1:10 am

Yup. But CSS will be around for a very long time. :wink:

I think it's quite nice to be able to style up the plain boring looking profile. Even if I didn't use a background, my brother agrees that the text formatting on the profile is kinda hard to read. Or at the very least could be made easier which if folks want to use pieces of the code provided, it would serve it's purpose. But speaking of myspace, I used facebook to grab a little bit of the styling for the line space just to get an idea of what is a good amount.

The following user would like to thank Josh Lewis for this post
Shon Fredrickson

Re: Profile Styling and Backgrounds · by **Steve1215** » Wed Jul 18, 2012 1:31 am

.

Josh, I dont think yer allowed to have pics of nekkid girls on your profile page.

Terms of service?

.

Re: Profile Styling and Backgrounds · by **Josh Lewis** » Wed Jul 18, 2012 1:51 am

Steve, I didn't know you were allowed to post pictures of your self from inside a house not in the mountains.

Edit: For those who didn't catch it, Steve was joking about the pic deal. :wink:

Re: Profile Styling and Backgrounds · by **mrchad9** » Wed Jul 18, 2012 9:05 pm

Good on you Josh for doing what you can to try to improve the site and make it more interesting... and for sharing how with others.

You shouldn't be belittled for it. It seems some would rather focus on moderating forums than having members do what we can to help the site develop.

Re: Profile Styling and Backgrounds · by **TimB** » Wed Jul 18, 2012 9:08 pm

Josh,
I haven't done code since I was in college(anybody remember Fortran?) but I certainly like the looks of your page, sir.

Re: Profile Styling and Backgrounds · by **Blair** » Thu Jul 19, 2012 4:58 am

go climbing instead

Re: Profile Styling and Backgrounds · by **Josh Lewis** » Mon Sep 10, 2012 7:00 am

Blair wrote:go climbing instead

I have done a lot of that this summer. Although I still enjoy it, I'm trying not to spoil myself too much. :wink:

Who is online