Retro Steam UI Layout

Tags: steam, 90's, 2000's, computer, gaming, valve, green, simple

Description:

A layout made to mimic the old green Steam user interface from the late 1990's and early 2000's. I grew up with this UI and immediately knew I wanted to recreate it once I heard about SpaceHey's custom CSS capabilities. Hope ye all enjoy!

Works on both desktop and mobile.

Release January 01 2023

Preview:

click on the image for a larger preview

Code:

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

<!-- layout by rasterpieces -->

<style>
body {
    background: #3e4637;
    font-family: Arial, Verdana, sans-serif;
}
p {
    color: #fff;
}

a {
    color: #a2a09c;
}

.general-about{
    background-color: #4c5844;
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;
    padding-bottom: 60px;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

a:hover {
    color: #fff;
}

.left.col {
    border: 0px;    
    padding: 5px;
    color: #ffffff;
    font-size: 13px;
    position: relative;
    right: 4px;
}

.profile .table-section {
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;
    margin-bottom: 20px;
}
.details-table td{
    background-color: #3e4637 !important;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    padding-left: 5px !important;
    color: #ffffff !important;
    font-size: 13px; 
}
.mood {
    background-color: #3e4637 !important;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    padding: 5px !important;
    color: #ffffff !important;
    font-size: 13px; 
    margin-bottom: 10px;
}
.profile .contact {
    background-color: #3e4637;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    margin-bottom: 70px;
}
.right.col {
    border: 0px;
    padding: 5px;
    position: relative;
    left: 4px;
    margin-left: 5px;
    color: #ffffff;
    font-size: 13px;
}
main {
    padding: 10px 15px 10px 15px;
    background-color: #4c5844;
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;
}
nav .top {
    margin-top: 10px;
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    padding: 4px;
}
nav .links {
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-left: 10px !important;
    color: #ffffff !important;
    font-size: 13px;    
    padding: 5px;
    position: relative;
    gap: 5px;
    justify-content: center;
}
nav .links a {
    color: white;
    text-shadow: none;
}
nav .links a:hover {
    color: white;
    text-decoration: none;
}

body &gt; div.container &gt; nav &gt; ul &gt; li.special {
    display: none;
}
body &gt; div.container &gt; nav &gt; ul &gt; li:nth-child(12) {
    display: none;
}
body &gt; div.container &gt; nav &gt; ul &gt; li:nth-child(3) {
    display: none;
}
body &gt; div.container &gt; nav &gt; ul &gt; li:nth-child(13) {
    border: none;
}
nav li {
    font-size: 0pt;
    padding-right: 5px;
    border-right: 2px ridge #555555;
}
.heading {
    background-color: #4c5844 !important;
    border: 0px;
    padding-left: 10px !important;
    color: #ffffff !important;
    font-size: 13px;    
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;
}
.comments-table {
    border: 0px;
}
.comments-table td {
    border: 0px;
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;
    padding: 5px;
    color: #ffffff;
    font-size: 13px;
    top: -32px;
}
.url-info {
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    padding: 5px;
    color: #ffffff;
    font-size: 13px;
    margin-bottom: 20px;
}
.comments-table .pfp-fallback {
    border: 2px ridge #555555;
}
.profile .friends .person p{
    color: #c4b550;
    text-decoration: none !important;
}
.profile .friends .person p:hover{
    color: #fff;
    text-decoration: none !important;
}
.person .pfp-fallback {
    background-color: #4c5844;
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;    
}
.profile-pic .pfp-fallback {
    background-color: #4c5844;
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;   
}
#comments &gt; div.inner &gt; table &gt; tbody &gt; tr &gt; td:nth-child(1) {
    background: none;
}
.comment-replies {
    border: none;
    border-top: 2px ridge #555555;
}
footer {
    background: none;
}

h4, .count{
    color: #c4b550 !important;
}

.profile-info{
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
}

.blurbs{
    background-color: #3e4637 !important;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    color: #ffffff;
}

.friends{
    background-color: #3e4637 !important;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    margin-bottom: 20px;
}

.blog-preview{
    background-color: #3e4637 !important;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    margin-top: 20px;
}

.blog-preview p{
    padding-left: 5px;
}

.blog-preview h4{
    background-color: #4c5844 !important;
    padding-left: 10px !important;
    padding: 2px;
    font-size: 13px;    
    border-right: 1px ridge #27301f;  
    border-bottom: 1px ridge #27301f;  
    border-left: 1px ridge #8a9380;  
    border-top: 1px ridge #8a9380;
    margin-top: 0px !important;
}

.comments-table button{
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    padding: 5px;
    color: #fff;
}

.comments-table button:hover{
    background-color: #5a6a50 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    padding: 5px;
    color: #fff;
}

.details{
    background-color: #3e4637 !important;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    margin-left: 170px;

}

.online{
    color: #c4b550;
    padding: 5px;
}

nav .links{
    display: flex;
    width: 100%;
    color: #ffffff !important;
}

nav .links li{
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    padding: 5px;
    color: #ffffff !important;
}

nav .links .special a{
    color: #ffffff;
}

nav .links li:hover{
    background-color: #5a6a50 !important;
}

.details-table a{
    color: #ffffff;
}

#q{
    background-color: #3e4637;
    border-right: 1px ridge #8a9380;  
    border-bottom: 1px ridge #8a9380;  
    border-left: 1px ridge #27301f;  
    border-top: 1px ridge #27301f;
    padding-bottom: 8px;
}

@media screen and (max-width: 760px) {
    nav .links{
        display:block;
    }
}

.top .right{
    margin: 10px;

}

.top .right a, .logout-form, .top .center button, span h1{
    background-color: #4c5844 !important;
    border-right: 1px ridge #27301f !important;
    border-bottom: 1px ridge #27301f !important;
    border-left: 1px ridge #8a9380 !important; 
    border-top: 1px ridge #8a9380 !important;
    padding: 5px;
    color: #ffffff !important;
}

.top .center{
    display:flex;
    align-items: center;
    justify-content: center;
}

.edit-link{
    display: none;
}

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

dieselka	1736401300 using Report Comment
brutus	1735288336 using! Report Comment
d4vid.d	1734111800 using Report Comment
AnonymouseGeek	1732391482 using Report Comment
greenpilled	1732352547 using :D Report Comment
MCNF	1731127140 using! Report Comment
Krzychucki	1728678845 Using :D Report Comment
Kris	1728376805 using! Report Comment
Willum_180dB	1725985804 sick man, using! Report Comment
myclownass	1724854250 Using Report Comment
Melati Fatima	1723745734 Using! Report Comment
Groonklie	1722057936 This is awesome. Reminds me of the source ui Report Comment
ali.exe	1719172438 using (PRBLY ) Report Comment
Tazza	1718205484 prolly using Report Comment
Sui	1717562295 using!!! Report Comment
damien	1716962623 using (probably idk...) Report Comment
Nos Tak	1716954209 using Report Comment
Laqzi	1716341655 using! Report Comment
eliiii	1716193345 ussssing tf out of this Report Comment
Captain	1715353701 using Report Comment