Witam, oto następny mój tutorial, tym razem zajmiemy się "Sidebar'em"
Demo dostępne jest tu: KLIK, oraz tu: KLIK
Pliki potrzebne do działania znajdują się: tutaj - wszystkie pliki z owego archiwum wrzuć do głównego katalogu forum.
Aby pasek działał w naszym IP.Board należy...
Przejść do: ACP - Look & Feel -> Wybór skina - Edit board header and footer wrapper
Znajdź:
<% CSS %>
Dodaj poniżej:
<style media="all" type="text/css">
body{
position:relative;
paddign:0px;
font-size:100%;
}
h2{
color:#FFFFFF;
font-size:90%;
font-family:arial;
margin:10px 10px 10px 10px;
font-weight:bold;
}
h2 span{
font-size:105%;
font-weight:normal;
}
ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#DA1074;
width:177px;
}
li a{
width:100%;
}
li a:link,
li a:visited{
color:#FFFFFF;
font-family:verdana;
font-size:70%;
text-decoration:none;
display:block;
margin:0px 0px 0px 0px;
padding:0px;
width:100%;
}
li a:hover{
color:#FFFFFF;
text-decoration:underline;
}
#sideBar{
position: absolute;
width: auto;
height: auto;
top: 200px;
right:-7px;
background-image:url(images/background.gif);
background-position:top left;
background-repeat:repeat-y;
}
#sideBarTab{
float:left;
height:137px;
width:28px;
}
#sideBarTab img{
border:0px solid #FFFFFF;
}
#sideBarContents{
overflow:hidden !important;
}
#sideBarContentsInner{
width:200px;
}
</style>
Następnie znowu wyszukaj:
<% javascript %>
Dodaj poniżej:
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/side-bar.js"></script>
Ponownie znajdź:
<body>
Dodaj poniżej:
<div id="sideBar">
<a href="#" id="sideBarTab"><img src="images/slide-button.gif" alt="sideBar" title="sideBar" /></a>
<div id="sideBarContents" style="width:0px;">
<div id="sideBarContentsInner">
<h2>side<span>bar</span></h2>
<ul>
<li><a href="#">Link Pierwszy</a></li>
<li><a href="#">Link Drugi</a></li>
<li><a href="#">Link Trzeci</a></li>
<li><a href="#">Link Czwarty</a></li>
<li><a href="#">Link Piąty</a></li>
</ul>
</div>
</div>
</div>
Wszelkie zmiany(kolory, grubość czcionki, linki itp) należy również odpowiednio zmieniać modyfikując powyższy kod :/
Miłego korzystania
Tutorial copyright by TRACKER z pozdrowieniami dla forum.invisionize.pl