blue super sonico

Tags: super sonico, blue, teal, black, header, simple

Description:

originally was a layout made by dakota (https://layouts.spacehey.com/layout?id=23621), but it's so heavily edited now its barely recognizable. still, thanks for the idea of using filters! <3 edited for myself but i'm putting it here for posterity. the code is really messy. feel free to use it!

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by candy (https://layouts.spacehey.com/layout?id=26304) -->

<!-- (c) Layout created by dakota (https://layouts.spacehey.com/layout?id=23621) -->

<style>
body{
font-family: MS Gothic;
font-size: 15px}
{background-color: none;}
.profile-pic img {
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
}
.person img:not(.icon) {
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
}
.online img {
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
}
.inner img {
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 2;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
box-shadow: 0px 0px 5px 1px #000;
}

#q, button {
color: black;
background-color: #C4F6FF;
font-family: inherit;
}

p, i, b, .count {
color: #C4F6FF !important;
}
a, .profile .friends .person p, .logout-btn {
color: #4FB5C6;
}
.profile .friends .person{
  width: 100px;
  display: inline-block;
}
a:hover {
    color: black;
background-color: #4EC2CE;
transition: 1s;
text-decoration: underline
}
.contact .icon {
display: none;
}
.details-table .icon{
display: none;
}
.container {
margin: 0 auto 0;

}
nav, nav .links a {
color: #C4F6FF;

}
nav .top {
margin-top: 2px;
background: none;
background-color: black;
border-bottom: none;
box-shadow: 0px 0px 5px 1px #000;
}
nav .links {
background-color: black;
box-shadow: 0px 0px 5px 1px #000;
}
body{
background-image:
url(https://upload.wikimedia.org/wikipedia/commons/thumb/c/cd/Black_from_a_camera.jpg/1200px-Black_from_a_camera.jpg);
background-attachment: fixed;
background-size: 1000px;
box-shadow: 0px 0px 5px 1px #000;

}

main {
background: none;
color: #C4F6FF;

}
.heading {
color: #C4F6FF !important;
background: none;
background-color: black !important;

}

.inner {
color: #C4F6FF !important;
border-top: none;
}
.profile-info .inner {
border: none;
}
.friends .inner {
border-bottom: none;
}
#comments {
}
.profile .contact, .profile .table-section, .home-actions {
border: none !important;
}
.table-section {
    margin: 10px;
    box-shadow: 0px 0px 5px 1px #000;
height:auto;
padding:5px;
background:#000;
background-position:top center;
padding: 10px;

}

.details-table td {
border-collapse: collapse;
background: white;
}
.profile .contact .f-row:first-of-type {
margin-top: 0px;
padding-top: 7px;
}
.profile .blurbs .section h4 {
color: #C4F6FF !important;
font-size: 20px;
}
.table-section .heading {
    display: none !important;
}

.table-section td:nth-child(odd) {
background-color: black !important;
} 
.table-section td:nth-child(odd) p {
    color: black !important;
background-color: #C4F6FF !important;
padding: 2px;
} 
.table-section td:nth-child(odd) a {
    color: black !important;
background-color: #C4F6FF !important;
padding: 2px;
} 
td:nth-child(even){
background-color: black !important;
}
table.details-table {
max-width: 98%;
}
.profile h1 {
font-size: 30px;
text-shadow:  0px 0px 5px #000;
}
footer {
background: black;
box-shadow: 0px 0px 5px 1px #000;
}
footer p {
color: #C4F6FF !important;
}
.comments-table{
    border: 0px;
    border-color: black;
}
.comments-table td:nth-child(odd) {
background-color: black !important;
} 
.comments-table td:nth-child(odd) p {
background-color: black !important;
} 
.comment-replies {
border: 0px;
margin: 2px;
}
nav .info {
background: none;
}
.contact{
background-color: black;
box-shadow: 0px 0px 5px 1px #000;
padding: 10px;
margin-bottom: 10px;

}
.contact .heading{display: none !important;}
.mood {
    background-color: black;
margin-bottom: 10px;
padding:15px;
box-shadow: 0px 0px 5px 1px #000;
}
.general-about {
    box-shadow: 0px 0px 5px 1px #000;
height:180px;
padding:10px;
background:#000;
background-position:top center;
margin-bottom: 10px;

}
.blog-preview{
       background-color: black;
margin: 2px;
padding:8px;
box-shadow: 0px 0px 5px 1px #000;
}
.blog-preview h4{ font-size: 0px}
.blog-preview h4 a{ 
    padding:5px;
    font-size: 20px;
}

.blurbs{
       background-color: black;
box-shadow: 0px 0px 5px 1px #000;
padding: 10px;
margin-bottom: 10px;
}
.blurbs h2 {
    font-size: 25px;
}
.blurbs h3{
    font-size: 15px;
}

.friends{
       background-color: black;
box-shadow: 0px 0px 5px 1px #000;
padding: 10px;
margin-bottom: 10px;
}
.friends-grid{
padding:none;
}
.friends .heading {
    margin-top: 10px;
}

.blurbs .section h4{display: none !important;}

.blurbs .heading{ font-size:0;}
.blurbs .heading:before{ display: none !important;}

.friends .heading{ font-size:0; }
.friends .heading:before{ content: "Friends"; font-size:16px; font-weight:bold;text-shadow: 0px 0px 5px grey;}

.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Comments"; font-size:16px; font-weight:bold;text-shadow: 0px 0px 5px grey;}

.url-info{display: none !important;}

.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 Profile */
  content: "★"
}

#ruili {
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
transition: filter 0.5s ease-in-out;
}
#ruili:hover {
filter: none
}
#sonico {
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
transition: filter 0.5s ease-in-out;
}
#sonico:hover {
filter: none
}

