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 21 comments ( View all | Add Comment )

teraByte	1730318447 using!! Report Comment
bug0gram	1721668097 Using :) Ty Report Comment
Anasyy	1720650860 Using Report Comment
helix	1719464397 using ^^ tysm Report Comment
1csdv	1716210511 Using! Report Comment
Maya<3	1715368567 Using!!!!!<3 Report Comment
ComputerBlade	1711645194 Using! Proud to see this as a Windows enthusiast! Report Comment
Saturn32X	1699841660 i am gonna be using this :D 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
jayden	1647557030 so cute !! Report Comment
Tei Kazami	1642659208 Reminds me of my old tumblr theme, def gonna use Report Comment