Smf 2.1 üst menü

Başlatan kimyaci, 02 Eki 2015 13:29

« önceki - sonraki »

0 Üye ve 1 Ziyaretçi konuyu incelemekte.

***

  1. 142

  2. 16

  3. 34

Arkadaşlar Smf 2.1 üst menüyü smf 2.0 için düzenleyebilirmiyiz.Üye ismini tıklayınca son ziyaretten bu yana yazılan mesajlarla cevapsız mesajların görünmesi yeterli olacaktır.Teşekkürler.


*

  1. 2,984

  2. 579

  3. 860
tema ekibindeki arkadaşlar elinizden öper  :o
@CeeMoo
@Asilkan

*

  1. 1,075

  2. 98

  3. 281
02 Eki 2015 22:02 #2 Son düzenlenme: 02 Eki 2015 22:04 CeeMoo
Alıntı yapılan: snrj - 02 Eki 2015 18:19tema ekibindeki arkadaşlar elinizden öper  :o
@CeeMoo
@Asilkan
http://smf.konusal.com/index.php?topic=48.0 DAha önce yapılmış.

Ayıklamalı :
index template.php
function template_body_above()
{
global $context, $settings, $scripturl, $txt, $modSettings;
Sonrasına ekleyin.
echo '
<div id="top_section">
<div class="frame">';

// If the user is logged in, display some things that might be useful.
if ($context['user']['is_logged'])
{
// Firstly, the user's menu
echo '
<ul class="floatleft" id="top_info">
<li>
<a href="', $scripturl, '?action=profile">', $context['user']['name'], '</a>

</li>';

// Secondly, PMs if we're doing them
if ($context['allow_pm'])
{
echo '
<li>
<a href="', $scripturl, '?action=pm">', $txt['pm_short'], !empty($context['user']['unread_messages']) ? ' <span class="amt">' . $context['user']['unread_messages'] . '</span>' : '', '</a>

</li>';
}


// And now we're done.
echo '
</ul>';
}
// Otherwise they're a guest. Ask them to either register or login.
else
echo '
<ul class="floatleft welcome">
<li>', sprintf($txt[$context['can_register'] ? 'welcome_guest_register' : 'welcome_guest'], $txt['guest_title'], $context['forum_name'], $scripturl . '?action=login', 'return reqOverlayDiv(this.href, ' . JavaScriptEscape($txt['login']) . ');', $scripturl . '?action=register'), '</li>
</ul>';
echo '
</div>
</div>';
Daha sonra css kodlarını ekleyin.
#top_section {
margin: 0;
padding: 0 4px;
border-bottom: 1px solid #bbb;
box-shadow: 0 1px 4px rgba(0,0,0,0.16);
background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
}
#top_section .frame{
clear: both;
}
#top_section .frame:after {
content:"";
display: block;
clear: both;
}
#top_info {
margin: 0;
padding: 5px 9px 4px 9px;
line-height: 1.3em;
width: auto;
}

İstediğiniz kodları malesef bilmiyorum.Bir hata vb.. varsa @snrj temayı yapan ustaya bırakıyorum :)

***

  1. 142

  2. 16

  3. 34

Teşekkür ederim.İlk fırsatta deneyip sonucu yazarım.

***

  1. 142

  2. 16

  3. 34
Ne yazık ki aşağıda ki gibi oldu.Avatarda yok.


*

  1. 1,075

  2. 98

  3. 281
Alıntı yapılan: kimyaci - 02 Eki 2015 22:57Ne yazık ki aşağıda ki gibi oldu.Avatarda yok.


Ben yapayım konusunu açar burdan bildiririm.Bende şuan baktım sadece link bölümleri var.

*

  1. 1,075

  2. 98

  3. 281
@kimyaci

