Bulduğum ufak zamanımda temalarınız için bir menü yazdım. Demo verelim;
Kuruluma geçelim Footer şablonunda gözükmesini istediğiniz kısma bu kodu koyun.
Temanızın CSS'lerine gelip Yeni CSS oluşturun veya global.css dosyasının en altına bu kodları ekleyin;
Kod:
http://codepen.io/anon/pen/zBWgyE?editors=1100
Kuruluma geçelim Footer şablonunda gözükmesini istediğiniz kısma bu kodu koyun.
Kod:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"><div id="footmenu">
<ul>
<li><a href="index.php" title="Forum"><i class="fa fa-globe" aria-hidden="true"></i> Forum</a></li>
<li><a href="showteam.php" title="Yetkililer"><i class="fa fa-paper-plane" aria-hidden="true"></i> Yetkililer</a></li>
<li><a href="memberlist.php" title="Üye Listesi"><i class="fa fa-users" aria-hidden="true"></i> Üye Listesi</a></li>
<li><a href="calendar.php" title="Takvim"><i class="fa fa-calendar" aria-hidden="true"></i> Takvim</a></li>
<li><a href="misc.php?action=help" title="Yardım"><i class="fa fa-plus-circle" aria-hidden="true"></i> Yardım</a></li>
<li style="float: right;"><a href="#top" title="Yukarı Çık"><i class="fa fa-arrow-up" aria-hidden="true"></i> Yukarı Çık</a></li>
</ul>
</div>
Temanızın CSS'lerine gelip Yeni CSS oluşturun veya global.css dosyasının en altına bu kodları ekleyin;
Kod:
@import url(https://fonts.googleapis.com/css?family=Cabin);
body {margin: 0px;}
#footmenu {
font-family: 'Cabin', sans-serif;
background: #455A64;
margin: 5px 5px;
border-radius: 3px;
overflow: hidden;
box-shadow:inset 0px 2px 1px #37474F, 0px 2px 1px #37474F;
font-size: 12px;
color: #fff;
}
#footmenu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
#footmenu ul li {
display: flex;
float: left;
padding: 7px 10px;
transition: all 150ms;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
#footmenu ul li:hover {
background: #37474F;
}
#footmenu ul li a {
text-decoration: none;
color: #fff;
}