Old School Runescape Layout

Tags: simple, layout, layouts, runescape, osrs, rs3, jagex, mrrelliks

Description:

Hey there, I come to you once again with another nostalgia trip themed layout. this time its Runescape - more specifically Runescape in 2006 - 2007.

I spent many hours (and still do) playing this game so it was just a matter of time before I got to work to create this one of a kind theme :D

Preview:

click on the image for a larger preview

Code:

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

<style>

:root {
--themecolor5: #000;
--themecolor4: #fff;
--themecolor3: #000;
--themecolor2: #333333;
--themecolor1: #111111;
--topic1: "💬 General";
  --topic2: "🎵 Music";
  --topic3: "🎥 Movies";
  --topic4: "📺TV Shows";
  --topic5: "🎮 Games";
  --topic6: "🔗 Favourite Websites";

}

table, th, td {

  border: 0px solid;

     }


.table-section:not(:last-child) .details-table tr td:first-child p{color:transparent !important;text-shadow: none !important;letter-spacing: -100px;}

.details-table tr td:first-child p::after{
    
    
color:#fff !important;
letter-spacing:normal !important;
text-shadow: 2px 2px black !important;
filter: brightness(95%) !important;
   
   
}

.friends-grid {
    display: none;
}
.table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{
  content: var(--topic1);
}
.table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{
  content: var(--topic2);
}
.table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{
  content: var(--topic3);
}
.table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{
  content: var(--topic4);
}
.table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{
  content: var(--topic5);
}
.table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{
  content: var(--topic6);
}


  body{
   	background-color: #000;
    font-family: 'Arial';
  }



main:before {
    width: auto;
    
    min-height: 200px;
    display: block;
    content: "";
    box-shadow: white;
    
  margin-left: 20px;
  margin-right: 20px;
    background: rgba(255, 165, 0, 0);
  	text-align: center;
  	justify-content: center;
  	background-image:url(https://cdn.discordapp.com/attachments/874275178576773183/934086851478814780/Mr-Relliks.png);
    background-size: contain;
  	background-repeat: no-repeat;
margin-bottom: -60px;


}
  main{
    padding: 60px;
    background-image: url(https://www.runescape.com/img/rsp777/bg2.jpg);
    background-size: contain;
    
    
  }


  p{
    color:#fff;
  }

  h1{
    font-family: 'Arial';
    color: #fff;
    font-size: 40px !important;

text-transform:uppercase !important;
padding-left: 2px !important;
    
  }

  h4{
    color: var(--themecolor4) !important;
  }

  a{
    color: #90c040;
  }

  a:hover{
    color: #90c040;
text-decoration: underline;
  }



  .heading{
    background: var(--themecolor3) !important;
    color: #fff;
  	text-align: center;
    
  }

  .contact, .url-info, .table-section{
    
    background: black;
    border: 4px solid #382418!important;
    padding: 6px;
  }

.blurbs{
    padding: 20px;
    color: #000 !important;
    background-image: url('https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif') !important;
   
        
    }
.blurbs a{
 color: #000!important;
}

.blurbs h4{
 color: #000!important;
 background: rgba(255, 165, 0, 0.0) !important;
}


 .profile-pic img{
 display: block;

 border: 5px solid #fff;
 border-radius: 10%;
   
   
}

.general-about{


text-align: center;}

.blurbs.heading {

background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_765_top.gif);
}

.friends {
  background-image: url('https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif') !important;
  padding: 20px;

}
.contact .heading{
  
  
  m

    }

  .comments-table{
    background: black;
    border: 2px solid #382418;
    padding: 6px;
  }

  .comments-table tr td{
    background: #000 !important;
  }
  .comments-table p {
    color: #fff;
  }

  .profile-info .inner{
    
   
    
    color: #fff;
    
  }

.blog-preview {
  
   
    width: 395px;
  height: auto;
    background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif);
     
  text-align: center;
  font-family: 'Arial';
  
}

.blog-preview p{

  color: #000;  
  padding: 2px;
  font-size: 13px;
  

  

    }

.blog-preview a{

  color: #7B4F17;  
  

  

    }

.blog-preview h4{

    
  background: #000;
  
  background-size: 100%;
    
    
    
    
    
  	text-align: center;

  

    }

  .profile-info{
    height: 126px;
    width: 152px;
    background-image: url(https://www.runescape.com/img/rsp777/splash/compare_users.gif);
    background-size: contain;
    
    
  }

  table.details-table{
        
  
        
    }
    .profile .details-table td{
        

   background: #000;
   BOTTOM !important;
        
    }

  .count {
    color: var(--themecolor4);
  }

  footer, nav .top{
    background: #000 !important;
   
  }

  nav .links{
    background: var(--themecolor3);
    
    border: 4px solid #382418;
    padding: 10px;
    margin-bottom: 10px;
  }

nav .links a{
    
    
    color: #90c040;
  }

nav .links a:hover{
 color: #90c040;
text-decoration: underline;
}

  .comment-replies{
    border: 4px solid #382418;
    
  }





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

Gregory Savacool	1728314615 Great layout, love it, I think I'm gonna use this one for awhile. I had a few issues with it, but a little tweaking didn't take me too long to make it perfect, here's the small changes I made just in case you want the same: The blog background picture PNG underneath where it says "There are no Blog Entries yet." (With a blank blog) Wasn't conforming correctly on my tablet in portrait mode (it would stretch off the screen, while everything else was automatically conforming), so in the code I changed: } .blog-preview { width: 395px; height: auto; background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif); text-align: center; font-family: 'Arial'; } To } .blog-preview { width: auto; height: auto; background-image: url(https://www.runescape.com/img/rsp777/scroll/backdrop_745.gif); text-align: center; font-family: 'Arial'; } So I replaced the 395x with auto, and now it scales properly. I was also having trouble with my friends under the friends tab showing up on the profile page, the tab was blank, so I went in and changed this part of the code: } .friends-grid { display: none; } .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{ content: var(--topic1); } .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{ content: var(--topic2); } .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{ content: var(--topic3); } .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{ content: var(--topic4); } .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{ content: var(--topic5); } .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{ content: var(--topic6); } To } .friends-grid { display: } .table-section:not(:last-child) .details-table tr:nth-child(1) td:first-child p::after{ content: var(--topic1); } .table-section:not(:last-child) .details-table tr:nth-child(2) td:first-child p::after{ content: var(--topic2); } .table-section:not(:last-child) .details-table tr:nth-child(3) td:first-child p::after{ content: var(--topic3); } .table-section:not(:last-child) .details-table tr:nth-child(4) td:first-child p::after{ content: var(--topic4); } .table-section:not(:last-child) .details-table tr:nth-child(5) td:first-child p::after{ content: var(--topic5); } .table-section:not(:last-child) .details-table tr:nth-child(6) td:first-child p::after{ content: var(--topic6); } I just erased the none; and now everything is displaying correctly. Report Comment
furb3x	1713666186 Definitely using, ty! Report Comment
321TacocaT123	1667253558 The text in the section about the blurb's defaults to black on a black background. I have no experiece in HTML no I'm not quite sure how to fix it. Report Comment
Karithina	1643361171 This is awesome :) Report Comment
BroxMontana	1642959257 yoooo this is amazing! Report Comment Thanks !!! :) by Mr Relliks; 1642963727; Report