index.template.php Sonrasına
function template_body_above()
{
global $context, $settings, $scripturl, $txt, $modSettings;

ekleyin
echo '
<div id="top_section">
<div class="frame">';

// If the user is logged in, display some things that might be useful.
if ($context['user']['is_logged'])
{
// Firstly, the user's menu
echo '
<ul class="floatleft dropmenuz" id="top_info">
                <li>
<a href="', $scripturl, '?action=profile"', !empty($context['self_profile']) ? ' class="active"' : '', ' id="profile_menu_top" onclick="return false;">';
if (!empty($context['user']['avatar']))
echo $context['user']['avatar']['image'];
echo $context['user']['name'], ' ▼</a>
<ul>
  <div id="profile_menu">
     <div class="profile_user_avatar floatleft">';
if (!empty($context['user']['avatar']))
echo $context['user']['avatar']['image'];
echo '
     </div>
       <div class="profile_user_links">
       <ol>
       <li><a href="http://smf.konusal.com/index.php?action=profile;area=summary;u=56">Profilim</a>
       </li>
       <li><a href="http://smf.konusal.com/index.php?action=profile;area=account;u=56">Hesap Ayarları</a>
       </li>
       <li><a href="http://smf.konusal.com/index.php?action=profile;area=showposts;u=56">İletilerim</a>
       </li>
       <li><a href="http://smf.konusal.com/index.php?action=profile;area=forumprofile;u=56">Forum Profili</a>
       </li>
       <li><a href="http://smf.konusal.com/index.php?action=profile;area=notification;u=56">Haberdar Edilme</a>
       </li>
       <li><a href="http://smf.konusal.com/index.php?action=profile;area=theme;u=56">Görünüm ve Yerleştirme</a>
       </li>
       </ol>
       <br class="clear">
       </div>
  </div>
    </ul>
     </li>';

// Secondly, PMs if we're doing them
if ($context['allow_pm'])
{
echo '
<li>
<a href="', $scripturl, '?action=pm">', $txt['pm_short'], !empty($context['user']['unread_messages']) ? ' <span class="amt">' . $context['user']['unread_messages'] . '</span>' : '', '</a>

</li>';
}


// And now we're done.
echo '
</ul>';
}
// Otherwise they're a guest. Ask them to either register or login.
else
echo '
<ul class="floatleft welcome">
<li>', sprintf($txt[$context['can_register'] ? 'welcome_guest_register' : 'welcome_guest'], $txt['guest_title'], $context['forum_name'], $scripturl . '?action=login', 'return reqOverlayDiv(this.href, ' . JavaScriptEscape($txt['login']) . ');', $scripturl . '?action=register'), '</li>
</ul>';

echo '
</div>
</div>';

Burayı kendinize göre editleyi unutmayın.
                         <ol>
                         <li><a href="http://smf.konusal.com/index.php?action=profile;area=summary;u=56">Profilim</a>;
                         </li>
                         <li><a href="http://smf.konusal.com/index.php?action=profile;area=account;u=56">Hesap Ayarları</a>
                         </li>
                         <li><a href="http://smf.konusal.com/index.php?action=profile;area=showposts;u=56">İletilerim</a>;
                         </li>
                         <li><a href="http://smf.konusal.com/index.php?action=profile;area=forumprofile;u=56">Forum Profili</a>
                         </li>
                         <li><a href="http://smf.konusal.com/index.php?action=profile;area=notification;u=56">Haberdar Edilme</a>
                         </li>
                         <li><a href="http://smf.konusal.com/index.php?action=profile;area=theme;u=56">Görünüm ve Yerleştirme</a>
                         </li>
                         </ol>



Daha sonra css kodlarını ekleyin.
#profile_menu_top > img.avatar {
    border: 1px solid #fff;
    border-radius: 100px;
    float: left;
    height: 35px;
    margin: -6px 5px 0 0;
    padding: 0;
    width: 35px;
}
img.avatar {
    max-height: 65px;
    max-width: 65px;
}
#top_info > li {
    font-size: 0.9em;
    line-height: 1.9em;
}
.top_menu {
    background: #ffffff linear-gradient(to bottom, #f7f7f7 0%, #ffffff 70%) repeat scroll 0 0;
}
.top_menu {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: #ffffff none repeat scroll 0 0;
    border-color: #ccc #999 #999 #bbb;
    border-image: none;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.3);
    display: none;
    font-weight: normal;
    padding: 0.5em;
    position: absolute;
    top: 2.25em;
    width: 18.2em;
    z-index: 90;
}
.top_menu {
    font-weight: normal;
}
#profile_menu .profile_user_avatar img {
    margin: 5px 0 0 10px;
}
#profile_menu .profile_user_info {
    margin: 3px 0 5px 10px;
}
#profile_menu .profile_username {
    display: block;
    font-size: 150%;
    overflow: hidden;
}
#profile_menu .profile_username {
    font-size: 150%;
}
.dropmenuz li ul, .top_menu {
    font-weight: normal;
}
#profile_menu .profile_user_links ol {
    margin: 10px;
}
#profile_menu .profile_user_links li {
    float: left;
    width: 100%;
}
.dropmenuz, #top_info {
float: left;
width: 100%;
position: relative;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
#menu_nav {
padding: 0 40px 0 0;
}
/* Level 1 button background. */
.dropmenuz li, #top_info > li {
margin: 0 2px 0 1px;
padding: 0 0 0.3em 0;
float: left;
font-size: 0.9em;
line-height: 1.9em;
position: relative;
}
/* For cases where we want to spotlight something specific to an item, e.g. an amount */
.dropmenuz li .amt, #top_info li .amt {
margin-left: 3px;
padding: 0 5px;
color: white;
background: #6d90ad;
border-radius: 8px;
}
.dropmenuz li .active .amt, #top_info li .active .amt {
background: none;
color: inherit;
}
#top_info .top_menu.visible {
margin-left: 9999px;
}
/* Needed for new PM notifications. */
.dropmenuz li strong {
color: #333;
}
/* For the upshrink button in the main menu bar. */
#collapse_button {
position: absolute;
top: 0;
right: 0;
}
.dropmenuz li a, #top_info > li > a {
padding: 0 7px 0 7px;
margin: 0 0 0 0;
display: block;
border: 1px solid transparent;
border-radius: 4px;
}
/* Level 1 active button. */
.dropmenuz li a.active, #top_info li a.active {
background: orange;
color: #fff;
font-weight: bold;
border: 1px solid #f49a3a;
box-shadow: 0 5px 5px rgba(255,255,255,0.2) inset;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
}
/* Level 1 hover effects. */
.dropmenuz li a:hover, .dropmenuz li:hover a, .dropmenuz li a:focus, #top_info > li > a:hover, #top_info > li:hover > a, #top_info > li > a.open {
background: #597b9f;
border: 1px solid #4a6b8c;
color: #fff;
cursor: pointer;
text-decoration: none;
box-shadow: 0 4px 4px rgba(255,255,255,0.1) inset;
text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.5);
}
/* Level 1 active button. */
.dropmenuz li a.active:hover, .dropmenuz li:hover a.active {
background: orange;
border: 1px solid #f49a3a;
color: #444;
box-shadow: 0 5px 5px rgba(255,255,255,0.2) inset;
text-shadow: none;
}
/* User information. */
#profile_menu a.avatar {
float: left;
margin: 0 20px 0 10px;
}
#profile_menu a.avatar img {
height: 100%;
width: 100%;
max-width: 50px;
max-height: 50px;
}
#profile_menu .profile_user_info ol {
float: left;
max-width: 70%;
}
#profile_menu .profile_username {
overflow: hidden;
font-size: 150%;
}
#profile_menu .profile_user_links ol {
margin: 10px;
}
#profile_menu .profile_user_links li img {
margin-bottom: -1px;
}
#pm_menu .pm_unread, #alerts_menu .alerts_unread {
margin-top: 2px;
padding-top: 3px;
border-top: 1px solid #ddd;
clear: both;
}
#pm_menu .no_unread, #alerts_menu .no_unread {
padding-top: 3px;
text-align: center;
}
#pm_menu .windowbg, #pm_menu .windowbg2, #alerts_menu .windowbg, #alerts_menu .windowbg2 {
clear: both;
padding: 2px;
}
#pm_menu .pm_unread div > .avatar, #alerts_menu .alerts_unread div > .avatar {
width: 40px;
height: 40px;
margin: 1px 6px 0 1px;
}
#pm_menu .pm_unread .avatar img, #alerts_menu .alerts_unread .avatar img {
width: 100%;
height: 100%;
max-width: 40px;
max-height: 40px;
}
#pm_menu .unread .subject {
font-weight: bold;
}
#pm_menu .unread, #alerts_menu .unread {
border-bottom: 1px solid #ddd;
}
#pm_menu .unread:hover, #alerts_menu .unread:hover  {
background: #eee;
}
#pm_menu .unread:last-of-type, #alerts_menu .unread:last-of-type {
border-bottom: 1px solid transparent;
}
#pm_menu .details, #alerts_menu .details {
max-width: 80%;
}
/* This CSS is for adding top level subsection indicators, just in case anyone wants them. */
/* I'm not that keen on them, but perhaps the commented code should be left as a handy demo. */
/*
#menu_nav>li.subsections>a, #admin_menu .dropmenuz>li.subsections>a {
padding: 0 17px 0 7px;
background: url(../images/selected_open.png) no-repeat 96% 60%;
}
#menu_nav>li.subsections>a.active, #admin_menu .dropmenuz>li.subsections>a.active {
background: orange url(../images/selected_open.png) no-repeat 96% 60%;
}
#menu_nav>li.subsections>a:hover, #menu_nav>li.subsections:hover>a, #menu_nav>li.subsections>a:focus,
#admin_menu .dropmenuz>li.subsections>a:hover, #admin_menu .dropmenuz>li.subsections:hover>a, #admin_menu .dropmenuz>li.subsections>a:focus {
background: #597b9f url(../images/selected_open.png) no-repeat 96% 60%;
}
#menu_nav li.subsections>a.active:hover, #menu_nav li.subsections:hover>a.active, #menu_nav li.subsections>a.active:focus,
#admin_menu .dropmenuz>li.subsections>a.active:hover, #admin_menu  .dropmenuz>li.subsections:hover>a.active, #admin_menu  .dropmenuz>li.subsections>a.active:focus {
background: orange url(../images/selected_open.png) no-repeat 96% 60%;
}
*/
/* Levels 2 and 3 submenu wrapper. */
.dropmenuz li ul, .top_menu {
z-index: 90;
position: absolute;
top: 2.25em;
left: -9999px;
width: 18.2em;
padding: 0.5em;
font-weight: normal;
border: solid 1px #999;
border-left: solid 1px #bbb;
border-top: solid 1px #ccc;
border-radius: 4px;
box-shadow: 3px 3px 4px rgba(0,0,0,0.3);
background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
}
/* Level 2 link background. */
.dropmenuz li li {
margin: 0;
padding: 0;
width: 17em;
position: relative;
float: none;
font-size: 1em;
border-radius: 3px;
border: 1px solid transparent;
}
.dropmenuz li li a {
position: relative;
line-height: 2.2em;
padding: 0 7px;
display: block;
color: #346;
}
.dropmenuz li li a>img {
vertical-align: middle;
margin: 0 0 0 -4px;
}
/* The profile/pm menus are declared off .dropmenuz li ul for consistency but have other characteristics. */
.top_menu {
width: 25em;
}
/* Note: The next declarations are for keyboard access with js disabled. */
.dropmenuz ul a:focus, .dropmenuz ul ul a:focus {
margin-left: 9990px;
border: none;
width: 17em;
}
.dropmenuz ul ul a:focus {
margin-left: 19950px;
}
/* Cancel those for hover and/or js access. */
.dropmenuz ul li:hover a:focus, .dropmenuz ul li.sfhover a:focus {
margin-left: 0;
width: auto;
}
/* Necessary to allow highlighting of 1st level while hovering over submenu. */
.dropmenuz li:hover li a, .dropmenuz li.sfhover li a {
padding: 0 9px;
background: none;
color: #346;
border: none;
}
/* Level 3 submenu wrapper positioning. */
.dropmenuz li ul ul, .dropmenuz li.sfhover ul ul {
margin: -2em 0 0 15.3em;
}
/* Level 3 maintains font-size the same as Level 2. */
.dropmenuz li li li a {
font-size: 1em;
}
/* Levels 2 and 3 hover effects. */
.dropmenuz li li:hover, .adm_section .dropmenuz li li:hover {
border: none;
background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
}
.dropmenuz li li:hover>a, .dropmenuz li li.sfhover a:focus, .dropmenuz li li a:hover, .dropmenuz li li a:focus {
color: #333;
text-decoration: none;
border: 1px solid #cfcfcf;
border-top: 1px solid #d4dee6;
background: -webkit-linear-gradient(bottom, #E2E9F3 1%, #FFFFFF 70%);
background: linear-gradient(to top, #E2E9F3 1%, #FFFFFF 70%);
}
/* Reposition Level 2 submenu as visible on hover. */
.dropmenuz li:hover ul, .dropmenuz li.sfhover ul {
left: 0;
}
/* Hiding Level 3 submenu off hover. */
.dropmenuz li:hover ul ul, .dropmenuz li.sfhover ul ul, .dropmenuz li:hover ul ul ul, .dropmenuz li.sfhover ul ul ul {
left: -9999px;
}
/* Reposition as visible on hover. */
.dropmenuz li li:hover ul, .dropmenuz li li.sfhover ul {
left: -14px;
}
.dropmenuz li li.subsections a:after, .adm_section .dropmenuz li.subsections a:after{
position: absolute;
top: 0.4em;
right: 2px;
width: 12px;
height: 12px;
content: "";
background: url(../images/admin/subsection.png) no-repeat;
}
/* Highlighting of current section */
.dropmenuz li li a.chosen {
font-weight: bold;
}

/* The extra menu rows for admin sections, etc. */
#adm_submenus {
margin: 0 0 6px 0;
padding: 10px 15px 0 15px;
overflow: hidden;
}

#top_section .frame::after {
    clear: both;
    content: "";
    display: block;
}
#top_section .frame {
    clear: both;
}
#top_section {
    background: rgba(0, 0, 0, 0) linear-gradient(to top, #e2e9f3 1%, #ffffff 70%) repeat scroll 0 0;
    border-bottom: 1px solid #bbb;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
    margin: 0;
    padding: 0 4px;
}
ol {
    list-style: outside none none;
}



