MyBB Destek Forumu

Orjinalini görmek için tıklayınız: Kullanıcı Paneli Düzenleme Sorunu
Şu anda (Arşiv) modunu görüntülemektesiniz. Orjinal Sürümü Görüntüle internal link
20721525570183387672.jpg

21110038007991031138.jpg



Forumun panelinin üstteki gibi yapmak istiyorum. Bunu nasıl yapabilirim.
JavaScript kurularak yapılmış.

Butonun Kodu
Kod:
<a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('​fade').style.display='block'" id="tikla">Kullanıcı Paneli -Çıkış</a>

CSS Koduları
Kod:
img.logo1 {
    position: absolute;
    left: 10%;
    top: 0;
    z-index: 10;
}

img.logo2 {
    position: absolute;
    left: 175px;
    top: 0;
}

#sbuton input[type=submit],
#sbuton input[type=button],
#sbuton input[type=reset] {
    display:inline-block;
    border:1px solid #a0d2d5;
    border-bottom-color:#84adaf;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    background:#6ec7dc;
    background:-moz-linear-gradient(top, #84ecf3, #6ec7dc);
    background:-webkit-gradient(linear, left top, left bottom, from(#84ecf3), to(#6ec7dc));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#84ecf3', EndColorStr='#6ec7dc')";
    color:black;
    font:normal 12px/16px Arial, Helvetica, sans-serif;
    padding:6px 31px 5px;
    
    filter:chroma(color=#00000);
}

#sbuton input[type=submit]:hover,
#sbuton input[type=submit]:focus,
#sbuton input[type=button]:hover,
#sbuton input[type=button]:focus,
#sbuton input[type=reset]:hover,
#sbuton input[type=reset]:focus {
    background:#74d1e2;
    background:-moz-linear-gradient(top, #84ecf3, #74d1e2);
    background:-webkit-gradient(linear, left top, left bottom, from(#84ecf3), to(#74d1e2));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#84ecf3', EndColorStr='#74d1e2')";
}

#sbuton input[type=submit]:active,
#sbuton input[type=button]:active,
#sbuton input[type=reset]:active {
    text-shadow:rgba(0,0,0,0.2) 0 -1px 0;
}

#genelpencere {
    background: url(../../../images/mycolor/modal-bg.png);
    width: 500px;
    border: 1px solid #fff;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-box-shadow: rgba(0,0,0,0.3) 0 0 4px;
    -webkit-box-shadow: rgba(0,0,0,0.3) 0 0 4px;
    box-shadow: rgba(0,0,0,0.3) 0 0 4px;
    text-shadow: rgba(255,255,255,0.6) 0 1px 0;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 9990;
    margin: -100px 0 0 -180px;
}

#genelpencere header {
    background:-moz-linear-gradient(top, #f9fafb, #edf1f4);
    background:-webkit-gradient(linear, left top, left bottom, from(#f9fafb), to(#edf1f4));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f9fafb', EndColorStr='#edf1f4')";
    border-bottom:1px solid #dadee0;
    padding:20px 20px 16px;
    position:relative;
}

#genelpencere h3 {
    color:#4f849e;
    font:normal 18px/26px Arial, Helvetica, sans-serif;
}

.kapat {
    height:16px;
    width:16px;
    position:absolute;
    top:50%;
    right:20px;
    margin-top:-8px;
    cursor:pointer;
    opacity:0.8;
}

.kapat:hover,
.kapat:focus {
    opacity:1;
    -moz-transition: opacity 0.3s ease;
    -webkit-transition: opacity 0.3s ease;
    -o-transition: opacity 0.3s ease;
    transition: opacity 0.3s ease;
}

.kapat:active {
    margin-top:-7px;
    opacity:0.8;
}

#genelpencere article {
    border-top:1px solid #fff;
    border-bottom:1px solid #fff;
    color:#6a6a6a;
    padding:15px 20px 19px;
}

#genelpencere article p {
    margin:0 0 10px;
}

.kontrolkutusu {
    border:1px solid #b9cbd9;
    background:-moz-linear-gradient(top, #fff, #d9e6f0);
    background:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#d9e6f0));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#d9e6f0')";
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    cursor:pointer;
    margin:0 10px 0 0;
    width:18px;
    height:18px;
    overflow:hidden;
}

.kontrolkutusu.kontrol {
    background: url(/images/mycolor/kontrol.png) 0 -1px no-repeat, -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d9e6f0));
}

.kontrolkutusu input {
    opacity:0;
    filter:alpha(opacity=0);
    cursor:pointer;
}

#genelpencere footer {
    border-top:1px solid #e8eaeb;
    background:-moz-linear-gradient(top, #eef2f5, #f7f9fa);
    background:-webkit-gradient(linear, left top, left bottom, from(#eef2f5), to(#f7f9fa));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#eef2f5', EndColorStr='#f7f9fa')";
    color:#719cb1;
    padding:10px 20px 15px;
}

#genelpencere footer span {
    padding:0 12px;
}

#genelpencere footer a {
    color:#d24141;
    text-decoration:none;
}

#genelpencere footer a:hover,
#genelpencere footer a:focus {
    color:#f60202;
}

