This is not at all an exhaustive list of CSS codes that I've used on my page, but these are the ones I get asked for the most often. Each of these codes will need to be placed between style tags in order to work properly. I'm absolutely not an expert and barely grasp how any of this works, so I always recommend Cory, Meh, and Alok's blogs for more codes and a much better explanation of how things work! I also can't recommend Nein Mc's 'generic profile editor' preview tool enough!
image as name
.profile h1 {
display: show;
content: url("IMAGE URL HERE");
}
hide blog preview
.blog-preview{display:none !important;}
hide comments but leave count + view / add links
.comments-table{display:none !important;}
hide friends but leave count
.friends-grid{display:none !important;}
make top nav + logo transparent but functional
nav{background-color:var(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important;}
nav ul{background:none !important;}
nav img{filter: opacity(90%) !important;}
nav ul a img, .mood a img{display:none !important;}
.top{background:none !important;background-color:rgba(0, 0, 0, 0.8); !important;}
hide url box
.url-info{display:none !important;}
hide 'about me' heading
.blurbs .inner .section:nth-child(1) h4{ font-size:0; }
.blurbs .inner .section:nth-child(1) h4:before{ content: ""; font-size:.8rem; }
hide 'who i'd like to meet' heading
.blurbs .inner .section:nth-child(2) h4{ font-size:0; }
.blurbs .inner .section:nth-child(2) h4:before{ content: ""; font-size:.8rem; }
hide 'profile blurbs' heading
.blurbs .heading{display:none !important;}
change color of or resize / remove border on contact box
.profile .contact, .profile .table-section, .profile .url-info {
border: 0px solid #COLORHEXHERE;
}
custom 'online' icon
.online{content:url("IMAGE URL");}
custom contact box icons
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* Add to Friends */
content:url(IMAGE URL HERE)
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* Add to Favorites */
content:url(IMAGE URL HEREg)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content:url(IMAGE URL HERE)
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* Forward to Friend */
content:url(IMAGE URL HERE)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* Instant Message */
content:url(IMAGE URL HERE)
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* Block User */
content:url(IMAGE URL HERE)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* Add to Group */
content:url(IMAGE URL HERE)
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* Report Profile */
content:url(IMAGE URL HERE)
}
make footer transparent but functional
footer {background:none !important; line-height:0px !important;}
footer ul li a {color: #000000 !important;}
Comments
Displaying 12 of 12 comments ( View all | Add Comment )
rayz coding!
how can you make the background of your profile transparent?
Report Comment
zombigf11
how would we change the top bar to an image?
Report Comment
do you mean like a layout that has a header, or the top bar that has the spacehey logo?
by sarah ♡; ; Report
the top bar with the spacehey logo
by zombigf11; ; Report
th0ms has a great blog post here about it!
https://blog.spacehey.com/entry?id=556495
by sarah ♡; ; Report
ty sarah!
by zombigf11; ; Report
aeron ☆
Where can I add the contact icons DD; I'm having a lot of trouble with it
Report Comment
nvm I figured it out!! i'm such an idiot ToT
by aeron ☆; ; Report
heartbeats
ty so much for this!! your profile is amazing btw
Report Comment
omg tysm!
by sarah ♡; ; Report
✭ star laveaux ✭
I came here to get help but after reading this and your faq, I realized how lazy I am lol. this is amazing! you put a lot of work into tying to help people. I'm sure you get a lot of questions regularly. I'm a "figure it out on your own" type of person. lol. you definitely deserve a high5.
Report Comment
*•.¸♡ krissy ♡¸.•*
I'm currently having a problem with the hiding who I'd like to meet" section. I'm putting it inside style brackets. Could they have changed the section or made it unremovable?
Report Comment
the entire section or just the header?
by sarah ♡; ; Report
The entire section. I shared my code in my blog. I think I might have a code that includes it so it won’t delete? I just sorted the code.
by *•.¸♡ krissy ♡¸.•*; ; Report
Foxy
hey , thank you for this, it really helped me !! i was just wondering.. how do you make the icons for the contact links small ? (add to friends , add to favorites , etc. . .)
Report Comment
You could take the image and resize it. I used https://picresize.com for this.
by ♡ Killjoy ♡; ; Report
Carmen Julia
Thank you for this! You are amazing!
Report Comment
Allen
OMGG i love you for thissss!
Report Comment
Drop the code for actually placing HTML in boxes for copying/pasting... Or is it a blog feature
by Allen; ; Report
ash
From what I remember, the codes aren't the same as the ones back in the day. I guess it's expected when everything has advanced so much... including the import link on fonts for mobile devices.. it's cool taking what we know and relearning the coding that we have today so blogs like yours definitely help! Love your profile by the way
Report Comment
definitely! the basics are sorta there but it's all slightly new. & thank you so much! ♡
by sarah ♡; ; Report
Jenna
i added this to my blog megathread of profile stuff, i hope that's okay! 💖
Report Comment
yes ofc!
by sarah ♡; ; Report
Cailea
You're awesome! Thank you for this!
I've sadly forgotten most of the web development tricks I learned in college. :(
Report Comment
yeah, i can't even wrap my head around how i used to just sit down and do this stuff from scratch without a second thought.
by sarah ♡; ; Report