Skip to content

Instantly share code, notes, and snippets.

@JoshuaKimsey
Created May 1, 2019 21:13
Show Gist options
  • Save JoshuaKimsey/9c183f6f68d9907feb8b4a9bf3362b26 to your computer and use it in GitHub Desktop.
Save JoshuaKimsey/9c183f6f68d9907feb8b4a9bf3362b26 to your computer and use it in GitHub Desktop.
A demonstration of a sidebar element for Deviant Art. Works on normal sites too
<!DOCTYPE HTML>
<html>
<head>
<title>Sidebar Skin</title>
<style>
* {
font-family:"Helvetica Neue", HelveticaNeue, "TeX Gyre Heros", TeXGyreHeros, FreeSans, "Nimbus Sans L", "Liberation Sans", Arimo, Helvetica, Arial, sans-serif;
text-align: center;
}
.negate-box-margin *
{
background:transparent;
border:0;
margin:0;
padding:0;
}
.gr-box
{
background:#ffffff;
border:1px solid #000000;
}
.text a
{
text-decoration:none;
color:#cc0000;
transition:all ease-in-out .70s;
}
.text a:hover
{
color:#5a5a5a;
text-decoration:underline;
}
.list, .gr-top h2 img, .bottom .hsep, .gr1, .gr2, .gr3, .tri, .gr3.gb, .gr2.gb, .gr1.gb
{
display:none;
}
.gr-top *
{
padding:0 !important;
}
.gr-top
{
position:absolute;
top:70px;
right:20px;
left:20px;
text-align:center;
}
.gr-top h2
{
font-size:30px;
color:#cc0000;
}
.gr-top h2 a
{
color:#cc0000;
text-decoration:none;
transition:all ease-in-out .5s;
}
.gr-top h2 a:hover {
color:#5a5a5a;
text-decoration:underline;
}
.sidebar
{
display:inline;
position: absolute;
top:0px;
left:0px;
z-index:100;
width:180px;
margin-left:-181px;
background: rgba(90, 90, 90, .5);
cursor:pointer;
transition:all ease-in-out .70s;
}
.sidebar:hover
{
margin:0px;
box-shadow: 0 0 4px #200;
}
.sidebar::after
{
content:"Menu >";
display:inline;
position: absolute;
top:10px;
left:180px;
z-index:200;
background:#5a5a5a;
padding:5px 5px 8px 7px;
font-size:14px;
border-top:1px solid #000000;
border-right:1px solid #000000;
border-bottom:1px solid #000000;
font-size:14px;
letter-spacing:1px;
color:#eeeeee;
transition:all ease-in-out .70s;
}
.sidebar:hover::after{
background:#000000;
content:'Menu <'
}
.sidebar ul
{
list-style-type:none;
padding-left:0 !important;
}
.sidebar ul a
{
display:block;
color:#eeeeee;
text-align:center;
background:#5a5a5a;
text-decoration:none;
width:150px;
height:33px;
padding-top:7px;
margin:0px 15px 7px 15px;
border:2px solid #000000;
font-size:14px;
transition: all ease-in-out .70s;
}
.sidebar ul a:hover
{
color:#eeeeee;
text-align:center;
background:#000000;
}
.text
{
margin:130px 20px 20px 20px;
font-size:13px;
color:#5a5a5a;
}
.text h1 {
padding-left:10px;
font-size:30px;
font-weight:normal;
color:#cc0000;
border-left:3px solid #cc0000;
}
.text h2 {
padding-left:10px;
font-size:25px;
font-weight:normal;
color:#cc0000;
border-left:3px solid #cc0000;
}
.text h3
{
padding-left:10px;
font-size:20px;
font-weight:normal;
color:#cc0000;
border-left:3px solid #cc0000;
}
.text h4 {
padding-left:10px;
font-weight:normal;
color:#cc0000;
border-left:3px solid #cc0000;
}
.text h5 {
padding-left:10px;
font-size:14px;
font-weight:normal;
color:#cc0000;
border-left:3px solid #cc0000;
}
.text h6 {
padding-left:10px;
font-size:11px;
font-weight:normal;
color:#cc0000;
border-left:3px solid #cc0000;
}
.text ul
{
padding-left:40px;
}
.text li
{
margin-bottom:-5px;
padding-top:4px;
}
a.thumb img
{
border:2px solid #ffffff;
padding:5px;
background: #eeeeee;
transition:all ease-in-out .70s;
}
a.thumb img:hover
{
background:#5a5a5a;
border: 2px solid #000000
}
a.commentslink
{
color:#cc0000;
text-decoration:none;
transition:all ease-in-out .70s;
}
a.commentslink:hover
{
color:#5a5a5a;
text-decoration:underline;
}
a.external:after {
content: "";
}
.text blockquote {
width:60%;
text-align:justify;
font-size:13px;
background:#eeeeee;
padding:10px 30px;
position:relative;
}
.text blockquote:before {
font-size: 35px;
color: #cc0000;
content: open-quote;
}
.text blockquote:after {
font-size: 35px;
color: #cc0000;
content:close-quote;
}
.code {
background: #5a5a5a;
width: 60%;
font-family: "Courier";
padding:10px 30px;
color: #eeeeee;
position:relative;
}
</style>
</head>
<body>
<div class="sidebar">
<ul>
<a href="http://hsoj95.deviantart.com/"><li>Home</li></a>
<a href="http://hsoj95.deviantart.com/gallery/49614551/4K-Images-and-Art"><li>4K Artwork</li></a>
<a href="http://hsoj95.deviantart.com/gallery/"><li>Gallery</li></a>
<a href="http://hsoj95.deviantart.com/journal/"><li>Journals</li></a>
<a href="http://hsoj95.deviantart.com/favourites/"><li>Favorites</li></a>
<a href="http://my.deviantart.com/deviants/add/hsoj95"><li>Watch Me!</li></a>
<a href="http://canines-unite.deviantart.com"><li>Canines-Unite</li></a>
</ul>
</div>
</body>
</html>
@Alex-Moh
Copy link

Alex-Moh commented May 2, 2019

Thanks SouthernWolf:)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment