Froggy layout

Tags: green, frogs, nature, gif

Description:

You can customize this theme however you want, i added some comments in the code so it's easy to tell apart all the elements. If something appears weird to you or you don't know how to change some elements of the layout just ask me in the comments, I'm willing to help ;)

I'd appreciate if you credit me on your profile.

Leave a comment if you're gonna use this theme :)

Preview:

click on the image for a larger preview

Code:

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

<style>
/* General font size for the whole page. Every other font size (eg. username) is relative to this value. */
* {
	font-size: 14px !important;}

html {
	filter: blur(0.3px) sepia(0.3);}

/* Paste your own url to the brackets for a different background. Change "font-family" value for a different font. */
body {
	background-image: url(https://external-media.spacehey.net/media/so4LOHhZvKaPtB7DMjaKO5s2Foj_WS5ASbLf2huLadrc=/https://i.pinimg.com/originals/88/61/50/88615031268eedb69a9371a580057fbe.gif);
	background-position:center;
	background-attachment: fixed;
	background-size:cover;
	font-family: "Century Gothic";
	filter: opacity(0.9);}

main {
	background:transparent;}

/* normal text */
p, h6 {
	color: #d7d7d7eb;}

/* headers */
h4, h1{
	color: #f5d9ce!important;
	font-size: 1.2em!important;}

/* Font color of all the links. */
a, .count, .profile .friends .person p {
	color: #66b75f;}

/* Font color and text decoration of the links when you hover over them. */
nav .links a:hover, a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
	text-decoration: underline wavy 1.2px;
	color: #82ff2d;}

/* This makes your username BIG */
.profile h1 {
	text-align: center;
	font-size: 2.5em!important;}

/* FROGGY CURSOR */
/* Start https://www.cursors-4u.com */ * {
cursor: url(https://external-media.spacehey.net/media/sxDXhvdwmCXCcTTQnuVt1hjp9gA_fuJGwJo5t444DNm8=/https://cur.cursors-4u.net/nature/nat-1/nat42.ani), url(https://external-media.spacehey.net/media/svxPoUtlLWeGlyN-7okxqd4_RhsGpUF48fkrktrJh2Nc=/https://cur.cursors-4u.net/nature/nat-1/nat42.png), auto !important;}
/* End https://www.cursors-4u.com */

img {
	filter: opacity(0.8)}

/* All the buttons on the page. Change "background", "opacity" and "box-shadow" for of your liking. */
button {
	border:none;
	box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff;
	border-radius: 9px;
	padding: 3px;
	margin: 2px;
	background: #bae190;
	filter: opacity(0.7);}
	.logout-btn {box-shadow: none;}

/* Paste your own url to the brackets for a different search bar background.*/
input#q {
	background-image: url(https://external-media.spacehey.net/media/s3PwY9KTOo9um8ZYS49nWkn0vCKDcae3eA2oiO7SvdF4=/https://64.media.tumblr.com/fc45dbb8662583cea4b4e407428bcfc0/c7db3402092a1fd7-12/s1280x1920/55744c176d34657a53e75053bf0973ace086a7fc.gifv);
	background-size: cover;
	border-radius: 10px;
	border:none;
	box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff; 
	margin-top:2px;}

/* Navigation bar on top of the page. Change the background value for of your liking. */
ul.links {
	background: #2a6b38bd;
	font-variant: all-petite-caps;
	text-align: center;}

/* This bit of code makes the "|" between links wihite. You can change it to any other hex value. */
nav .links li:not(:last-child)::after, footer .links li:not(:last-child)::after {
	color: white;}

/* The "boxes" on the profile. You can change the background hex and box-shadow hex if you don't like the black shadow. */
.blurbs, .friends, .comments, .profile .contact, .profile .table-section, .home-actions,
.profile .mood, .general-about .details {
	border-radius: 20px;
	padding: 9px;
	box-shadow: 0 0 1em #00000096;
	background: #4e892159;}

.profile .contact, .profile .url-info, .profile .table-section, .home-actions, .profile .profile-info{
	border: 0px solid transparent!important;}

/* Change the align to "left" or "right" if you like. */
.blurbs{
	text-align: center;}

/* Your profile picture. Delete "border-radius" if you don't want it round. */
.general-about .profile-pic img {
	border-radius: 50%;
	height: 200px;
	object-fit: cover;
	margin-left: auto;
	margin-right: auto;
}

.general-about .profile-pic {
	display: flex;
	float: unset;
	height: 160px;
	margin-right: unset;
}

/* Don't delete this one unless you don't want a custom online icon. */
.online{
	visibility: hidden; }

/* Paste your own url to the brackets for a different online icon. */
.online img {
	content: url(https://i2.glitter-graphics.org/pub/576/576022fvpsommjp7.gif);
	animation-name: none;
	visibility: visible;
	height: 35px;}

/* This bit hides your url. */
.profile .url-info{
	display:none;}

.profile-info {
	display: none;}

/* Don't change this one or mood will overlap with the interest table. */
.mood {
	margin: 10px 0;}

/* this bit deletes the blue backgrounds. */
td, footer, div.top, div.heading {
	background:transparent!important;}


/* Friends' profile pictures. */
.profile .friends .person img, .comments-table td:first-child img:not(.icon){
	border: #a2df74 3px dashed;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	object-fit: cover;}

/* comment section. If you don't want it to be in a scroll box, delete "overflow-y" and "height". Change border radius to 0px for sharp corners. */
#comments.friends {
	margin-top: 10px;
	overflow-y: scroll;
	height: 220px;
	border: #a2df74 7px double;
	border-radius: 9px!important;}

/* Border around comments. Don't change the display property. */
.comments-table > tbody:nth-child(1) > tr > td:nth-child(2) {
	border: #a2df74 2px dashed;
	margin-top: 15px;
	display: block;
	border-radius: 5px;}

/* Border around comment replies. */
.comment-reply {
	padding-bottom: 10px;
	border: 2px solid #a2df74;
	border-radius: 10px;}

/* This bit deletes the weird table look in the comment section. */
.comment-replies{
	border: none;
	margin-top:none !important;}
.comments-table td, table.comments-table {
	border:none}


/* scrollbar for firefox */
* {scrollbar-width: thin; scrollbar-color: #c8fbbf7a #3c6b4d;}

/* scrollbar for Chrome, Edge and Safari */
::-webkit-scrollbar {width: 13px;}
::-webkit-scrollbar-thumb {background: #c8fbbf7a;}
::-webkit-scrollbar-track {background: #3c6b4d;}

</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 20 of 72 comments ( View all | Add Comment )

starling	1766251341 usin Report Comment usin by starling; 1766251350; Report
arie	1759195745 using!! its so cute thank you! Report Comment
row /⁠ᐠ⁠｡⁠ꞈ⁠｡⁠ᐟ⁠\ $row /⁠ᐠ⁠｡⁠ꞈ⁠｡⁠ᐟ⁠\'s profile picture$	1758645848 using! this is so cute thank u for sharing!~ :3 Report Comment
𝕾ᥱᑲᥲs𝗍іᥲᥒ 𝕯ᥱ 𝕿᥆mᥲ𝗍᥆ 𝕾mі𝗍һ 𝕮һіᥴkᥱᥒ 𝕷ᥱgs	1756748958 using Report Comment
Octi	1753372549 using! Report Comment
Froggy	1750368107 Using! Report Comment
Froggy	1750368105 Using! Report Comment
C0MET . C0M	1750048738 using! Report Comment
Hip🌠	1740179381 usiing Report Comment
Hip🌠	1740179370 usiing Report Comment
Raven	1729476415 Using!! Report Comment
Tyler1	1719915712 Omg this is so good!! Using! Report Comment
Churumiii	1719037782 I’ll use this! Report Comment
xarii	1716302381 using :D Report Comment
phlox	1706840022 this is so cute, using! Report Comment
chervinya	1706615921 using!!!! Report Comment
corpse of gremlin	1706473876 using!! I love this Report Comment
cherish	1704004978 using! Report Comment
✰ Sybil ✰	1693857827 using! :D Report Comment
Infinix	1691101033 Using! Report Comment