sarah ♡'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

select css





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;}


97 Kudos

Comments

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

rayz coding!

rayz coding!'s profile picture

how can you make the background of your profile transparent?


Report Comment

zombigf11

zombigf11's profile picture

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 ☆

aeron ☆'s profile picture

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

heartbeats's profile picture

ty so much for this!! your profile is amazing btw


Report Comment



omg tysm!

by sarah ♡; ; Report

✭ star laveaux ✭

✭ star laveaux ✭'s profile picture

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 ♡¸.•*

*•.¸♡ krissy ♡¸.•*'s profile picture

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

Foxy's profile picture

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

Carmen Julia's profile picture

Thank you for this! You are amazing!


Report Comment

Allen

Allen's profile picture

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

ash ❤'s profile picture

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

Jenna's profile picture

i added this to my blog megathread of profile stuff, i hope that's okay! 💖


Report Comment



yes ofc!

by sarah ♡; ; Report

Cailea

Cailea's profile picture

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