Windows 3

Tags: computer, microsoft, windows, 90s, operating system, asscastle, computing, retro, classic, vintage

Description:

Created for my own profile, but I've been told that it's cool and that I should share the code so here it is!

This layout skins your profile to resemble the Windows 3x operating system. It gives all sections of your profile a really cool-looking border, it skins all of the buttons such as those in the navbar and the comments box, and it adds a whole bunch of cool graphical icons to your contacts box. Cool, huh?

I'm not pushy about credit. Just don't go around claiming you made this layout and we're cool.

Preview:

click on the image for a larger preview

Code:

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

<style>
body {
  background-image: url(https://i.imgur.com/o0a7oNG.png);
}

body a,
body a:link,
body a:visited {
  color: #0000AF;
}

body a:hover,
body a:active {
  color: red;
}

.more,
.blog-preview h4 a,
nav .top a {
  color: white !important;
}

main {
  background: none;
}

.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading,
.col.w-40 h1,
.profile .blurbs .heading,
.profile .friends .heading,
.blog-preview h4 {
  margin: 0;
  background: #0000AF;
  color: white;
  font-size: 13px;
  text-align: center;
  height: 19px;
  border-bottom: 1px solid black;
  background-image: url(https://i.imgur.com/vKWtNvj.png);
  background-repeat: no-repeat;
  font-smooth: never;
  -webkit-font-smoothing: none;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions,
.col.w-40,
.blog-preview,
.profile-info,
.blurbs,
.friends,
footer {
  border-style: solid;
  border-width: 2px;
  border-image: url(https://i.imgur.com/PVgfljI.png) 23 / 23px;
  background-color: white;
}

.profile .contact,
.profile .url-info,
.profile .table-section,
.home-actions,
.blog-preview,
.profile-info,
.blurbs,
.col.w-40,
.friends,
footer {
  padding: 2px;
}

.profile .contact .heading,
.profile .table-section .heading,
.home-actions .heading,
.profile .blurbs .heading,
.profile .friends .heading,
.blog-preview h4 {
  padding: 0 0 0 19px;
}

.profile .contact .heading h4,
.profile .table-section .heading h4,
.profile .blurbs .heading h4,
.profile .friends .heading h4,
.blog-entry .comments .heading h4,
.bulletin .comments .heading h4,
.home-actions .heading h1,
.statistics .heading h4,
.profile .blurbs .heading,
.profile .friends .heading,
.blog-preview h4 {
  vertical-align: middle;
}

.friends {
  margin: 20px 0;
}

.contact .inner img {
  display: none;
}

.contact .inner a {
  display: block;
  text-align: center;
  padding: 5px 0 5px 0;
}

.contact .inner a:link,
.contact .inner a:visited {
  color: black;
  font-weight: normal;
}

.contact .inner {
  margin-right: 14px;
}

.contact .inner a:hover {
  color: white;
  background-color: #0000AF;
  font-weight: bold;
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.imgur.com/FbE20IA.png");
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.imgur.com/heUd9XQ.png");
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.imgur.com/2FFbY6T.png");
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.imgur.com/JuiZ1sZ.png");
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.imgur.com/OrOGhPY.png");
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.imgur.com/Mb8YnnK.png");
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a::before {
  display: block;
  content: url("https://i.imgur.com/NLX6EAZ.png");
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a::before {
  display: block;
  content: url("https://i.imgur.com/4sCndkf.png");
}

button {
  border-style: solid;
  border-image: url(https://i.imgur.com/qTuvI3M.png) 3 / 3px;
  background-color: #C0C0C0;
  font-weight: bold;
}

button:active {
  border-image: url(https://i.imgur.com/MpBJ7aD.png) 3 / 3px;
}

.details-table td,
.details-table td:first-child {
  background: #C0C7CF;
  color: black;
  border-width: 1px;
  border-color: black;
  border-style: solid;
}

.top {
  background: #0000AF !important;
}

.links {
  background: white !important;
  height: 24px;
}

nav {
  border-style: solid;
  border-color: black;
  border-width: 0 1px 1px 1px;
}
</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 16 of 16 comments ( View all | Add Comment )

ComputerBlade	1711645194 Using! Proud to see this as a Windows enthusiast! Report Comment
2000wires	1702615801 using! Report Comment
Glaceon2009	1699841660 i am gonna be using this :D Report Comment
gummi	1699171132 using!! (only the icons though) Report Comment
win2002x	1695235893 using Report Comment
MIKE	1694576270 using! Report Comment
Television	1689182311 using this! Report Comment
ISSA	1682657395 the images are not visible :( Report Comment
Hylian	1677815054 I love this Report Comment
pantone666c	1677200318 so cool! using :) tysm Report Comment
Hercegovac95	1664633609 beautiful Report Comment
Durandal	1662500187 absolutely love the look of this! going to use it for now, thanks for sharing! Report Comment
ArielMT	1651337769 This is a beautiful layout. Thank you for sharing it. Report Comment
jayden	1647557030 so cute !! Report Comment
Tei Kazami	1642659208 Reminds me of my old tumblr theme, def gonna use Report Comment
CyberKitty	1641858064 Really Impressive Report Comment