.icerikbilgi {
    position:absolute;
    right:0;
    bottom:0;
    z-index:9999;
    cursor:nw-resize;
}

#genelpencere input[type=submit],
#genelpencere input[type=button],
#genelpencere input[type=reset] {
    display:inline-block;
    border:1px solid #a0d2d5;
    border-bottom-color:#84adaf;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    -webkit-box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    box-shadow:inset rgba(255,255,255,0.8) 0 1px 1px;
    background:#6ec7dc;
    background:-moz-linear-gradient(top, #84ecf3, #6ec7dc);
    background:-webkit-gradient(linear, left top, left bottom, from(#84ecf3), to(#6ec7dc));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#84ecf3', EndColorStr='#6ec7dc')";
    color:#fff;
    font:normal 12px/16px Arial, Helvetica, sans-serif;
    padding:6px 31px 5px;
    text-shadow:rgba(0,0,0,0.2) 0 1px 0;
    text-transform:uppercase;
    filter:chroma(color=#00000);
}

#genelpencere input[type=submit]:hover,
#genelpencere input[type=submit]:focus,
#genelpencere input[type=button]:hover,
#genelpencere input[type=button]:focus,
#genelpencere input[type=reset]:hover,
#genelpencere input[type=reset]:focus {
    background:#74d1e2;
    background:-moz-linear-gradient(top, #84ecf3, #74d1e2);
    background:-webkit-gradient(linear, left top, left bottom, from(#84ecf3), to(#74d1e2));
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#84ecf3', EndColorStr='#74d1e2')";
}

#genelpencere input[type=submit]:active,
#genelpencere input[type=button]:active,
#genelpencere input[type=reset]:active {
    text-shadow:rgba(0,0,0,0.2) 0 -1px 0;
}

#kutuorta {
    position:absolute;
    bottom:0;
    padding:10px 0;
    width:100%;
    text-align:center;
    background:rgba(0,0,0,0.1);
    color:#000;
}

#kutuorta a {
    color:#000;
}

.siyahalan {
    width: 100%;
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    height: 100%;
    background-color: 333;
    z-index: 1001;
    -moz-opacity: 1.0;
    opacity: .100;
    filter: alpha(opacity=100);
}

.beyazalan {
    display: none;
    position: absolute;
    
    width: 750px;
    height:500px;    
    z-index:1002;
    overflow: auto;
}

#tikla {
padding: 4px 14px 4px 28px;
margin-bottom: 10px;
padding: 4px 14px 4px 28px;
margin-bottom: 10px;

    background: #CDE69B url(http://cs2dturkiye.org/images/mycolor/duyuru4.png) no-repeat 6px center;
    color: #000;
    border: 1px solid #9C3;
}

#tikla2d {
    background: #CDE69B; /* Old browsers */
    background: -moz-linear-gradient(top, #fed870 0%, #fdbe43 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fed870), color-stop(100%,#fdbe43)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #fed870 0%,#fdbe43 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #fed870 0%,#fdbe43 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #fed870 0%,#fdbe43 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FED870', endColorstr='#FDBE43',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #fed870 0%,#fdbe43 100%); /* W3C */
    display:inline-block;
    padding:4px 15px;
    border-radius:3px;
    font-size:14px;
    color:black;
    text-shadow:0 1px 0 #CDE69B;
     text-decoration:none;
    border:1px solid #9C3;
    border-bottom-color:#9C3;
    box-shadow:0 1px 3px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
}

JavaScript
Kod:
<!--
    lang.username = "Kullanıcı Adı";
    lang.password = "Şifre";
    lang.login = "Oturum Aç";
    lang.lost_password = " &mdash; <a href=\"http://forum.hangar.net.tc/member.php?action=lostpw\">Şifremi Hatırlat<\/a>";
    lang.register_url = " &mdash; <a href=\"http://forum.hangar.net.tc/member.php?action=register\">Üye Olun<\/a>";
    lang.remember_me = "Beni Hatırla";
// -->

Kabaca böyle görünüyor, ancak bu temanın şablonları da farklıdır söyleyim. Bu nedenle bu temayı incelememiz gerekiyor Gülümseme Boş bir vakitte bakabilirim ancak.
tamam sağolun