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

ᴇᴍᴘʟᴏʏᴇᴇ 432	1752167373 using Report Comment
whtm	1751849197 using :v Report Comment
Nex Maire	1751732973 usinggggggg! Report Comment
chloeka	1751646253 Using!! tysm!! <3 Report Comment
K!vsyaK	1750757845 Usingg Report Comment
adelyn	1750400902 using ! Report Comment
˚⊱Walker⊰˚	1750372481 This is so slick, using! Report Comment
Mankind	1747954993 goat material thank you Report Comment
foulifouli	1747052330 using! Report Comment
foulifouli	1747052330 using! Report Comment
felix	1744403114 instant use Report Comment
-=rock3tjumpa=-	1742258377 using!! this is fucking awesome Report Comment
novo	1741407131 using!! Report Comment
barg	1741354061 usiediggng Report Comment
oddᵏᵃˡᵉᵇ٠👁 ࣪⭑	1740687892 using :3 Report Comment
walte	1740429234 usingggg Report Comment
50calboy	1739477629 using :p Report Comment
calixto	1739120366 using Report Comment
Blair	1739029500 using. Report Comment
rizz the werehound	1736401300 using Report Comment