aliraluna's profile picture

Published by

published
updated

Category: Web, HTML, Tech

View Blog View Profile Report Blog Entry

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

Hello! 

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:

  1. https://blog.spacehey.com/entry?id=1552

  2. https://blog.spacehey.com/entry?id=1724 

  3. https://blog.spacehey.com/entry?id=1254 

  4. https://blog.spacehey.com/entry?id=1533 

  5. https://blog.spacehey.com/entry?id=3276

  6. https://blog.spacehey.com/entry?id=2808

VISIT HERE to try the coding first: https://genericprofileeditor.neocities.org/ 

VISIT HERE to learn more about HTML and CSS: https://www.w3schools.com/

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: https://htmlcolorcodes.com/ 


Code for round corners:

Website for corners percentages: https://www.w3schools.com/css/css3_borders.asp 


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

Website for cursors: https://www.cursors-4u.com/

CODES:

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


.profile {

background:#FEBFED;


 }

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


.general-about {

 background:#BFE4FE;

  border-radius: 15px;

  1. Code for Blog Preview:

.blog-preview {

  background:#FBBFFE;

  border-radius: 15px;


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


.blurbs {

    background:#F7FA89;

  border-radius: 15px;


 }

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

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


</p>

  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;

  background:#A7BCFB;  

  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:


<tr>

  <td>

    <p>Pets</p>

  </td>

  <td>

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

  </td>

</tr>


If I want/need to add colors then:


<tr>

  <td>

    <p>Pets</p>

  </td>

  <td>

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

  </td>

</tr>

EDIT

Website to make custom scroll box html

https://www.myspacegens.com/handler.php?gen=scrollbox 

https://www.quackit.com/html/codes/html_scroll_box.cfm#:~:text=An%20HTML%20scroll%20box%20is,overflow%20property%20to%20the%20div. 


Websites To find free to use stamps and banners:


https://blingee.com/

https://www.glitter-graphics.com/ (THIS one is so awesome ToT)


Website to make gif pictures:

http://www.glitterfy.com/ 

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;

}


EDIT
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("https://i5.glitter-graphics.org/pub/745/745455rvacxjsot2.gif"); animation-name: none; visibility: visible; height: 20px; width: 80px; 




358 Kudos

—

Comments

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

zeyz ^_^

 zeyz ^_^'s profile picture

this helped a bunch thanks dude


Report Comment

doramasmp4

 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.https://doramasmp4.dev/tag/animeyt/.Thanks again


Report Comment

☆Konata☆

 ☆Konata☆'s profile picture

thank you really good


Report Comment

piee

 piee's profile picture

thank u sm !!


Report Comment

SomeNugget

 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

 Remitly's profile picture

Good job. Thanks for sharing! Remitly


Report Comment

PRAXIS

 PRAXIS's profile picture

ILY FOR THIS TY


Report Comment



Shit I forgot to add "/p".

by PRAXIS; ; Report

hikkibaka

 hikkibaka's profile picture

THANK YOU OMFG (ooc)


Report Comment

electricpants57

 electricpants57's profile picture

i actually love you omg thank you so much


Report Comment

Goober man

 Goober man's profile picture

TYSMMMM AH


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:

https://layouts.spacehey.com/layout?id=31692

by Anthony .; ; Report

-XxJOSHxX-

 -XxJOSHxX-'s profile picture

How do i change the name of general interests box


Report Comment

mai

 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
https://forum.spacehey.com/topic?id=99272

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

 mayomayo72218's profile picture

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


Report Comment

Tibe

 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

 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

 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



https://blog.spacehey.com/entry?id=402631

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

Yes! I'll blog it

by PumpkinGutz; ; Report