Abland
|
Hi, Kelley,
In your theme create a folder "templates" and inside create file, "side-links.php" and add the following:
<div class="side-links side-link-1"><a href="/"><span>Page One</span></a></div>
<div class="side-links side-link-2"><a href="/"><span>Page Two</span></a></div>
<div class="side-links side-link-3"><a href="/"><span>Page Three</span></a></div>
In "style.css" add the following rules:
/*--> SIDE LINKS */
.side-links {
position: fixed;
display: block;
width: 40px;
height: auto;
right: 0;
margin: 0;
text-align: center;
z-index: 100;
border: 1px solid #000;
-moz-border-radius: 20px 0 0 20px;
-webkit-border-radius: 20px 0 0 20px;
border-radius: 20px 0 0 20px;
}
.side-links span {
position: relative;
display: block;
color: #000;
width: 100px;
height: 100px;
line-height: 40px;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.side-links a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: #000;
}
.side-link-1 {
top: 50px;
background-color: yellow;
}
.side-link-2 {
top: 170px;
background-color: red;
}
.side-link-3 {
top: 290px;
background-color: white;
}
In "header.php" add the following right after the opening <div id="art-main"> - your prefix may vary:
<?php get_template_part('templates/side','links'); ?>
From there you can adjust the style rules to your needs, and add the links you want in side-links.php
|