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

foulifouli	1747052330 using! Report Comment
foulifouli	1747052330 using! Report Comment
fel	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
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
Willum_180dB	1725985804 sick man, using! Report Comment
myclownass	1724854250 Using Report Comment
Melati Fatima	1723745734 Using! Report Comment