Froggy layout

Tags: green, frogs, nature, gif

Description:

okay, so im not sure if i can call this a froggy layout, but it has a frog cursor and a froggy gif on the search bar

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 64 comments ( View all | Add 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
✰ scy/sybil ✰	1693857827 using! :D Report Comment
Infinix	1691101033 Using! Report Comment
☆: .｡. jane .｡.:☆	1690563440 using!! :D Report Comment
Ashton	1690421789 i'm gonna use this :] Report Comment
v0id3d._sag3	1689251299 using so fast!! Report Comment
comet💫	1688427250 using this !!! Report Comment
aster ✮⋆˙	1688063394 using! its so cool :D Report Comment
crowycawcaw	1686929270 thank you!! this is very pretty Report Comment
Oxytail	1682389443 I'm using this with a different cursor, thank you so much for making it! Report Comment
Tea frog ♡Hayle Van Kuren♡	1682051694 thank you ^.^ Report Comment