profile picture

Published by sarah ♡

published
updated

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

Comments

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

♡ auders ♡

profile picture

best one yet


Report Comment

Ben

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

Jenna

profile picture

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


Report Comment



yes ofc!

by sarah ♡; ; Report

Lailoken

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