Layout Preview

My default blog theme!

Author: ★ 𝐫𝐱𝐦𝐞𝐨 ★
Category: Aesthetic
Created: July 15, 2026
Downloads: 49
A pretty simple black layout. Has a few issues I'll fix later
Log in to Apply

Live Preview

Comments (0)

No comments yet. Be the first!

Log in to leave a comment.

Layout CSS

<style>

body, html {
    font-family: 'Courier New', Courier, monospace, Georgia, serif;
    color: #cccccc !important; 
    
    background-image: url("https://i.pinimg.com/736x/76/cf/2e/76cf2e968eeb68dd310b320fe8a9b685.jpg") !important;
    background-position: center center !important;
    background-size: 1000px !important;
    background-attachment: fixed !important;
    background-repeat: no-repeat !important;
    background-color: #0d0d0d !important; 
}


main {
    background-color: rgba(16, 16, 16, 0.90) !important; 
    padding: 20px !important;
    border-radius: 12px !important; 
   
    border: 2px solid #444444 !important; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8) !important;
}


.blog-entry,
.blog-entry .title,
.blog-entry .content,
.comments-table td,
.details-table td,
.edit-info,
nav .links {
    border-radius: 8px !important; 
}

/* Clean up table cell edge overlaps */
table {
    border-collapse: separate !important;
    border-spacing: 5px !important;
}

.myspace-header,
.myspace-header .top-nav,
.myspace-header .main-nav-wrapper {
    background: #111111 url("https://64.media.tumblr.com/91b43bd631d3ba146a82ef37ba24a232/e27b7563545755f4-26/s640x960/12a4425bb1e0a3ed35565ebaf804008d80703b0b.gifv") repeat center !important;
    border-radius: 8px !important;
    box-shadow: none !important; /* Erases any native layout glow highlights */
    
 
    border: 2px solid #444444 !important; 
}


nav, nav .top, nav .links {
    box-shadow: none !important;
    outline: none !important;
    border: 1px solid #333333 !important;
}


footer {
    background: #0a0a0a url("https://i.pinimg.com/736x/53/10/27/5310271b658c12162009c6ae58c126c6.jpg") repeat center !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin-top: 40px !important;
    
    
    border: 2px solid #444444 !important;
}

main p, main span, main div, main td, main li {
    color: #aaaaaa !important;
}

nav .top { background-color: #111111 !important; }
nav .links { background-color: #1a1a1a !important; }
nav .links a { color: #888888 !important; }
nav .links a:hover { color: #ffffff !important; }
.myspace-header .main-nav li a { color: #666666 !important; }
.myspace-header .main-nav li a:hover { color: #ffffff !important; }

button, 
.comments button,
.comment-form button,
input[type="submit"] {
    background-color: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #444444 !important; /* Made button edges more distinct */
    border-radius: 6px !important; 
    padding: 6px 12px !important;
    transition: all 0.2s ease !important;
}

button:hover,
.comments button:hover,
.comment-form button:hover,
input[type="submit"]:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #ffffff !important;
    cursor: pointer !important;
}

a { color: #888888 !important; text-decoration: none !important; }
a:hover { color: #ffffff !important; }
.inner b, .count { color: #ffffff !important; }

.blog-entry .title { 
    background-color: #1a1a1a !important; 
    color: #ffffff !important; 
    padding: 10px !important; 
    border: 2px solid #444444 !important; /
}

.blog-entry .content { 
    position: relative !important;
    background-color: #111111 !important; 
    color: #aaaaaa !important; 
    padding: 15px !important; 
    margin-top: 5px !important; 
    border: 2px solid #444444 !important; 
    overflow: hidden !important;
}

.blog-entry .content::after {
    content: " " !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important; left: 0; bottom: 0; right: 0 !important;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.04)) !important;
    background-size: 100% 4px, 6px 100% !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

.comments-table td:first-child, .comments-table td, .comment-replies, .details-table td:first-child, .details-table td {
    background: #111111 !important;
    color: #888888 !important;
    padding: 10px !important;
    border: 2px solid #333333 !important; /* Distinct dark grid cell lines */
}
.edit-info { 
    background-color: #111111 !important; 
    border: 2px solid #444444 !important; 
}

.comments-table img, .comments-table td:first-child img, .comment-replies img {
    -webkit-mask-image: url("https://www.clker.com/cliparts/i/q/1/z/4/g/thick-heart-shape-md.png") !important;
    mask-image: url("https://www.clker.com/cliparts/i/q/1/z/4/g/thick-heart-shape-md.png") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
}
</style>

<style>* {cursor: url(https://cur.cursors-4u.net/holidays/hol-4/hol338.cur), auto !important;}</style><a href="https://www.cursors-4u.com/cursor/2009/10/14/tiny-skull-crossbones.html" target="_blank" title="Tiny Skull Crossbones"><img src="/proxy/image.php?url=https%3A%2F%2Fcur.cursors-4u.net%2Fcursor.png" alt="Tiny Skull Crossbones" style="position:absolute; top: 0px; right: 0px;" loading="lazy" decoding="async"></a><style>
@import url('https://fonts.googleapis.com/css2?family=Potta+One&display=swap');
body{font-family: "potta one" ;}
</style><div class="star-2">

<div class="box"><b>

<style>

.box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: transparent;
  margin: 0 auto;
  overflow: hidden;
  pointer-events: none; 
}

.box b {
  display: block;
  width: 100px;
  height: 100px;
  background-image: url("https://64.media.tumblr.com/0bf929bbdb3f799f3098dfbba1a13590/a7378f8e988477be-bb/s2048x3072/10fa719a4ffaa6d32147f4e084bea45d76734fe6.pnj");
  background-size: cover;
  border-radius: 50%;
  position: absolute;
  -webkit-animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
  -moz-animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
  -o-animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
  animation: moveX 5s linear 0s infinite alternate, moveY 6.8s linear 0s infinite alternate;
}

-webkit-keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); } /* Adjust the 'to' value to make the element move horizontally */
}
@-moz-keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); }
}
@-o-keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); }
}
@keyframes moveX {
  from { left: 0; } to { left: calc(100% - 50px); }
}

@-webkit-keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); } /* Adjust the 'to' value to make the element move vertically */
}
@-moz-keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); }
}
@-o-keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); }
}
@keyframes moveY {
  from { top: 0; } to { top: calc(100% - 50px); }
}

</style></b>
<style>
* {
    outline: none !important;
    box-shadow: none !important;
}


.main-wrapper, .site-container, #app, #root, [class*="window"] {
    outline: none !important;
    box-shadow: none !important;
    border-color: #444444 !important; /* Forces it back to your dark theme color */
}</div></div>
<style></style></div></div>