Add Custom CSS to your Tama!

how did you stop the tamanotchi's animation?

#main {

font-family: cursive;

}

body {

 background-image: url("https://64.media.tumblr.com/8f84f7de560cd5ecff62ef41bf043e40/c9f8b6457f56ea92-0d/s640x960/e55e6293dc79c49355369b3375815ce1a98fa981.gifv");

 background-color: #FFC0CB;

}

Idk how to change the text color

That CSS is super cute!!! Thanks!

#main {

font-family: serif;

}

body {

 background-image: url("https://64.media.tumblr.com/8e202cd88d06aca9e693a8a75b84252f/47c645ee8156a33c-4f/s250x400/d1a333dc7cdcc9843096d633a46a5e73d8ff4e9c.pnj");

 background-color: #93207A;

}

Does anyone know how to get rid of the white border between the title and content part of a pet's page? It seems like that part is separate from both elements.

question:

how do u change the foreground colour? ik how to change the background, but what about the foreground?

here's my layout :D

<!-- Layout by hottopicwannabe (https://spacehey.com/tiger09te). Please keep this note when using this layout. Feel free to edit it as much as you want -->

/* this changes the font, the foreground color and the text's color, in that order */

#main {
 font-family: fantasy;
 background-color: #C3E7F165;
 color: #151950;
}

/* this changes the hyperlinks' color */

a:link,a:visited {
 color: #9D4AD8;
}

/* this changes the background */

body {
 background-image: url("https://f.feridinha.com/aVNNU.png");
 background-size: cover;
}

/* this changes the header's color. It also makes it translucent */

#header {
 background-color: #C3E7F199;
}

/* this changes the site's text logo*/

#logotext {
 content: url("https://f.feridinha.com/roaAp.png");
}

/* this changes the site's image logo*/

#logoimg {
 content: url("https://f.feridinha.com/f6i5U.png");
}

/* this changes the footer's text color (the original was too light so it wasn't very readable with the background I put on this layout */

#footer {
 color: #3A3B40;
}

heres mine!! -> https://tamanotchi.world/17957

:root{
--prim-col: black;
--sec-col: #15b3bc;
--sec-col-hov: #01769c;
--tri-col: white;
--bg: url(https://fukounaglr.neocities.org/images/waves.jpg);
--fav: url(https://fukounaglr.neocities.org/graphics/pixels/vapo2.gif);
}

* {
color: var(--tri-col);
}

.even, #profileflavortext, #petholder {background-color: #002c49}

.odd, .colname {background-color: #00112e}

input{background-color: var(--sec-col)}

#decorations{
display: none;
}

a{
color: var(--sec-col);
}
a:hover{
color: var(--sec-col-hov);
}

#header{
background: var(--sec-col);
color: var(--tri-col);
}

#footer{
background: #002c49;
color: var(--tri-col);
}

#shade1{
background: var(--bg);
}

#title{
color: var(--sec-col);
}

#title::after{
content: "https://fukounaglr.neocities.org/";
display: block;
color: var(--sec-col-hov);
font-size: 0.5Em;
}
 .username{
color: var(--sec-col-hov);
}

#title::before{
content: var(--fav);
}

#main{
background: var(--prim-col);
}

You can add text to parts of your profile by coding in:

 #[section of page]::after{

content: "[what you want to type]";

display: block;

color: var(--sec-col-hov);

[ and now you can edit the text however you please, like color size font etc ]

}

If you want to add text specifically under your pet's image then you can type:

#petholder span::after{

https://tamanotchi.world/18196

(i might have stolen a line of code from the casket kid below me)(props to them for the OG idea!)

Here’s a little snippet I use to give my pet page a cute pastel background space waves:

body {  

  background: linear-gradient(135deg, #ffdde1, #ee9ca7);  

}  

https://tamanotchi.world/22610c

Made a theme based on the COMP status screen from SMT. It's a hodgepodge of code from this thread, some of my code and files from my site. It's absolutely massive, because it uses a base64 encoded font. Don't wanna flood the whole page with a ominous wall of text, so here's a pastelink instead https://pastelink.net/mg9zzdb9

Preview of the code below ⬇️

/* this changes the header's color. It also makes it translucent */

#header {
 background-color: #000000;
}


body {

 background-image: url("https://bluebeneaththemoon.neocities.org/greengrid.png");

 background-color: #001800;
}

@font-face {
    font-family: 'Megaten20XX';
    src: url('data:font/woff2;charset=utf-8;base64, code goes here format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

#main {
 font-family: Megaten20XX;
 color: #f8f8f8;
 font-size: 11px;
 background-image: linear-gradient(to bottom, #000000, rgba(0, 0, 0, 0) 70%);
  border-radius: 18px;
  background-color: rgba(0, 0, 0, 0) 0%);
  margin: 10% auto 5%;
  max-width: min-content;
  padding: 1rem;
  box-sizing: border-box;
  position: relative;
}


#petholder {
background-color: rgba(24, 40, 48, 1);
  float: right;
  height: contain;
  text-align: center;
  width: contain;
  border-radius: 1%;
}

/* this changes the hyperlinks' color */

a:link {
 color: #00D860;
}
a:visited {
 color: #F8A000;
}

#title {
  color: #d60000 !important;
}


.even, #profileflavortext {background-color: #001800}

.odd, .colname {background-color: #002000}

/* this changes the site's text logo*/

#logotext {
 content: url("https://cdn2.steamgriddb.com/logo_thumb/7928cdc9a5040872be11e87e9bef1d67.png");
}

/* this changes the site's image logo*/

#logoimg {
 content: url("https://cdn2.steamgriddb.com/icon/ee4bf6db5e976ea9277d22ce248fc76a/32/256x256.png");
}

And here's a screenshot :D Should work mostly properly on mobile, too.

https://tamanotchi.world/23910c 

old thread ik but here mine :3 made my tama yesterday! anyone have a clue if you can add floating gifs? i wanna do stuff to the sides :p

#main {
  font-family: serif;
  color: gold;
  font-weight: bold;
}

body {

background-image: url("https://i.pinimg.com/736x/3c/e3/99/3ce399f31840a3c440dc6f432cd72aea.jpg");

}

#title {
  color: olive;
  font-size: 150%;
  font-weight: bold;
  padding: 20px 20px 0;
}

#content {
  min-height: 250px;
  padding: 10px 48px 0;
  background-color: #e5d9be;
}

a, a:visited {
  color: #e07b0f;
  Font-weight: bold;
}

#header {
 background-color: olive;

}

#header {
  color: #fff;
  line-height: 150%;
}

#footer{
background-color: olive;
color: white;

}

.modname {
  color: #b91919;
  font-weight: 700;
}

#petholder {
  background-color: olive;
}

#logotext {
 content: url("https://art.pixilart.com/sr5zd6924972daaws3.png");
}