aliraluna's profile picture

Published by


Category: Web, HTML, Tech

HTML/CSS codes that might help ~o.o~


I have gathered some useful codes here and there and thought you might be interested in them. Thanks to everyone that has shared their insightful knowledge!

Pages that might help with coding:







VISIT HERE to try the coding first: 

VISIT HERE to learn more about HTML and CSS:

NOTE: To add images, add the code AFTER/LUEGO the <style> </style>

<img src=”IMAGEHERE”>

To separate sentences with images or whatever: <p> </p>

Example: <p> <img src=”IMAGEHERE”> </p> =THIS is one sentence with one image

Color codes:

Color website: 

Code for round corners:

Website for corners percentages: 

Note for/about using cursors: just copy and paste it AFTER your main <style> </style>

Website for cursors:


  1. Code for profile background (usually will be a color as to not confusing it with the general/main background:

.profile {



  1. Code for general profile (is the small area that is close to the profile picture):

.general-about {


  border-radius: 15px;

  1. Code for Blog Preview:

.blog-preview {


  border-radius: 15px;

  1. Code for Blurbs (NOTE: This is the area of “about me” and “people i’d like to meet)

.blurbs {


  border-radius: 15px;


  1. Code for changing the COLOR inside the General interests boxes:

<p style="background-color: #ANYCOLOR ;"> WRITE HERE


  1. Heading code for: “contacting aliraluna”, aliraluna interests, profile links”: 

.profile .contact .heading, .profile .table-section .heading, .home-actions .heading {

  background-color: #89FAC4;

  color:#FFFFFF ;


  1. Code for border of letters F: 

.profile .contact, .profile .table-section, .profile .url-info {

  border: 2px solid #89FAC4;


  1. Code for the background color of the friend list:

.friends:not(#comments) {

  grid-area: friends;


  border-radius: 15px


  1. Code for the background of the COMMENTS section (both the section that has the pictures of the commenters, and the inside of the comment box:

.profile .friends td {

  background: #89FAC4;

  border-radius: 15px

  1. Codes for changing the SPACEHEY logo AND the SpaceHey Banner/menu at the top of the page:

.logo {

    background: #F7FA89;



nav{background-color:#F7FA89;(--box_color_and_seethru); !important;border-radius: 0px 0px var(--curve) var(--curve); !important;}

nav ul{background:none !important;}

nav img{filter: opacity(80%) !important;}

nav ul a img, .mood a img{display:none !important;}

.top{background:none !important;background-color:rgba(0, 0, 0, 0.1); !important;}

  1. Code for adding more rows in the INTERESTS section/table:






    <p>I have two dogs, Chicca and Eevee</p>



If I want/need to add colors then:






    <p></p><p style="background-color:  #F7FA89 ;">I have two dogs, Chicca and Eevee</p>




Website to make custom scroll box html,overflow%20property%20to%20the%20div

Websites To find free to use stamps and banners: (THIS one is so awesome ToT)

Website to make gif pictures: 

Code to change the color and visibility of footer (box)

footer {

        border-radius: 15px;

        background: rgba(255, 255, 255, 0.94) !important;

        display: block !important;

  1. Code to make my profile picture round (from square to round) and people’s picture round

.profile-pic {

border-radius: 500px;

overflow: hidden;


.profile .friends .person img {

border-radius: 500px;


Code to change the colors inside the general,etc table

.profile .table-section .details-table td {
  background-color:#FF8C46 ;
  color: #black;

/*the color refers to the color of the words*/

Code to change the colors of the heading from the right side (about me, etc)

.profile .blurbs .heading, .profile .friends .heading {
  background-color: #444;
  color: #bbb;

Code to replace the ONLINE icon
 .online { visibility: hidden; } .online img { content: url(""); animation-name: none; visibility: visible; height: 20px; width: 80px; 

358 Kudos


Displaying 20 of 44 comments ( View all | Add Comment )

zeyz ^_^

zeyz ^_^'s profile picture

this helped a bunch thanks dude

Report Comment


doramasmp4's profile picture

Are you familiar with the process of incorporating an overlay onto your profile? Something like a color overlay that covers the entirety of my profile. again

Report Comment


☆Konata☆'s profile picture

thank you really good

Report Comment


piee's profile picture

thank u sm !!

Report Comment


SomeNugget's profile picture

Hey this helps so much!
I was wondering how you can change the colour of a blinkie perhabs, I saw that on different profiles but couldnt find a way to do it ^^"

Report Comment


Remitly's profile picture

Good job. Thanks for sharing! Remitly

Report Comment


PRAXIS's profile picture


Report Comment

Shit I forgot to add "/p".

by PRAXIS; ; Report


hikkibaka's profile picture


Report Comment


electricpants57's profile picture

i actually love you omg thank you so much

Report Comment

Goober man

Goober man's profile picture


Report Comment

Star/Wally <3

Star/Wally <3's profile picture

I always wanted to know how to hide one of the interest boxes. like heroes one. what's the code for it?

Report Comment

Also an profile intro. not those 5 second videos, but a warning, tw or stuff

by Star/Wally <3; ; Report

for the profile intro, u can use this layout post:

by Anthony .; ; Report


-XxJOSHxX-'s profile picture

How do i change the name of general interests box

Report Comment


mai's profile picture

does anyone have any code to make your boxes hover? i've seen someone have a hovering profile picture and a hovering friends box and i was just wondering abt it!

Report Comment

lol i know that this is late as heck but i just found how to do it heres a link to the person who posted the code

by mummified_corpse; ; Report

୨ nana ୧

୨ nana ୧'s profile picture

does anyone know how to like, change the shape of your friend's icons that are displayed on your profile?

Report Comment

sorry i worded this icky. i mean like, how can i change the shape to lets say, hello kittys silhouette? or like a heart silhouette?

by ୨ nana ୧; ; Report

I need to know too. And how people overlay colors onto their friends pfps

by PumpkinGutz; ; Report


mayomayo72218's profile picture

Very detailed and specific information. thank you for sharing!
Vampire Survivors

Report Comment


Tibe's profile picture

Is there any way to simply change the colour of the ONLINE! icon? Thanks in advance!

Report Comment

oh wait it's been answered in another thread:

.online img{

filter: insert filter info here


here's a guide on each property

so for example:

.online img {

filter: hue-rotate(5.1deg) saturate(39.5%) brightness(180%);


i have some tips left:

- the colour of the original icon is #0C8C00 / rgb(12,140,0)

- you can look up #0C8C00 and your target colour on colorhexa and look at each of their values in HSV/HSB to figure out what you need to do to get your target colour with just hue-rotate, saturate and brightness (it won't always look exactly like what you want but it can get pretty close and you can always fiddle around with it to get exactly what you want)

by Tibe; ; Report


4l1sT4RS's profile picture

The code to add more rows in the interest section doesn't work for me, what can I do?

Report Comment

Just put into one of the boxes in the interests section! like if you add to music interests box, then it will appear inbetween music and movies.

by Star/Wally <3; ; Report

kenni ♡

kenni ♡'s profile picture

does anyone know if i can change the width of the main box? like the main container idk its too large for my bg image

Report Comment

you could do something like:

.container {
width: [insert value here, i use percentages personally];

by melt; ; Report

thank u <3

by kenni ♡; ; Report

keith ☆

keith ☆'s profile picture

do you know how to add an overlay to your profile? like a colour overlaying my whole profile

Report Comment

hii no, sorry! >w< if you ever do, feel free to share!

by aliraluna; ; Report


virus's profile picture

is there a way to change the names of the boxes in the interests section? for example, if i wanted to make General, Movies, etc display in all lowercase

Report Comment

by 粘膜ゴースト (GHOST); ; Report

Yes! I'll blog it

by PumpkinGutz; ; Report