Pimp My Profile to Spacehey Layout Guide

Use this as a base code. It's customized with simple gray fonts styles, sizes, images, border styles (etc) to avoid confusing you on what you have to change.

<style>
body {
  background-image: url('urlhere');
  background-color: white;
  border: 5px solid gray;
}

/* go to https://codepen.io/sosuke/pen/Pjoqqp to edit from the invert(0%) to the contrast(105%). Where it says "Target color", put in the hex code of the color you want */

/* this is the spacehey logo */

nav img.logo {
  filter: brightness(0) saturate(100%) invert(0%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%) !important;
}
/* this is the online img*/
.online img{
    filter: brightness(0) saturate(100%) invert(0%) sepia(94%) saturate(0%) hue-rotate(167deg) brightness(95%) contrast(105%)!important;
}


/* this is color of all the text and links */

a, .profile .friends .person p, p, h2, h3, h4, .count, nav .links a{
  color: black!important;
}

h1{
   border: 5px solid gray;
   padding:5px;
}

/* this is where you edit the search button and the Delete and Reply button */
button {
  background-color: transparent!important;
  border: none;
  color: black;
  font-weight: bold;
}
.general-about .details {
  border: 5px solid gray;
  padding-bottom: 70px;
}
.mood {
  background-color: transparent;
  border: 5px solid gray;
  padding: 3px;
  margin-bottom: 10px;
}
.contact, .url-info, .table-section, .blog-preview, .blurbs, .friends, .profile-info {
  background-color: transparent;
  border: 5px solid gray!important;
}
.comments-table td {
  border: 3px solid gray;
}
.table-section td {
  border: 3px solid gray;
}

/* line in between comment replies*/
.comment-reply:not(:first-child) {
    border-top: 2px solid gray;
}
.comment-replies {
    border: 1px dotted gray;
}

/* these backgrounds are usually transparent */
nav .top, nav .links {
  background-color: transparent;
  color: black;
  font-weight: bold;
}

main, footer {
  background-color: transparent;
}
.friends:not(#comments) {
  margin-bottom: 10px;
}
.comments-table {
  border: none;
  border-spacing: 5px;
}
.profile-pic {
  padding: 15px;
}
.heading {
  background-color: transparent!important;
}
td {
  background-color: transparent!important;
}
</style>

Step 1: Go to https://www.pimp-my-profile.com/

Step 2: Find the layout you want. For this guide I'll be using Sparkling Blue Roses & Jewels. It's an easy layout to transfer over.

Step 3: On the right side of the layout page you will see 3 links; Preview, Customize, and Bookmark. Open preview in another window and keep it open until you're done editing. This lets you look at the design of the page closer.
Some of the pages will have broken links and you won't be able to see the background picture, but you can still see the color of the font and borders.
This is the preview of the Layout here

Step 4: Go back to the window with the main layout and scroll down. You will see

"Background http://content.pimp-my-profile.com/ms/i58/5/7/20/f_15627b59bf.gif"
This is your link to the background image.

Step 5: Copy and paste the url of the image to your base code. Under the body code, replace urlhere with the url of the image.

body {
  background-image: url('http://content.pimp-my-profile.com/ms/i58/5/7/20/f_15627b59bf.gif');
  background-color: white;
  border: 5px solid gray;
}

If your image link doesn't work you can search google for similar styles.

Step 6: Go to the window where you're previewing the layout. Look at the borders and apply the style to your base code.

If you need help with border styles go here different border styles.

The layout I'm using has thick blue borders with a ridge style so that's how I'm editing my border code.

Quick tip: On the page where you're previewing the layout, right click and click inspect. You should be able to see what border style and color is being used. As well as the font type and size.

body {
  background-image: url('http://content.pimp-my-profile.com/ms/i58/5/7/20/f_15627b59bf.gif');
  background-color: white;
  border: 15px ridge blue;
}

You can go down the base code changing the border until you reach the area I specified is usually just transparent backgrounds.

Step 7: The next thing you can change is the color of the font.

/* this is color of all the text and links */

a, .profile .friends .person p, p, h1, h2, h3, h4, .count, nav .links a{
  color: blue!important;
}

Make sure you change every color: ; code you see.

Step 8: Add any further customization you want.

The layout code for the Sparkling Blue Roses & Jewels is here.

55 Kudos

Comments

Displaying 4 of 4 comments ( View all | Add Comment )

Vanilla	1689553865 TYSM I can change the navigation link color. Report Comment
☆cloverr☆	1665152350 litterally so helpful tysmmmm!!!>!>,1.,, Report Comment You're welcome by Bela; 1665188508; Report
FiNALBOY	1665028131 i've been searching for this omg thanks a lot! you're a lifesaver =D Report Comment you're welcome :) glad I could help ^^ by Bela; 1665029480; Report
Lenore	1664809666 sO USEFUL THX Report Comment you're welcome! by Bela; 1665012665; Report