RPG Undertale-like layout

Tags: rpg, undertale, deltarune

Description:

I made it inspired by the Undertale / Deltarune UI but really it is just a generic RPG-like thing Also I'm not very great with CSS at all so the code may be a bit iffy

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by ☆ ♥【Ｎｏｅｌｌｅ】♥ ☆ (https://layouts.spacehey.com/layout?id=82298) -->

<style>
/* Cursor /**/
* {cursor: url(http://www.rw-designer.com/cursor-extern.php?id=102024), auto !important;}*/

/* Top Banner */

nav {
  margin-top: 10px;
}

nav .links a:hover {
  text-decoration: underline;
  color: #FFFFAE;
}
nav .links a {
  text-decoration: none;
  color: yellow;
  text-shadow: none;
  font-size: 0.98em;
  font-size: max(0.98em, 12px);
}

nav .top {
  background: black;
}

nav .links {
  background-color: black;
}


/* Logo (DOESNT WORK BTW LOL) */
logo logo-fallback {
  src=url(xxxxx);
}

/* Background and font */

body {
  background: url(https://www.spriters-resource.com/resources/sheet_icons/172/175637.gif);
  font-family: "MS Sans Serif";
}

/* Profile headers */
.profile .blurbs .heading, .profile .friends .heading {
  font-weight: bold;
  font-size: 150%;
  background-color: black;
  color: white;
  border-top: 5px solid white;
  border-left: 5px solid white;
  border-right: 5px solid white;
}

.section h4 {
  color: #FFFF00;
  text-align: center;
}

.profile .blurbs .section p, .blog-entry .comments p, .bulletin .comments p {
  margin-left: 15px;
  margin-right: 21px;
}

.profile .blurbs .inner, .profile .friends .inner, .blog-entry .comments .inner, .bulletin .comments .inner, .setting-section .inner {
  padding: 7px;
  border-left: 5px solid white;
  border-right: 5px solid white;
  border-bottom: 5px solid white;
}
.friends {
  margin-bottom: 10px;
}

/* Link colors */
a {
  color: #FFFF00;
  text-decoration: none;
}

a:hover, a:active, .blog-entry .kudos-btn:hover, .blog-entry .kudos-btn:active {
  color: #FFFFAE;
  text-decoration: underline;
}

/* Main profile area */
.profile {
  font-weight: bold;
  background-color: black;
  color: white;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
  border-left: 10px solid white;
  border-right: 10px solid white;
}

/* Profile info */
.profile  .contact, .profile .url-info, .profile  .table-section, .setting-section, .home-actions {
  width: 100%;
  border: 5px solid white;
}

.online {
  color: #00FF00;
}

.profile .contact .heading, .profile .table-section .heading, .setting-section .heading, .home-actions .heading {
  background: black;
  border-bottom: 0px solid white;
  color: white;
  padding: 2px 7px;
}

.details-table td:first-child {
  background: black;
  color: yellow;
  font-weight: bold;
  width: 33%;
}

.details-table td {
  background: black;
  vertical-align: top;
}


/* Friends */
.profile .friends .person p {
  color: yellow;
  font-weight: bold;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 100%;
  text-align: left;
}

friends-grid {
  font-size: 80%;
}

nav, footer {
  font-weight: bold;
  background-color: black;
  color: white;
  border: 10px solid white;
  margin-bottom: 10px;
}

iframe { 
  width: 100%;
  aspect-ratio: 16 / 9;
}

.comments-table td:first-child, .music-table td:first-child {
  background: black;
  text-align: left;
  font-weight: bold;
  border: 5px solid white;
  width: 30%;
}

.comments-table td, .music-table td {
  background: black;
  border-top: 5px solid white;
  border-bottom: 5px solid white;
  border-right: 5px solid white;
}
</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 13 of 13 comments ( View all | Add Comment )

GoldenBot	1712007272 This is so awesome!! I'm totally using it! Report Comment
ersatz	1708325573 using this, SO AWESOME!!! Report Comment
･ﾟ✧DarkPrince･ﾟ✧	1708035400 Using :3 Report Comment
Nate	1706571438 using <3 Report Comment YOU GOT THE LOGO WORKING OMG I TRIED DOING THAT AND COULDNT DO IT by ☆ ♥【Ｎｏｅｌｌｅ】♥ ☆; 1706750876; Report i can give you the code if you want ! by Nate; 1707266526; Report i can give you the code if you want ! by Nate; 1707266527; Report Please do! ^^ by ☆ ♥【Ｎｏｅｌｌｅ】♥ ☆; 1707268823; Report
Sam	1706032453 Using :D Report Comment
Kris ⸜(｡˃ ᵕ ˂ )⸝♡	1705782828 USING! :3 Report Comment
M1KK0!!	1705423136 MIGHT USE1!!"!1!! Report Comment
> Cross	1705358184 Using! ^^ Report Comment
Kyo	1705122042 using :)) Report Comment
meowster	1703806852 USING :DD Report Comment
chich!1!	1701548449 oops accidentally deleted my comment :( THIS IS SO CUTE!!!! using :3 Report Comment
amanda	1701335052 gonna use teehee Report Comment
blue pikmin	1699878237 will use!! Report Comment IDK HOW.. by blue pikmin; 1699878404; Report You have to copy and paste the code in your About me blurb also I forgot to mention that the code doens't have the background or the custom cursor so u have to set up those manually sdgklsdjg by ☆ ♥【Ｎｏｅｌｌｅ】♥ ☆; 1699897284; Report YWAA IK..but idk how to set the others, it just won't work! by blue pikmin; 1699899539; Report thas weird... ill check it when i get home by ☆ ♥【Ｎｏｅｌｌｅ】♥ ☆; 1699900490; Report

Layout published by ☆ ♥【﻿Ｎｏｅｌｌｅ】♥ ☆

RPG Undertale-like layout

Description:

Preview:

Code:

Comments

Layout published by ☆ ♥【Ｎｏｅｌｌｅ】♥ ☆