mini tutorial: minimalist interests section

<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!!