Kodların  çakışma ihtimali olabilir.

***

  1. 142

  2. 16

  3. 34

Çok teşekkür ederim.Sizi yoruyorum.Aşağıda ki gibi oldu.Benim asıl sitemde logonun üzerini kapladığı için bu bölümü bu şekilde yukarı alacağım.Şu an için çakışma var.Logonunda üzeri beyaz oldu.Ayrıca iki noktada görünüyor.
Asıl sitemde logo ve banner yerlerinde kalacak.Search, üye ismi ve bilgileri, Çevrimiçi süre,Son ziyaretinizden bu yana yazılan mesaj bölümleri var.Onları ve haberler kısmını yukarı almayı hedefliyorum.

Demo:  http://sanal.igo8navigation.com/index.php

*

  1. 1,075

  2. 98

  3. 281
Önemli değil.

index.css 1694 satırda
#top_section {
    margin-bottom: 3px;
    min-height: 65px;
    overflow: hidden;
}
Bu kodları silin.

bide ul sıfırlanmamış.
ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
}
Ekliyerek sorunu çözebiliriz.Genişliğin gittiğini görüceksiniz.#top_section height atarak halledebilirsiniz.

 - Sanırsam istediğiniz bölümleri yukarı ekliyebilirsiniz.Olmaz ise index.template.php paylaşırsanız yapabiliriz

