em construção!

Status.café tips and tricks

Okay, so. When I was setting up my status.café page, I struggled to find the info that I wanted. I'm not a coder, I don't code, I know very little about coding (I hope I made it clear that I DONT KNOW WHAT IM DOING) and not having all the info in one place was rough, buddy. So I scoured the forums and other ppl's codes and here's what I've found out. I hope it can help someone like me and make life easier.

things you can do on your page

1. You can edit your page by including css on the “About” section (found in the Settings tab on status.cafe)


2. You can follow specific ppl by using their atom link on your rss reader (e.g. feedly, tiny tiny rss, mire, etc.)


3. Anything below the css will show up on the right column (about section). You can include anything you want using basic html – your bio, links, pictures, gifs, blinkies/stamps/buttons/dividers etc.


4. A basic css was provided by decodreams on this post. I tweaked with it to include more stuff. It goes as follows:

<style>
/* include links to your cursor, background and change colors and fonts here */
{cursor: url(urlhere), auto !important;}
body {
max-width: 680px;
padding: 5px;
font-family: ; /* include a font here, you can get a lot of cool ones on google fonts! */
font-size: 8px;
color: #000;
background-color: #Fff;
background-image: url("urlhere");
background-repeat: repeat;
background-position: center;
}

/* change link color and style */
a:link {
color: #000;
font-size: 10px;
text-decoration: none;
}

/* change visited link color and style */
a:visited {
color: #000;
font-size: 10px;
text-decoration: none;
}

/* change hover link color and style */
a:hover {
color: #fff;
font-size: 10px;
text-decoration-line: underline;
transition: all 0.2s ease-out;
}

/* change link color and style */
a:active {
color: #000;
font-size: 10px;
text-decoration: none;
}

/* change navi style */
header {
top: 15px;
background-color: #FFF;
border: 1px solid #000;
padding-left: 8px;
padding-top: 2px;
padding-bottom: 4px;
font-size: 12px;
}

/* change columns style below */
@media (min-width: 400px) {
.cols {
grid-template-columns: 1fr 2fr;
grid-gap: 10px;
margin-top: 10px;
font-size: 10px;
}

section {
background-color: #FFF;
border: 1px solid #000;
padding-left: 8px;
padding-right: 8px;
}

section:first-child {
height: 400px;
}

section:last-child {
height: 400px;
background-size: cover;
overflow-y: scroll;
}

/* change 'subscribe via atom' style here */
a[href*="atom"] {
  font-size: 0.6em;
  text-decoration: ;
  letter-spacing: 1px;
}
</style>

5. You can have your entire status feed on your website by following bechnokid’s tutorial.


6. If you want to hide the “email”, “about” and “homepage” sections just add the following:

.email { 
display: none; 
}

dd.homepage {
  display: none;
}

dt.about {
  display: none;
}

7. If you want to hide older status, you can use the following code (change the amount that you want to be visible, it’s set to 4). This one I got from petrapixel’s status page:

.status:not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)):not(:nth-child(5)), /* include more  ":not(:nth-child(NUMBER))" until the number you want visible*/
.status ~ p,
.cols section:nth-child(2) h2 {
  display: none;
}

.status:nth-child(5)::after {
  content: ". . ."; /* you can change this to whatever you want or leave blank */
  margin-top: 30px;
  text-align: center;
  display: block;
  font-size: 2em;
}

8. If you want to hide the “Subscribe by Atom”, paste the following on your css and replace “YOURUSERNAMEHERE” with, well, your username (info found here):

[href="/users/YOURUSERNAMEHERE.atom"] { display: none; }