Had a question about how to recreate the fixed borders as seen on this page. It’s not too difficult, all you need to do is first fix the header at the top (and add some Javascript if you want to scale down the menu after the user scrolls down the page), and then add three other empty <div>s to form the left, right, and bottom borders, making them fixed as well. You can either add the empty <div>s using a simple text widget, or add them to one of your main templates.
On this post, I’ve just added them directly into the post like this:
<div class="leftpageborder"></div>
<div class="rightpageborder"></div>
<div class="bottompageborder"></div>
<div class="toppageborder"></div>Note that instead of making the header fixed, I just added an additional <div> for the top border. Maybe later I’ll get around to fixing the header.
Then add the following CSS:
.leftpageborder, .rightpageborder {
position: fixed;
height: 120%;
width: 30px;
top: 0;
background-color: #0090d3;
z-index: 1006;
}
.leftpageborder {
left: 0;
}
.rightpageborder {
right: 0;
}
.toppageborder, .bottompageborder {
position: fixed;
width: 100%;
height: 30px;
left: 0;
background-color: #0090d3;
z-index: 1006;
}
.toppageborder {
top: 0;
}
.bottompageborder {
bottom: 0;
}
body {
padding: 30px;
}Note that I made the borders blue so they stand out from the background. Also note that I added 30px of padding to the <body> element to account for the borders.