status.cafe embed

Today I'm gonna show you how to embed your status from status.cafe. To do this, you need an account on status.cafe and the page(s) you're going to embed it on and either a style tag or a CSS file.

You can see an embed like this on my homepage or on cinni's dream home.

directory

  1. HTML
  2. CSS
  3. Styling
  4. Styling Cont.

starting now...

Step 1 - HTML

I would recommend setting a status on status.cafe before starting. In your HTML file, copy and paste the code below and replace USERNAME with your status.cafe username.

Step 2 - CSS

In the STYLE tag in your HEAD OR in your CSS file (that you should have linked in your HTML!) you should add the following code. We will figure out how to tweak it in the next step.

Step 3 - Styling

After that, your status.cafe embed should look something like this on your site with a different status/username/emoji/time.

We can style this box by changing any background or color in the CSS/STYLE tag. You may use Decimal (255, 255, 255 OR 0, 0, 0), HEX (#fff, #ffffff, #000, #000000), or some colors that it supports (white, black). This is for your creative liberty to take upon, but this is what each of the different groups do.

Step 4 - Styling Cont.

You can change anything to be honest, like the border, margin, or making the <a> tags go to italics on hover. It's completely up to you and your abilities.