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

Willum_180dB	1725985804 sick man, using! Report Comment
ilikeeatingkids	1724854250 Using Report Comment
Gaston	1724845221 Sometimes I come across screenshots and random posts about how different popular websites and apps used to look. I never really paid attention to this before, but now the difference is obvious. The interface and design really do play a big role in how comfortable it is to use a site or software. Report Comment In this regard, I really like the ERP system we're using for work and managing the company. It’s super important to me that I can make changes, customize the system for myself and my needs, so IFS Cloud turned out to be a great choice. Thanks to the Novacura Flow platform https://www.novacura.com/novacura-flow/user-interface/, provided by our IFS partner Novacura, we have a lot of flexibility in customizing the user interface. by KoltzVS; 1724846009; Report
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
apollo	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
volaju	1711396858 usimg Report Comment
bable	1711121836 using Report Comment
DAVID :)	1710483566 Using this! Report Comment
mjdxp	1709946602 using this! :) Report Comment
Beau	1708826891 Using :] Thank you. Report Comment
All-Star Bandit	1708033773 using! Report Comment
alex	1707366722 I put this on my profile and it’s super dope Report Comment