Profile Styling and Backgrounds
Posted: 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:
Now for the explanations for what each piece of code does.
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.
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.
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">
- Code: Select all
.footer {border: none !important;}
- Code: Select all
.user_data_box p {font-size: 11px !important; line-height: 15px;}
- Code: Select all
table {padding: 6px;}
- 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;}
- 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;}
- Code: Select all
.logo {display: none;}
- Code: Select all
.edit_body_div {background-color: transparent !important;}
- Code: Select all
.user_header_text, .user_data_box, .ajax_messages_table {box-shadow: 5px 5px 10px #000;}
- Code: Select all
body, table,.user_header_div {border-radius: 8px;}
- Code: Select all
.artop {display: none;}
- Code: Select all
.user_header_text, .hdr_nav {padding-top: 5px !important; padding-bottom: 5px !important; border-radius: 8px;}
- 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;}
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">
<!-- 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.