.online{
content: url("https://ruili.neocities.org/ONLINE_LOSER.gif") !important;
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
transition: filter 0.5s ease-in-out;
}
table.comments-table{

display: block;
height: 250px!important;
overflow-y: scroll;
}

    ::-webkit-scrollbar {
    width: 3px;
    height: 10px;
    }

    ::-webkit-scrollbar-thumb {
    background: rgba(80, 80, 80);
    }

    ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    }
body{
    background-color: #000 !important;
    background-image: url('https://64.media.tumblr.com/c801507c26dd034be4d65d3da148e25c/032bd21e9b1ed068-76/s2048x3072/be7ac575e7eb336fb0cdcff988c65bfa9718b7ba.jpg') !important;
    background-attachment: fixed !important;
    background-position: left top  !important;
background-size: cover;
}

li.active .icon { 
    content:url('https://64.media.tumblr.com/40786d3985453eb5412348aad980ac51/cd30ff3c9008ddf5-a4/s75x75_c1/ba53073a0f7c46af709eaa710a27b529d0b65d8d.gifv'); 
    height: 20px;
    }

main:before {
width: 100%;
height: 300px;
display: block;
content: "";
background-image: url('https://cdn.donmai.us/original/76/14/__super_sonico_nitroplus_drawn_by_tsuji_santa__76142615482e436e4f996026609d6d8e.jpg');
background-position: center bottom;
background-size: cover;
filter: sepia(100%) saturate(296%) hue-rotate(150deg) brightness(93%) contrast(95%);
}
@media only screen and (max-width: 600px) {
main:before{
height: 200px;
}

</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

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

♡Kyra♡	1701562978 So cute! Will be using, ty! :3 Report Comment
soggy cat	1699158079 i love the bg usinggg Report Comment
helena★彡	1694697646 USINGG! Report Comment
marshmellow police	1693871813 using! ty Report Comment
dizzy	1680349663 super cute! Report Comment ty!! <33 by candy; 1680386147; Report
radio galaxy 2.0	1677707904 using the code as a base <3 Report Comment
PPEACHES ★	1677611371 this is soso cute!! def using <3 Report Comment
maddi.balls	1676873541 using this !! ty !! Report Comment ty!! <3 by candy; 1676901859; Report
ANGELS CURSE*	1676149255 cute!!!! def will be using Report Comment ty <3 by candy; 1676150261; Report