Profile Styling and Backgrounds

Get HTML help, style input, and feedback on your pages from other SP members.
User Avatar
Josh Lewis

 
Posts: 3412
Joined: Thu Jan 06, 2011 11:12 pm
Thanked: 1108 times in 677 posts

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">
<!-- Hide
pics=new Array("http://images.summitpost.org/original/800784.jpg","http://images.summitpost.org/original/728965.jpg","http://images.summitpost.org/original/752837.jpg","http://images.summitpost.org/original/744794.jpg");
lnpics=pics.length-1;
index=Math.round(Math.random()*lnpics);
document.write('<body style="background-repeat:no-repeat; background-size: 100%; background-attachment:fixed;" background='+pics[index]+'>');
// End Hiding -->
</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. :wink:
  • 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. :D

The next script randomly displays a background which you can place in your own images so that your profile will look nicer. 8) 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">
<!-- Hide
pics=new Array("[b]IMAGE URL[/b]","[b]IMAGE URL 2[/b]","[b]IMAGE URL 3[/b]");
lnpics=pics.length-1;
index=Math.round(Math.random()*lnpics);
document.write('<body style="background-repeat:no-repeat; background-size: 100%; background-attachment:fixed;" background='+pics[index]+'>');
// End Hiding -->
</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

User Avatar
Bob Burd
Forum Moderator
 
Posts: 4271
Joined: Sun Jul 22, 2001 10:42 pm
Thanked: 572 times in 296 posts

Re: Profile Styling and Backgrounds

by Bob Burd » Wed Jul 18, 2012 12:54 am

Didn't Myspace die a few years ago?

User Avatar
Josh Lewis

 
Posts: 3412
Joined: Thu Jan 06, 2011 11:12 pm
Thanked: 1108 times in 677 posts

Re: Profile Styling and Backgrounds

by Josh Lewis » Wed Jul 18, 2012 1:10 am

:lol: 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. 8)

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

User Avatar
Josh Lewis

 
Posts: 3412
Joined: Thu Jan 06, 2011 11:12 pm
Thanked: 1108 times in 677 posts

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. :P

Edit: For those who didn't catch it, Steve was joking about the pic deal. :wink:
Last edited by Josh Lewis on Thu Jul 19, 2012 6:43 am, edited 1 time in total.

User Avatar
mrchad9

 
Posts: 4545
Joined: Thu Jul 02, 2009 12:01 am
Thanked: 1338 times in 911 posts

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.

User Avatar
TimB

 
Posts: 271
Joined: Tue Oct 26, 2010 11:15 pm
Thanked: 43 times in 33 posts

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.
:)

User Avatar
Blair

 
Posts: 810
Joined: Fri Jul 15, 2005 4:40 am
Thanked: 8 times in 8 posts

Re: Profile Styling and Backgrounds

by Blair » Thu Jul 19, 2012 4:58 am

go climbing instead

User Avatar
Josh Lewis

 
Posts: 3412
Joined: Thu Jan 06, 2011 11:12 pm
Thanked: 1108 times in 677 posts

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:


Return to Page Help

 


  • Related topics
    Replies
    Views
    Last post

Who is online

Users browsing this forum: No registered users and 0 guests