smf 2.0.x link ağacı css navigation

index.template.php de bul

Kod Seç Genişlet

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' »';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

değiştir

Kod Seç Genişlet

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="breadcrumb">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '';
}
echo '
</div><script src="', $settings['theme_url'], '/scripts/prefixfree-1.0.7.js" type="text/javascript"></script>';

$shown_linktree = true;
}
index.css de en alta ekle

Kod Seç Genişlet

.breadcrumb {
/*centering*/
display: inline-block;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
/*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
counter-reset: flag;
}

.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 11px;
line-height: 25px;
color: white;
/*need more margin on the left of links to accomodate the numbers*/
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb a:first-child {
padding-left: 40px;
border-radius: 5px 0 0 5px; /*to match with the parent's radius*/
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/
padding-right: 20px;
}

/*hover/active styles*/
.breadcrumb a.active, .breadcrumb a:hover{
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -11px; /*half of square's length*/
/*same dimension as the line-height of .breadcrumb a */
width: 26px;
height: 25px;
/*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
if diagonal required = 1; length = 1/1.414 = 0.707*/
transform: scale(0.707) rotate(45deg);
/*we need to prevent the arrows from getting buried under the next link*/
z-index: 1;
/*background same as links but the gradient will be rotated to compensate with the transform applied*/
background: #666;
background: linear-gradient(135deg, #666, #333);
/*stylish arrow design using box shadow*/
box-shadow:
2px -2px 0 2px rgba(0, 0, 0, 0.4),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
/*
5px - for rounded arrows and
50px - to prevent hover glitches on the border created using shadows*/
border-radius: 0 5px 0 50px;
}
/*we dont need an arrow after the last link*/
.breadcrumb a:last-child:after {
content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb a:before {
content: counter(flag, decimal);
counter-increment: flag;
border-radius: 100%;
width: 15px;
height: 15px;
line-height: 15px;
margin: 5px 0px;
position: absolute;
top: 0px;
left: 30px;
background: transparent linear-gradient(#444, #222) repeat scroll 0% 0%;
font-weight: bold;
text-align: center;
}


.flat a, .flat a:after {
background: white;
color: black;
transition: all 0.5s;
}
.flat a:before {
background: white;
box-shadow: 0 0 0 1px #ccc;
}
.flat a:hover, .flat a.active,
.flat a:hover:after, .flat a.active:after{
background: #1B9BFF;
}

beyaz olsun isteyen arkadaşlar index.template.php bul

Kod Seç Genişlet

echo '
<div class="breadcrumb">';değiştir

Kod Seç Genişlet

echo '
<div class="breadcrumb flat">';

ekteki js dosyasını temanızın script klasörüne atınız

Bu ne ise yariyor bilen varmi

Benim site de "Konu:" diye bir yazı çıkıyor.Bu neden ile sonda bulunan konu ismi resimde ki gibi aşağı kayıyor.

modlardan biri veya display.php ,display.tempalte.php kodlarında linktree ekleme yapıyor konu içinde onu bulmak lazım

Display.php den geliyor.Ayrıca Mesaj yazarken Önizleme yapıldığında da link ağacı bozuluyor.

Kod Seç Genişlet

    // Build the link tree.
   $context['linktree'][] = array(
      'url' => $scripturl . '?topic=' . $topic . '.0',
      'name' => $topicinfo['subject'],
      'extra_before' => $settings['linktree_inline'] ? $txt['topic'] . ': ' : ''
   );

tam emin değilim ama kimyacı şu şekilde bir değiştirin

Kod Seç Genişlet

// Build the link tree.
$context['linktree'][] = array(
'url' => $scripturl . '?topic=' . $topic . '.0',
'name' => $topicinfo['subject'],
'extra_before' => $settings['linktree_inline'] ? ' : ' : ''
);

Ben de birçok deneme yaptım.Sizin verdiğiniz kodları da denedim.Konu içerisinde resimde de görüldüğü gibi iki nokta kalıyor.



Ayrıca önizlemede konu ismi tekrardan yazıldığı için bir kayma söz konusudur.

iki noktayı silmek için alttaki şekilde yapın

Kod Seç Genişlet

'extra_before' => $settings['linktree_inline'] ? ' ' : ''
diğeri için post templateyi düzenlemek gerekecek sanırım

iki noktayı silmek için alttaki şekilde yapın

Kod Seç Genişlet

'extra_before' => $settings['linktree_inline'] ? ' ' : ''
diğeri için post templateyi düzenlemek gerekecek sanırım

Evet bu şekilde nokta gitti.Fakat Önizleme sorunu aynı şekilde çıkıyor.Teşekkürler.

İndex_template.php deki kodu aşağıda ki gibi değiştirdim.Şimdi normal görünüyor.

Kod Seç Genişlet

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="breadcrumb flat">';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo '';

}
echo '
</div>
<script type="text/javascript" src="', $settings['default_theme_url'], '/scripts/prefixfree-1.0.7.js"></script>';

$shown_linktree = true;
}

Üstad burada ki index.template.php içerikleri teknoromi plus da yok fakat default tema da var . Default da değiştirdim olmadı . Acaba ben mi hata yaptım . Dosya ekinde temya ait  index.template.php paylaşıyorum .

Kod Seç Genişlet

// Show a linktree. This is that thing that shows "My Community | General Category | General Discussion"..
function theme_linktree($force_show = false)
{
global $context, $settings, $options, $shown_linktree;

// If linktree is empty, just return - also allow an override.
if (empty($context['linktree']) || (!empty($context['dont_default_linktree']) && !$force_show))
return;

echo '
<div class="navigate_section">
<ul>';

// Each tree item has a URL and name. Some may have extra_before and extra_after.
foreach ($context['linktree'] as $link_num => $tree)
{
echo '
<li', ($link_num == count($context['linktree']) - 1) ? ' class="last"' : '', '>';

// Show something before the link?
if (isset($tree['extra_before']))
echo $tree['extra_before'];

// Show the link, including a URL if it should have one.
echo $settings['linktree_link'] && isset($tree['url']) ? '
<a href="' . $tree['url'] . '"><span>' . $tree['name'] . '</span></a>' : '<span>' . $tree['name'] . '</span>';

// Show something after the link...?
if (isset($tree['extra_after']))
echo $tree['extra_after'];

// Don't show a separator for the last one.
if ($link_num != count($context['linktree']) - 1)
echo ' »';

echo '
</li>';
}
echo '
</ul>
</div>';

$shown_linktree = true;
}

index.css deki kodları de ekledinizmi?

Evet ekledim ama olmadı .  Görüntü yanda ki gibiydi hala aynı .

Ekte ki dosyayı bir deneyiniz lütfen.

Ayrıca themanızın "scripts" klasörüne "prefixfree-1.0.7.js" dosyasını atmayı unutmayınız.

Ekte ki dosyayı bir deneyiniz lütfen.

Ayrıca themanızın "scripts" klasörüne "prefixfree-1.0.7.js" dosyasını atmayı unutmayınız.

Üstad denedim olmadı . yanda ki gibi göründü