profile picture

Published by sarah ♡


Category: Web, HTML, Tech

View sarah ♡'s Blog

View sarah ♡'s Profile

Report Blog Entry

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

32 Kudos


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

♡ auders ♡

profile picture

best one yet

Report Comment


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 Ben; ; Report

ash ❤

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


profile picture

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

Report Comment

yes ofc!

by sarah ♡; ; Report


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