jennardson's profile picture

Published by

published
updated

Category: Web, HTML, Tech

CODE: EASY PEASY OVERALL PROFILE CUSTOMIZATION, LABELED

<!--OVERALL PROFILE CUSTOMIZATION - PLACE IN ABOUT ME-->
<style>
/* CUSTOMIZE BASIC SETTINGS */
:root {
    --logo-blue: transparent; /* CHANGE COLOR OF SPACEHEY BAR AT TOP */
    --darker-blue: white; /* CHANGE COLOR OF PROFILE LINKS */
    --lighter-blue: teal; /* CHANGE COLOR OF NAVIGATION BAR */
    --even-lighter-blue: #ccc;
    --lightest-blue: #fff;
    --dark-orange: #FFF; /* CHANGE FONT COLOR OF ABOUT ME, WHO I’D LIKE TO MEET */
    --light-orange: purple); /* CHANGE BACKGROUND OF COMMENT SECTION */
    --even-lighter-orange: purple; /* CHANGE BACKGROUND OF COMMENT SECTION */
    --green: #38d;
}

/* OVERALL BACKGROUND COLOR/IMAGE */
body{
    background-image: url('https://media.giphy.com/media/VKAdKhTjPdUac/giphy.gif');
    background-size: repeat;
    background-color: #952022;
}

/* PROFILE CONTAINER */
main {
    border-radius: 0 0 15px 15px; /* ROUND BOTTOM OF PROFILE */
    border: 2px solid rgba(0,0,0,0.7); /* ADJUST BORDER FOR PROFILE */
    color: white; /* FONT COLOR */
    background-color: black; /* BACKGROUND COLOR FOR PROFILE */
}

/* DEFAULT FONT SETTINGS FOR CONTENT*/
main p{
    letter-spacing: 2px; /* SPACE BETWEEN LETTERS */
    font-weight: 600; /* FONT THICKNESS */
    line-height: 1.5; /* SPACE BETWEEN TEXT LINES */
}

/* SPACEHEY FOOTER INFORMATION */
footer{
    background-color: transparent; /* CHANGE COLOR OF BOTTOM SPACEHEY INFO */
}

/* SECTION HEADINGS */
.heading { 
    padding: 5px 0 !important;
    background-color: transparent !important; /* ADJUST BACKGROUND COLOR OF HEADINGS*/
    color: darkviolet !important; /* FONT COLOR */
    border-bottom: 2px dashed; /* LINE BELOW SECTION HEADINGS */
 }

/* CHANGE COLOR OF THE NUMBER OF FRIENDS/COMMENTS YOU HAVE */
.count {
    color: white;
}

/* ADJUST OVERALL FONT FAMILY AND SIZE */
* {
    font-family: arial, sans-serif; 
    font-size: 0.99em;
 }

/* HIDE/CHANGE COLOR OF LEFT SIDE BORDERS (CONTACT SECTION & INTERESTS) */
.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions {
    border: none;
}
table.details-table {
    border-collapse: collapse;
}
table.details-table td {
    background-color: transparent !important;

/* HIDE PROFILE URL */
.profile .url-info {
    display: none;
}

/* CUSTOMIZE NAME */
.profile h1 {
    font-size: 2em;
    color: darkviolet;
    font-family: arial, sans-serif;
    text-shadow: 3px 3px teal;
}

</style>


186 Kudos

Comments

Displaying 13 of 13 comments ( View all | Add Comment )

starship

starship's profile picture

omg this is so helpful tyvm!


Report Comment

@he4rtfangzz

@he4rtfangzz's profile picture

pookie dookie how do i change the filter on my friends profile
I FAILED MINE SO HARD


Report Comment

Bowian !!

Bowian !!'s profile picture

EEEEEE THANK U THANK U THANK UUUU :33


Report Comment

scarysof

scarysof's profile picture

HELPPP WHATS THE CODE TO CHANGE CONTACT BOX AND INTEREST BOX, I WILL LITERLY MARRY YOU IF YOU HELP ME PLZ OMGODDDD!!!!!!!!


Report Comment

Dre <3

Dre <3's profile picture

Could someone help? All my text is set to white except about me and who I'd like to meet how do I fix it?


Report Comment



Hii I just found this out, after the last "content" thing put h3 , h4, h5, .url-info b {
color: #350807; but change to whatever colour you want :D

by Vinny !; ; Report

Asteroid Point

Asteroid Point's profile picture

i have used this, ty ty!


Report Comment

Toro

Toro's profile picture

Hi <3 could you please help me with my footer? I currently have one image in it:


footer:after{
top: 70%;
font-size:0;
left: 78%;
position:fixed;
pointer-events: none;
opacity: 0.9;
content:url(https://i.pinimg.com/originals/95/79/cf/9579cfff73363247afa45fa51c28c19e.png);
}


I'd like to add a second image on the right side as well, but when I duplicate this code to add a second image it does not work. Am I only able to have one image in the footer? If it helps to see what I'm talking about, I'm using it on my profile right now! Also noting this comes from this layout I'm using but am trying to make changes to: https://layouts.spacehey.com/layout?id=23373


Report Comment

frankie

frankie's profile picture

thank you! i was just wondering if i could get some help with changing the commenter's part of the comment section. no matter what i do, it stays orange :(


Report Comment



hi! so this is a code i got from a website called https://thelostcoffee.neocities.org/ (specifically https://thelostcoffee.neocities.org/tracy%27s%20spacehey%20nebula%20css/space%20nebula%20part%202%20css) that helped alot with my profile.



:root{

--headers: navy;

--links: blue;

--text: darkblue;

--names: navy;

--search: darkblue;

--aboutmeheader: navy;

--online: blue;

--mynamesize: 50px;

--light-orange: rgba(135, 206, 235, 0.33);

--even-lighter-orange: rgba(135, 206, 235, 0.33);

--font-family: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', sans-serif;

--box_color_and_seethru: rgba(180, 199, 220, 1);

}

<style>

"--light-orange:" and "--even-lighter-orange:" are the two boxes in the comment section. if you want to change their color, u need to write down the color of your choice next to it (like how i did). u don't need to write rgba, u could just write down the color or the hex code. i don't know if it will also overwrite the other colors u have already put so first, try the one below and if that doesn't work then just use the code on top! hopefully this helps.

<style>

:root {

--light-orange: rgba(color of your choice);

--even-lighter-orange: rgba(color of your choice);
}

by aer0 >.<; ; Report

omfg thank you so much! i used the second root and it worked perfectly. ur a lifesaver

by frankie; ; Report

kyulyulo

kyulyulo's profile picture

rahhh tysm T T


Report Comment

lala.luxie

lala.luxie's profile picture

does anyone know what header each of these are
h1
h2
h3
h4
h5


Report Comment



ik this comment is a year old but ive been wondering the same thing this whole time 3

by maxymustdie; ; Report

Sally

Sally 's profile picture

So helpful, thanks a million :)


Report Comment

⛧Morganna Bramah

⛧Morganna Bramah's profile picture

Thank you for the help!


Report Comment

Døminick

Døminick 's profile picture

super helpful layout!


Report Comment