*

  1. 2,984

  2. 579

  3. 860

***

  1. 142

  2. 16

  3. 34
Şimdi daha iyi oldu gerçekten, düzenlemeyi deneme yanılma yoluyla ne kadar yapabilirim bilmiyorum.Asıl sitemin index.template.php dosyamı verirsem aceleye de gerek yok bir ara bakarsanız sevinirim.
Burada ki gibi 3 bölümden oluşturursanız.Şimdiden çok teşekkür ederim.

Birinci bölümde şa an yaptığınız gibi üye adı ve iletilerim kısmı

Orta bölümde bu sitede ki gibi haberler kısmı.

Sağ tarafta ki üçünçü bölümde de alt alta ;
Çevrimiçi Süre : 1 gün, 2 saat ve 47 dakika.
Son ziyaretinizden bu yana 0 mesaj gönderildi.
Sizin mesajlarınıza 6 yeni cevap yazıldı.
Onaylanmamış İletiler

***

  1. 142

  2. 16

  3. 34
CeeMoo arkadaşım verdiğiniz kodlar üzerinde biraz oynama yapmaya çalıştım.Sonuç aşağıdadır.Herşey için teşekkür ederim.Bu alanı sabitlemeye çalıştım ama sabitleyince ana menü altta kalıyor.Sadece bu kaldı.


