Forum:
<!-- (c) Layout created by Bela (https://layouts.spacehey.com/layout?id=3302) -->
<style>
/*==========⚠️==========
* for colors go to https://htmlcolorcodes.com/color-names
* for fonts go to https://fonts.google.com
* for cursors go to https://icons8.com or https://www.cursors-4u.com
============⚠️==========*/
/* this is the cursor that appears when you hover over links */
a:hover{
cursor: url('https://cdn.custom-cursor.com/db/7327/32/starter-red-penrose-trianglel-pointer.png'), auto;
}
/* this is the main cursor */
* {
cursor: url('https://cdn.custom-cursor.com/db/7328/32/starter-red-penrose-trianglel-cursor.png'), auto;
}
</style>
<style>
/* font-family */
@font-face { font-family: "PenetrationOutGrunge-JvyM"; src: url('//dl.dropbox.com/s/3wt5r6e8l5xrc66/PenetrationOutGrunge-JvyM.ttf'); }
@font-face { font-family: "RavenouslyDemoGrunge-Ea9OW"; src: url('//dl.dropbox.com/s/ydwh9wmm0k5a2bo/RavenouslyDemoGrunge-Ea9OW.ttf'); }
</style>
<style>
/* this is where the colors are rooted */
:root{
--headers: #C60404;
--text: #6E6E6E;
--names: #C02739;
--links: #810000;
--hover: #DA0037;
--borders: 4px double #630000;
--background_image: url('https://cdn.wallpapersafari.com/23/23/TwIzHS.jpg');
--font-family: "RavenouslyDemoGrunge-Ea9OW";
--curve: 0px; /* the higher the number, the rounder the border. (try putting 50 as an example) */
}
/* this is where the colors for specific things are located */
h3, h4, h5{color: var(--headers) !important;} /* headings*/
a{color: var(--links) !important;} /* color of links */
a:hover{color: var(--hover) !important;} /* color of links on hover */
p, b, h2, .count {color: var(--text) !important;} /* color of text */
.friends a p{color: var(--names) !important;} /* color of names, and friends counter */
.friends a:hover p{color: var(--hover) !important;} /* color of names on hover */
nav label{color: var(--links) !important;} /* color of search */
.section h4 {display:none;} /* aboutme & want2meet headings */
.blurbs .heading {display:none;} /* hides the blurbs title. if you want it to show, replace with the code: color: var(--headers) !important; */
/* .details-table td:first-child{display:none;} this code hides the general-heroes titles */
/* this is where your background image ends up being styled */
body{
background-image: var(--background_image)!important;
background-color: #000;
background-size: contain;
background-attachment: fixed;
color: var(--text)!important;
}
/* this is where your name appears */
h1{
color: #C60404;
font-family: "PenetrationOutGrunge-JvyM";
font-size:30px !important;
font-weight: bold;
text-align: center;
background-color: rgba(0,0,0,0.5);
border: var(--borders);
}
/* the navigation is adjusted here */
nav{
background-color: rgba(0,0,0,0.5);
border: var(--borders);
border-radius: var(--curve);
}
nav .top{
background: transparent;
color:var(--links);
}
nav .top a, nav .links a{
color: var(--text);
text-shadow:none;
}
nav .links{
color: var(--text);
background-color: transparent;
border-radius: var(--curve);
text-align: center;
}
/* this is the line that appears between links in the header and footer.
you can add an emoji or symbol instead of the default line it has */
nav .links li:not(:last-child)::after,
footer .links li:not(:last-child)::after{
content: " ✦";
color: var(--links);
}
/* this is the spacehey logo color.
you can change it at https://codepen.io/sosuke/pen/Pjoqqp */
nav img.logo{
filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%)!important;
}
/* the search wrapper and button */
.search-wrapper input[type=text] {
background-color: transparent !important;
border: 1px solid var(--links) !important;
color:var(--links) !important;
border-radius: var(--curve) !important;
}
button{
border-radius: var(--curve) !important;
border: 0px solid var(--links) !important;
font-family: var(--font-family) !important;
background-color: transparent !important;
color:var(--links) !important;
}
/* the online symbol and text */
.online{
color: var(--links) !important;
text-transform: lowercase;
margin:auto;
}
.online img{
filter: brightness(0) saturate(100%) invert(8%) sepia(84%) saturate(3937%) hue-rotate(358deg) brightness(108%) contrast(117%) !important;
}
/* font family for the headers, navigtion links, links, body text */
h2, h3, h4, h5{
font-family: "PenetrationOutGrunge-JvyM";
font-size: 20px;
font-weight: normal;
}
a, p, b, nav label, .section{
font-family: var(--font-family) !important;
font-size: 14px;
font-weight: bold;
}
/* the hr code.
the hr is the horizontal line when you want to
separate important info or add a break in your paragraphs*/
hr{
height:1px;
background: var(--links);
border: none;
}
/* this is where you adjust the borders and background */
.blurbs, .friends, .profile .table, .blog-preview, .contact{
border-radius: var(--curve) !important;
border: var(--borders) !important;
background-color: rgba(0,0,0,0.5)!important;
}
.general-about .details{
border-radius: var(--curve) !important;
border: var(--borders) !important;
background-color: rgba(0,0,0,0.5)!important;
padding:20px;
text-align: right;
}
.mood{
border-radius: var(--curve) !important;
border: var(--borders) !important;
background-color: rgba(0,0,0,0.5)!important;
text-align: center;
padding:5px;
}
.icon{border:none !important;}
.comment-replies{border:2px dotted #630000;} /* this is the border around the replies */
.comment-reply:not(:first-child){border-top: 2px dotted var(--links);} /* line in between comment replies*/
/* your interest and comments table row background color */
td{
background-color: transparent!important;
}
/* the middle section of your profile background color*/
main{
background: transparent;
border-radius: var(--curve) !important;
border: transparent !important;
outline: none !important;
}
/* the interest table */
.table-section{
background-color:transparent!important;
border:var(--borders)!important;
background-color: rgba(0,0,0,0.5)!important;
}
.details-table{
border-spacing:0px 10px;
}
.details-table td{
border-top:1px solid darkred;
padding:5px;
}
/* the header section of the boxes */
.heading, .blog-preview h4, .section h4{
background: none !important;
text-align: center;
}
/* this is the box that says "Edit Info" when you're logged in,
and to your friends it says "Profile Name is your friend". */
.profile-info {
background-color: rgba(0,0,0,0.5);
border: var(--borders) !important;
border-radius: var(--curve) !important;
}
/* adjusting images borders and adding styling if you want to */
.profile-pic img{
outline:none !important;
border-radius: var(--curve) !important;
padding:6px;
border: none;
}
/* you can remove text-align:center; if you don't want your friends to be centered */
.friends-grid{
text-align: center;
}
.friends-grid img{
border-radius: var(--curve) !important;
filter: brightness(70%);
}
/* margin and padding */
h2, h3, h4, h5, p{padding-left:5px !important;} /* this is important when you have rounded corners */
.profile .table-section .heading, .blog-preview .heading, .profile .friends .heading{padding: 5px!important;} /* add space to the titles */
.friends, .mood, .general-about .details{margin-bottom: 20px;} /* this adds space between sections */
/* custom contact
you can change the content: "✦" to content: url('image-url-here');
*/
.contact .inner a img {
font-size: 0;
}
.contact .inner a img:before {
font-size: 1em;
display: block;
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "▸"
}
.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorites */
content: "▸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* Send Message */
content: "▸"
}
.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* forward to friend */
content: "▸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "▸"
}
.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "▸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group */
content: "▸"
}
.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report user */
content: "▸"
}
/* where your spacehey url goes. you can add a picture here instead.
if you don't want a picture or the url just remove this code
and add this:
.url-info{display:none;}
*/
.url-info{
background-image: url('https://i.pinimg.com/originals/5a/b0/8c/5ab08c03e71258df76897b24161f05e1.gif');
background-size: 100%;
background-repeat: no-repeat;
height: 193px;
border: var(--borders)!important;
border-radius: var(--curve);
}
.url-info p{
opacity: 0.0;
}
/* this is the comments table scroll code.
you can delete this if you don't want a scroll box */
.comments-table {
display: block;
height: 500px!important;
overflow-y: scroll;
border: 0px dotted #630000 !important;
outline: none !important;
border-radius: 8px;
padding:5px;
border-spacing: 4px; /* this changes the distance between boxes */
}
/* this styles the first column */
.comments-table td:first-child{
background-image: url('');
background-size: cover;
background-position: center;
}
.comments-table td{
background-image: url('');
background-size: cover;
background-position: center;
border: 2px solid #630000;
padding:10px;
border-radius: 0px;
}
footer{
background-color: rgba(0,0,0,0.5);
border: var(--borders);
border-radius: var(--curve);
padding:5px;
}
</style>
<style>
/* Scrollbar styles */
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
::-webkit-scrollbar-track {
border-radius: var(--curve);
border: 1px solid #630000;
}
::-webkit-scrollbar-thumb {
background: #630000;
border-radius: var(--curve);
}
</style>
Report Topic
