Ok i'll try to make it look simple as possible for you, I'm not that good at coding
TIP: Put your code in CSS BOX OF https://tommypanzram.neocities.org/SpaceheyLayoutEditor/#top TO TEST LAYOUT EASIER
Alway make a backup in Notepad++ before you try anything!!!
Add !important: to help the default code of SpaceHey not overwrite your code
Change the HEX code(#260524) to change color https://www.w3schools.com/colors/colors_hexadecimal.asp
1) Make the blue section background clear or image:
This area contain a lot of difference part you had to change them all:
- Header part:
.profile .contact .heading,
.profile .table-section .heading, {
background: transparent;
color: #260524; /* Text color if your background is white*/
}
*Not recommend transparent for your header, use (background: #CF8FCA;) instead for better look, if you use the background like in your pic
- THE BLUE BOX Interests & Links:
.table-section,
.table-section td,
.table-section th {
background: transparent !important;
}
-td = each normal cell (your textbox inside hobbies, music, movies, etc.)
-th = the header cells (the small title box like “General”, “Music”, “Movies”)
*If you wants an image instead:
.table-section {
background: url("IMAGE_URL_HERE") center no-repeat !important;
}
.table-section td,
.table-section th {
background: transparent !important;
}
-> must keep .table-section th,td transparent to show image background
*OR color:
.table-section {
background: #42053C; /*dark red*/
}
THE ORTHER BLUE BOX:
/* Contacting BOX*/
.profile .contact {
background: transparent;
border: 2px solid #CF8FCA;
margin: 10px 0;
}
/* THE SpaceHey URL BOX */
.profile .url-info {
background: transparent;
color: black; /* Text color */
}
Combie ALL OF them if you want more simple look
Ex:
.profile .contact, .profile .url-info, .profile .table-section, .home-actions {
border: 2px solid #CF8FCA;
background: transparent;
}
.table-section td,
.table-section th {
background: transparent !important;
}
2) Separate the top navigation bar (Home / Browse / Search / etc.)
That bar is called the navbar.
It can be visually separated with its own background and margin.
nav {
margin-bottom: 20px; /* adjust position how far from the main page below it*/
}
/* BACKGROUND ON TOP THE NAV BAR contain Big logo and Search */
- As i see in your sample pic your TOP NAV part already look good no need to use this if you don't want to change
nav .top {
background: transparent; /* Or background: pink; */
}
/* TOP NAV big LOGO COLOR */
.logo {
filter: sepia(50%) hue-rotate(288deg) saturate(100);
}
*Change color in 'filter:' with https://front-end-tools.com/en/generateFilter/ just adjust the sample to the color you want and copy it in(may took u a while, it complicate)
3) Change Blurbs header box color
.profile .blurbs .heading {
background: pink;
color: white; /*text color*/
}
/*If you want blurbs, friends, comment header look the same add , .profile .friends .heading */
EX: .profile .blurbs .heading, .profile .friends .heading {
background: pink;
color: white;
padding: 2px 7px;
box-shadow: 0px 0px 6px #e388bd; /*if you want*/
border: inset #ff8ad5;
}
/*About Me / Who I'd Like to Meet*/
The red title text can be recolored with:
.blurbs h4 {
color: #ff9fc9 !important; /* pastel pink */
font-family: serif;
letter-spacing: 1px;
}
And the normal text inside stays different:
.blurbs p {
color: #5a2a3a !important;
}
/* EDIT YOUR PROFILE BOX*/
.profile-info {
background-image: url(link);
color: black; /*text color*/
}
That all, messages me if it still unclear (´• ω •`)💗
Forum:
Report Topic
Permalink