dicas e macetes

tips and tricks

Ok, vamo lá. Qdo eu tava arrumando meu status.café, tive mta dificuldade em encontrar as informações que eu queria. Eu não sou dev, n sei mexer em código, sei quase nada sobre programação (espero ter deixado claro que EU NÃO SEI O QUE ESTOU FAZENDO) e não ter todas as informações em um só lugar foi difícil, cara. Então eu vasculhei fóruns e status de outras pessoas e aqui está o que descobri. Espero que possa ajudar alguém como eu e tornar a vida mais fácil.

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.

coisas q dá pra fazer na sua página

things you can do on your page

1. Você pode editar a página incluindo css na seção "about" (encontrado na guia Settings em status.cafe)
2. Você pode incorporar seu status no seu neocities usando esta widget.
3. Você pode seguir pessoas específicas usando o atom em seu leitor rss (ex. feedly, tiny tiny rss, mire, etc.)
4. Qualquer coisa abaixo do css será exibida na coluna direita. Você pode incluir qualquer coisa que quiser usando html básico - bio, links, fotos, gifs, blinkies/stamps/buttons/dividers etc.
5. Dá pra exibir todo o seu feed de status seguindo o tutorial de bechnokid.
6. Um css básico foi fornecido por decodreams neste post. Eu fiz alguns ajustes p incluir mais coisas. Aí vai:

1. You can edit your page by including css on the “About” section (found in the Settings tab on status.cafe)
2. You can embed your status on your neocities webpage by using this widget.
3. You can follow specific ppl by using their atom link on your rss reader (e.g. feedly, tiny tiny rss, mire, etc.)
4. 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.
5. You can have your entire status feed on your website by following bechnokid’s tutorial.
6. 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>

Se quiser ocultar as opções de "e-mail", "about" e "homepage" basta adicionar o seguinte código:

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

Se quiser ocultar os status mais antigos, dá pra usar o seguinte código (altere a quantidade que vc quer q seja visível, ela está definida pra 4 no exemplo abaixo). Esse eu peguei do status de petrapixel:

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

Se vc quiser ocultar o "Subscribe by Atom", cole o seguinte em seu css e substitua "YOURUSERNAMEHERE" por, bem, seu nome de usuário (info encontrada aqui):

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

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