sarah ♡'s profile picture

Published by

published
updated

Category: Web, HTML, Tech

mini tutorial: minimalist interests section




I get a few questions about how I made my left-side column of my profile borderless, table-less and header-free, and while it’s not complicated at all, it does involve a few different codes, so I thought I’d put the instructions into a blog post instead. There’s also probably a more elegant solution to this but this just happens to be how I did it.


Here's where we start:



 

The first thing that I like to do is remove all of the interest boxes EXCEPT for ‘General’. I find that just working with one single box feels a little more neat and tidy. Cory has a blog post here about how to remove each section individually. This step isn’t necessary, though! If you do this, you should end up with something like this:



 

The next step is to ‘remove’ the title ‘General’ from the box. We’re not really removing it, so much as making it invisible by changing the text size to ‘0px’. 


<style>
.details-table tr:nth-child(1) td:first-child p { font-size:0; }
.details-table tr:nth-child(1) td:first-child p:before { content:""; font-size:.7rem; }</style>


That should give us this:

 

This is how it would look if you started to fill this box at this point. Images that you place here that are too large for the space will get cut off.




I put some text into the box to show how it fills out.



 

We need to stretch this space out. The amount of space that you can stretch the right side of the table is 280px, before it overflows out of the left side of the page and starts moving toward the right. On my own profile, I have a scrolling box with my support code in it. Since I have the support code box set to 280px wide, it keeps that right column stretched out. That leaves me with something that looks like this:



 

Obviously not everyone wants a scrollbox on their page, but we can make that scrollbox disappear the same way that we made the header’s disappear, by setting the sizes of certain things to ‘0px’. It’s technically still there, we just can’t see it. You want to paste this code into your ‘General’ section. It can be above or below the other codes and your content, it won’t make a difference.


<div style="width: 280px; height: 0px; background-color: #fffff; border-width: 0px; border-style: solid; color: #000000; font-size: 8px; font-family: Verdana; overflow-x: hidden; overflow-y:auto;"><pre>.</pre></div>

 

Now it should look something like this:



 

The last thing that you want to do is adjust the colors to make sure that they match the rest of your page and blend in. I originally found bit of css is from Alok’s blog about changing spacehey colors. I’m linking the blog post here, but have pasted just the relevant code relating to the interests section here. Please check out the original blog post & leave a kudos to boost the original post. This code needs to go in your About Me or Who I'd Like To Meet section, not Interests.


<style>/* color/style of borders around tables on the left */
.profile .contact, .profile .table-section, .profile .url-info {
  border: 0px solid #fff;
}

/* colors for the table headings on the left */
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {
  background-color: #fff;
  color: #fff;
}

/* colors for table cell background (by default spacehey has a separate color for :first-child) */
.profile .table-section .details-table td {
  background-color: #fff;
  color: #000;
}</style>

 

I changed all of the colors to white, except for the text for the section, which I left black, so it ended up looking like this:


 


Which is where I leave you! I rarely have any idea what I’m doing when it comes to customizing here, but if this is really unclear or anything, please let me know so I can try to adjust!!



57 Kudos

Comments

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

yu006

yu006's profile picture

Tysm! This was very easy to understand and helpful!


Report Comment

CallMeUser

CallMeUser's profile picture

Does this only work for the entire interests section?


Report Comment

Astoria

Astoria's profile picture

is there a way to move the interests (and other boxes, blurbs comments, friends?) and how would you change the color of the interests box?


Report Comment

xpeachypinkx

xpeachypinkx's profile picture

you saved my life!!!! could not for the life of me figure out how to do this. thank you thank you <3


Report Comment



you're welcome!!

by sarah ♡; ; Report

はなち

はなち's profile picture

Off topic but is there a way to put ur interests into a scroll box? I've tried using {height: 500px!important;
overflow-y: scroll;} but it didn't work. Am I pasting it in the wrong section? I tried pasting it in table.details-table and table.details-table td to no avail ):


Report Comment



do you mean the entire left column of interests or just scroll boxes within the sections?

by sarah ♡; ; Report

The entire column

by はなち; ; Report

~Ime~

~❤Ime❤~'s profile picture

this is very helpful, thank you.


Report Comment



yw! ♡

by sarah ♡; ; Report

WallachianWunderWrld

WallachianWunderWrld's profile picture

veryyyy nice !!


Report Comment

SafeInSanity

SafeInSanity's profile picture

That's pretty cool!


Report Comment

CORKSCREW

CORKSCREW's profile picture

this is so nice and helpful!!! thank u!


Report Comment