Report Blog Entry
this is my current profile! I plan to completely change it!
《♡ISFJ-T♡》¤¤《♡Sims 4 Player♡》¤¤《♡Technology Illiterate♡》
<!-- (c) Layout created by RiviR (https://layouts.spacehey.com/layout?id=2989) -->
<style>
/*this gets the font for mobile users*/
@import url('https://fonts.googleapis.com/css2?family=Halant:wght@300;400;500;600;700&family=Nunito+Sans:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap');
/*change things around in this section to modify backgrounds, colors, fonts, and the curve*/
:root{
--background:url("https://data.whicdn.com/images/327824179/original.gif");
--bottom-background:url("https://i.imgur.com/sagKnpe.png");
--blast-off-bronze: #bd7869ff;
--army-green: #565e35ff;
--dark-sky-blue: #92b5c9ff;
--bone: #dcd8cdff;
--grullo: #a3916bff;
/*this next one is for the profile background. change the .8 to a anything from 0-1 to change the transparency*/
--profile-color: rgba(86, 94, 53, .8);
/*this next one is for the header background. same deal as the profile color for transparency*/
--header-color: rgba(56, 64, 43, .6);
/*this is for the navigation bar background color.*/
--nav-color: rgba(46, 54, 13, .9);
/*this is for the footer background color*/
--footer-color:rgba(86, 94, 53, .3);
/*this changes the background of your table of intersts and comments*/
--table-background: rgba(200, 196, 205, .16);
--border-color: rgba(116, 154, 103, .8);
--border-color2: rgba(116, 154, 103, .2);
--header-color2: rgba(56, 64, 43, .4);
--curve:3px;
/*here are the customizable topics for the interests section*/
--topic-1:"School";
--topic-2:"Songs";
--topic-3:"Fav Movies";
--topic-4:"Television";
--topic-5:"Books";
--topic-6:"Aesthetic";
/*this is where you can edit the online icon*/
--online-icon: url("https://i.imgur.com/eAIS8L5.gif");
/*this is where you can edit the supporter tag*/
--supporter: url("https://i.imgur.com/RfapVgR.png");
/*this is the where you can edit the fonts*/
--headers:'Halant', serif;
--body:'Nunito Sans', sans-serif;
}
/*this is for the intro animation. Cory is the one who came up with this fantastic css code so go give them a follow if you like this! He has a ton of other super helpful codes and their profile is overall one of the best on spacehey imo https://spacehey.com/cory*/
body:before {
content: " ";
height: 100vh;
width: 100vw;
display: block;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-image: url('https://data.whicdn.com/images/338827628/original.gif');
background-size: cover;
background-repeat: no-repeat;
background-position:center;
animation: yourAnimation 3s ease 0s 1 normal forwards;
pointer-events: none;
}
@keyframes yourAnimation { 0.0%{ opacity: 1;} 75%{ opacity: 1; } 100%{ opacity: 0;} }
/*this next bit is the background behind the main profile.*/
body, .bodycontent{
background:var(--background);
background-attachment: fixed!important;/*this is what allows the background to scroll with you. change "fixed" to "scroll" if you want this feature turned off*/
background-size: 100%; /*fits the background to the device being used. Mobile phones will just have a repeating background. if you don't mind it looking stretched out when using phones, add a 100% right before the semicolon.*/
border-color:#00000000;
border-width:55px;
border-style:dotted
}
/*now for the rest of the profile.*/
main{
background:none;
padding-top:0px!important;
}
.profile{
background-color:var(--profile-color)!important;
/*delete the astriskes and slashes in the next line of code if you want a cute custom flower patch at the bottom of your profile. I dont like it but I'm leaving it in here in case anyone wants to use it*/
/*
background:var(--bottom-background) bottom no-repeat;
background-size: 100px;
background-repeat: repeat-x;
*/
padding-top:none!important;
border: groove 10px;
border-color:var(--bone);
border-top:none;
}
nav ul{
background-color: var(--nav-color)!important;
border: groove 10px;
padding-top:none!important;
border: groove 10px;
border-color:var(--bone);
border-top:none;
border-bottom:none;
}
.top{
background-color: var(--profile-color)!important;
padding-top:none!important;
border: groove 10px;
border-color:var(--bone);
border-bottom:none;
}
footer{
background:var(--footer-color)!important;
}
p, .count{
color:var(--bone);
font-family: var(--body);
}
a{
color:var(--dark-sky-blue);
font-family: var(--body);
}
.friends-grid p{
color:var(--grullo)!important;
text-align:center!important;
}
.friends-grid img{
border-radius:500px;
box-shadow: 3px 3px var(--army-green);
object-fit: contain;
height:100px;
width:100px;
}
h1, h2, h3, h4, h5{
font-family: var(--headers);
color: var(--blast-off-bronze);
text-align: center!important;
}
td{
background: var(--table-background)!important;
}
.section h4{
color:var(--bone)!important;
}
.blurbs .inner .section:nth-child(1) h4{
font-size:0;
}
.blurbs .inner .section:nth-child(1) h4:before{
content: "Introductions"; /* put your own "about me" header here*/
font-size: 18px;
}
.blurbs .inner .section:nth-child(2) h4{
font-size:0;
}
.blurbs .inner .section:nth-child(2) h4:before{
content: "Foraging for Friendships"; /*put your own "who id like to meet" header here*/
font-size: 18px;
}
.blurbs .heading{
display:none;
}
.contact a{
font-size: 12px;
}
/* this next bit hides the URL info*/
.profile .url-info{
display:none;
}
/*this gives everything the border and background*/
.contact, .mood, .table-section, .blog-preview, .friends, .profile .blurbs .inner, .profile h1{
background:var(--header-color)!important;
border:solid var(--border-color) 2px!important;
border-radius: var(--curve)!important;
}
/*this is just some fixing things*/
.contact .heading, .friends .heading, .profile .table-section .heading, .profile .friends p{
background: none!important;
text-align: center!important;
}
.blog-preview h4{
background-color:var(--header-color2);
}
.blog-preview, .mood{
text-align: center;
}
/*this next bit fixes the friends and comments sextions from being off center*/
DIV.friends:nth-child(3){
text-align:center;
}
.profile .friends .heading{
padding-left:50px;
}
#comments .heading{
padding-left:0px!important;
}
table.comments-table p{
text-align:left!important;
}
#comments, .contact{
border-top:none!important;
border-bottom:solid 2px var(--slate-gray)!important;
border-radius: var(--curve);
border-top-right-radius: 0px!important;
border-top-left-radius: 0px!important;
}
.mood, .friends{
border-bottom:0px!important;
border-bottom-left-radius: 0px!important;
border-bottom-right-radius: 0px!important;
}
.contact .heading, .profile .friends .heading h4{
background-color:var(--header-color2)!important;
}
.profile .friends .heading h4{
border-radius:3px!important;
}
.profile .friends .heading{
padding-top:5px;
}
#comments{
Height:300px;
Overflow:scroll;
}
.comments-table .report{
font-size:11px!important;
}
.comments-table .report .icon{
content: url(https://i.imgur.com/0BTdk8p.png);
height:18px;
width:10px;
}
.comments-table td:last-child img{
height:12px;
width:12px;
Border:0px solid!important;
Border-radius:0px!important;
}
.comments-table td{
background-color:var(--header-color2)!important;
}
.comments-table td:first-child img{
height:90px;
width:90px!important;
border-radius: 500px!important;
Object-fit:contain;
}
.comments-table{
border-radius:var(--curve)!important;
border:none;
}
.comments-table td{
border-color:white;
}
.comments-table p{
Font-size:15px!important;
}
.comments-table td:first-child p{
Font-size:15px!important;
text-align: center!important;
}
.comments-table tr:first-child td:first-child{
border-top-left-radius: var(--curve);
}
.comments-table td:first-child{
font-size:15px;
text-align:center;
Padding:15px;
}
.comment-table tr:last-child img{
Border-radius:0px!important;
Border:none!important;
}
.comments-table tr:first-child td:last-child{
border-top-right-radius:var(--curve)!important;
}
.comments-table tr:last-child td:first-child{
border-bottom-left-radius: var(--curve);
}
.comments-table tr:last-child td:last-child{
border-bottom-right-radius: var(--curve);
}
/*this next string makes the profile photo into a circle and fits photos into it*/
.profile-pic img{
height:160px!important;
width:160px!important;
border-radius:500px;
border:var(--border-color) 2px solid;
object-fit:contain;
overflow:hidden;
}
.details{
background-color:var(--header-color);
border:solid var(--border-color) 2px;
height:160px;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
}
/*this next bit is hides the origional interest labels*/
.table-section:not(:last-child) .details-table tr td:first-child p{
color:transparent !important;
text-shadow: none !important;
letter-spacing: -100px;
}
.details-table tr td:first-child p:after{
letter-spacing:normal !important;
Text-shadow: 2px 2px var(--bone);
}
/*and this is what customizes them. it can easily be done in the root*/
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
content:var(--topic-1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
content:var(--topic-2)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
content:var(--topic-3)!important;
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
content:var(--topic-4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
content:var(--topic-5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
content:var(--topic-6);
}
/*this is where the online image is changed. it looks funky from your perspective with the edit profile link, but it looks fine from other people's point of view*/
.online{
content:var(--online-icon);
height:20px;
width:20px;
}
/*this is where the supporter image is changed*/
.supporter img{
font-size:0;
}
.supporter:before{
display:inline-block;
width:15px;
height:15px;
margin-right:5px;
content:"";
background:var(--supporter); no-repeat 0 0;
background-size:100%;
}
}
.supporter a{
Color:var(--blast-off-bronze);
}
.mood{
text-align:center;
padding-left:3px;
}
</style>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
Eremzza
I love how I went on a hiatus instead
Im still on that hiatus LMAO
by Eremzza; ; Report
noooooo my background and intro gifs are gone!
by Eremzza; ; Report