*

  1. 2,984

  2. 579

  3. 860
yanlış anlamadıysam söylediğinizi (muhtemelen yanlış anladım ama neyse :D)
index.css de bul
div#wrapper {
    margin: 0px auto;
    min-width: 1024px;
    max-width: 2300px;
}
değiştir
div#wrapper {
    margin: 50px auto 0;
    min-width: 1024px;
    max-width: 2300px;
}

bul
#top_sectione {
    background: transparent linear-gradient(to top, #E2E9F3 1%, #FFF 70%) repeat scroll 0px 0px;
    border-bottom: 1px solid #BBB;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
    padding: 4px 40px 2px;
    height: auto;
}

değiştir
#top_sectione {
    background: transparent linear-gradient(to top, #E2E9F3 1%, #FFF 70%) repeat scroll 0px 0px;
    border-bottom: 1px solid #BBB;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
    padding: 4px 40px 2px;
    height: auto;
    position: fixed;
    width: 98%;
    z-index: 999;
    top: 0px;
}

***

  1. 142

  2. 16

  3. 34
snrj arkadaşım tam olarak istediğim buydu.Çok teşekkür ederim.

*

  1. 2,984

  2. 579

  3. 860
Alıntı yapılan: kimyaci - 05 Eki 2015 20:27snrj arkadaşım tam olarak istediğim buydu.Çok teşekkür ederim.

iyi doğru anlamışım :D


MENU ×