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 20 of 23 comments ( View all | Add Comment )

thesehoezlovemar	1742118728 this is so prettyy! using! :> Report Comment
Jessica	1741849940 using! Report Comment
MeowCarkk	1740606884 using Report Comment
insomniac 🇧🇷 (experiencing the horrors)	1735419017 using Report Comment
teraByte	1730318447 using!! Report Comment
Anasyy	1720650860 Using Report Comment
helix	1719464397 using ^^ tysm Report Comment
Steve	1716210511 Using! Report Comment
Maya<3	1715368567 Using!!!!!<3 Report Comment
ComputerBlade	1711645194 Using! Proud to see this as a Windows enthusiast! Report Comment
gummi	1699171132 using!! (only the icons though) Report Comment
win2002x	1695235893 using Report Comment
WINNIE	1694576270 using! Report Comment
Television	1689182311 using this! Report Comment
Isabella	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