Report Blog Entry
This is a simple and kind of janky layout for blogs and bulletins themed around Windows Media Player 12, the version packaged with Windows 7. I wanted a gussy up my album review/thoughts bulletins so I threw this together and figured I'd share it here since layout uploading is still disabled. I still use this version of WMP over groove, so it has a bit of a personal connection.
It features a custom spacehey logo and sidebar icons taken straight from the program.
I'm not quite sure what I'm doing wrong, but I was unable to change the background of the main content field. If anyone knows a solution for this or could point me in the right direction it'd be greatly appreciated :-]
This layout is subject to future changes, I just don't really want to mess with it further at the moment. Feel free to make your own adjustments if you choose to use it, I'd be curious to see what you end up doing.
Code
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root{
--darkblue: #150063;
--offwhite: #f4f8fc;
}
body {
background-image: linear-gradient(#f6fafd, #cbdeea, #f6fafd);
font-family: 'noto sans', sans-serif;
font-weight: 390;
}
h1 {
font-size: 14px;
color: #150063;
display: flex;
}
h1:after {
flex: 1;
content: '';
padding: 2px;
background-color: #a9bbdd;
margin: 7px;
}
h1:hover {
color: #2871ed;
background-color:#ced2d6;
}
.inner b {
color: black;
}
nav .top {
background-color: #e4edf8;
border: 1px solid #bfc7cf;
color: black;
}
nav .links {
background-image:linear-gradient(180deg, #f4f9ff, #dfebf8);
text-align: right;
border:1.5px #bfc7cf solid;
background-position: center;
background-repeat: no-repeat;
}
.logo {
content:url("https://i.ibb.co/HTD6pf5z/spaceheywmp.png");
}
button {
color: #150063;
background-image:linear-gradient(180deg, #f4f9ff, #dfebf8);
padding: 2px;
margin: 1px;
border: 1px black solid;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
.count {
color:#7f7f7f;
}
a {
color: #150063;
}
nav .links a {
color: #150063;
}
a:hover{
background-color: #ced2d6;
color: black;
}
footer {
background-image: linear-gradient(#f6fafd, #cbdeea, #f6fafd);
border: 1px solid #bfc7cf;
}
footer p {
color: black;
}
.comments-table td:first-child, .comments-table td, .comment-replies, .details-table td:first-child, .details-table td {
background-image: url(https://i.ibb.co/jkGVZz9Q/image.png);
color: black;
border-top: #9fb5da 1px solid;
border: #9db5da .5px solid;
padding: 1.5px;
}
.edit-info {
background-color: #f4f8fc;
border: 1.5px solid #bfc7cf;
}
span a {
color: #2871ed;
}
.pfp-fallback {
box-shadow: 2px 2px 3.5px rgba(0, 0, 0, 0.34);
}
.blog-entry .title {
color: #150063;
font-size: 17px;
display: flex;
padding: 5px;
}
.blog-entry .title::after {
flex: 1;
content: '';
padding: 3px;
background-color: #a9bbdd;
margin: 5px;
margin-top: 10px;
}
.blog-entry .content {
padding: 8px;
}
p.links a:first-child .icon, table.comments-table td .icon{
content: url(https://i.ibb.co/fd77Jph2/wmpartist.png);
width: 25px;
height: auto;
}
p.links a:nth-child(2) .icon {
content: url(https://i.ibb.co/zhZmwXq9/wmpalbum.png);
width: 25px;
height: auto;
}
p.links a:last-child .icon {
content: url(https://i.ibb.co/hJsbc5fh/wmpgenres.png);
width: 25px;
height: auto;
}
main .right {
padding: 1px;
}
.logout-btn, .blog-entry .kudos-btn{
background: none !important;
border: 1px solid black;
padding: 1px !important;
user-select: text;
text-decoration: none;
color: black;
}
</style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');
:root{
--darkblue: #150063;
--offwhite: #f4f8fc;
}
body {
background-image: linear-gradient(#f6fafd, #cbdeea, #f6fafd);
font-family: 'noto sans', sans-serif;
font-weight: 390;
}
h1 {
font-size: 14px;
color: #150063;
display: flex;
}
h1:after {
flex: 1;
content: '';
padding: 2px;
background-color: #a9bbdd;
margin: 7px;
}
h1:hover {
color: #2871ed;
background-color:#ced2d6;
}
.inner b {
color: black;
}
nav .top {
background-color: #e4edf8;
border: 1px solid #bfc7cf;
color: black;
}
nav .links {
background-image:linear-gradient(180deg, #f4f9ff, #dfebf8);
text-align: right;
border:1.5px #bfc7cf solid;
background-position: center;
background-repeat: no-repeat;
}
.logo {
content:url("https://i.ibb.co/HTD6pf5z/spaceheywmp.png");
}
button {
color: #150063;
background-image:linear-gradient(180deg, #f4f9ff, #dfebf8);
padding: 2px;
margin: 1px;
border: 1px black solid;
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.2);
}
.count {
color:#7f7f7f;
}
a {
color: #150063;
}
nav .links a {
color: #150063;
}
a:hover{
background-color: #ced2d6;
color: black;
}
footer {
background-image: linear-gradient(#f6fafd, #cbdeea, #f6fafd);
border: 1px solid #bfc7cf;
}
footer p {
color: black;
}
.comments-table td:first-child, .comments-table td, .comment-replies, .details-table td:first-child, .details-table td {
background-image: url(https://i.ibb.co/jkGVZz9Q/image.png);
color: black;
border-top: #9fb5da 1px solid;
border: #9db5da .5px solid;
padding: 1.5px;
}
.edit-info {
background-color: #f4f8fc;
border: 1.5px solid #bfc7cf;
}
span a {
color: #2871ed;
}
.pfp-fallback {
box-shadow: 2px 2px 3.5px rgba(0, 0, 0, 0.34);
}
.blog-entry .title {
color: #150063;
font-size: 17px;
display: flex;
padding: 5px;
}
.blog-entry .title::after {
flex: 1;
content: '';
padding: 3px;
background-color: #a9bbdd;
margin: 5px;
margin-top: 10px;
}
.blog-entry .content {
padding: 8px;
}
p.links a:first-child .icon, table.comments-table td .icon{
content: url(https://i.ibb.co/fd77Jph2/wmpartist.png);
width: 25px;
height: auto;
}
p.links a:nth-child(2) .icon {
content: url(https://i.ibb.co/zhZmwXq9/wmpalbum.png);
width: 25px;
height: auto;
}
p.links a:last-child .icon {
content: url(https://i.ibb.co/hJsbc5fh/wmpgenres.png);
width: 25px;
height: auto;
}
main .right {
padding: 1px;
}
.logout-btn, .blog-entry .kudos-btn{
background: none !important;
border: 1px solid black;
padding: 1px !important;
user-select: text;
text-decoration: none;
color: black;
}
</style>
Changelog
9:30 2025: First uploaded
10:01 2025: Added drop shadow on profile icons to simulate album cover art box, stylized headers (header 1), tweaked colors
Comments
Displaying 5 of 5 comments ( View all | Add Comment )
Aramais!
I love this, using!!
❝𝗠𝗰-𝗶𝘇𝘂𝗺𝗼𝗻𝗼❞
this is peak
Chronically Outdoors
this is so cool omg!!! i LOVE it!
thanks man!
by NuclearBlues; ; Report
how were you able to change the sidebar that has the pfp and other blog info? I am struggling to edit my own lol any tips would be super appreciated!
by Chronically Outdoors; ; Report
the sidebar itself is the '.edit-info' class; the icons are 'p.links a:first-child .icon', a:nth-child(2) .icon, and a:last-child .icon; the individual pieces of information themselves are defined by 'profile-pic', 'author-details', 'publish-date', 'category', and 'links'. the link to your profile under "published by:" is through an h4 tag so I just stylized all of my h4 instances with the light blue as it's not a tag I use often. general colors and fonts should be inherited from the body css, and all of the links pull from any general link stylization you might have unless you override them. if this is clunky I can make a diagram, I'm not particularly experienced in css so a lot of it is just pulled from inspect element.
by NuclearBlues; ; Report
awesome thanks! i appreciate the help
by Chronically Outdoors; ; Report
no problem, hope it works out!
by NuclearBlues; ; Report
arekkiesu
Hi, I'm not a sample commenter XD
haha looks nicee
thank you :D
by NuclearBlues; ; Report
NuclearBlues
Sample comment.
Hi, I'm a commenter. Ska sucks and I hate your page soooo much. Just kidding :P