SMF 2.1Açılır Kapanır Alt Bölümler (bottom_section_folding_opens_and_closes)

Başlatan replikacep, Oca 05, 2019, 01:53 ös

« önceki - sonraki »
SMF 2.1 İÇİN AÇILIR KAPANIR  alt bölümler  resimdeki gözüktügü gibidir  mod tarafımdan yapılmıştır  güle güle kullanın

Smf  2.1 için  geliştirdigim  bir moddur

made by www.replikacep.com

Version: 2.1 Date 2019

Compatibility: SMF 2.1 RC1

*Add new look for smf 2.1 RC 1

2.1  için  yaptım modu

mod tarafımdan yapılmıştır  :)

MOD : default Temaya  göre tasarlanmıştır  renkler ve  iconları dileyen istedigi temaya göre degiştirebilir  çok az php  bilmeniz yeterli  renkleri ve  butonu saga yada sola  kaydırmak için

https://yadi.sk/d/v1ik4sn2Ame2KQ

örnek :  index.css de modu yükledikten sonra bul 

.dropbtn {
    background-color: #557ea0;
    color: white;
    padding: auto;
    font-size: 14px;
    border: none;
    cursor: pointer;
    border: 1.5px solid #d1994c;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}

aşadakilerle  oynayın

  margin-left: auto;
    margin-right: auto;
    margin-top: auto;
 


örnek :margin-left: auto;  yerine  margin-left: 60px; yaparsak  buton  saga  dogru kayar

yukarı  kaydırmak için : margin-top: auto; yerine  margin-top: -10px; yapın




Görseller


7

7




mobilde  gizlemek istiyorsanız  icon ları


responsive.css de  bul

@media (max-width: 480px) {
altına ekle

.fa-comments-o:before{display: none; }
.dropdown-content a {
 
  color: #557ea0;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family: "Tahoma", sans-serif;
  font-weight: bold;
  line-height: 1.5em;
  margin-left: 2px;
  margin-right: auto;
  margin-top: auto;

}

bu yukarıa verdigim bir örnek tir


buton  büyük diyorsanız

index.css de  bul

.dropbtn {
    background-color: #557ea0;
    color: white;
    padding: auto;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border: 1.5px solid #d1994c;
    margin-left: auto;
    margin-right: auto;
    margin-top: auto;
}



font-size: 16px;  bunu  13 yapın buton küçülür


rica ederim  2.1 çıkmadan  baya bişey  entegre etmeliyim  :)

alt bölümlere icon koymaya ugraşıyorum  yapamadım  :)

global $txt, $scripturl, $context, $settings;

 // Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
 if (!empty($board['children']))
 {
 // Sort the links into an array with new boards bold so it can be imploded.
 $children = array();
 /* Each child in each board's children has:
 id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
 foreach ($board['children'] as $child)
 {
 if (!$child['is_redirect'])
 $child['link'] = '' . ($child['new'] ? '<a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="new_posts">' . $txt['new'] . '</a>' : '') . '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="board_new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . '</a>';
 else
 $child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . ' - ' . $child['short_description'] . '">' . $child['name'] . '</a>';

 // Has it posts awaiting approval?
 if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
 $child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

 $children[] = $child['new'] ? '<span class="strong">' . $child['link'] . '</span>' : '<span>' . $child['link'] . '</span>';
 }

 echo '
 

<script src="', $settings['default_theme_url'], '/scripts/al_dropdown.js"></script>
 <a div id="board_', $board['id'], '_children" class="dropdown">
 <li><i class="fa fa-comments-o"><button onclick="myFunction()" class="dropbtn"><link href="', $settings['default_theme_url'], '/css/all.min.css" rel="stylesheet">', $txt['sub_boards'], ' </i></button></a>
 <div id="myDropdown" class="dropdown-content"> ', implode($children), '
 </div>
 </div>';
 
 
 }


bunu nereye koymalıyım her alt bölümün başında gözükmesi için
<li><i class="fa fa-comments-o">

EDİT : $children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"></i> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#777"></i> ' . $child['link'] . '</span>';
NOT : GÖZÜLDÜ

merhaba burdaki li tağinin bir karsiligi yoksa silin muhtemelen hata verecek.

$children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"></i> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#777"></i> ' . $child['link'] . '</span>';

buranın  içinden çıkamadım  yeni fark ettim    alt bölümler butonuna tıklayın ya  kendi  bölümünde  çekmiyor  muş

orjinali

echo '
<div id="board_', $board['id'], '_children" class="children">
<p><strong id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode($children), '</p>
</div>';

burasıda  edit

<a div id="board_', $board['id'], '_children" class="dropdown">
<button onclick="myFunction()" class="dropbtn" id="child_list_', $board['id'], '">', $txt['sub_boards'], '</button></a>
<div id="myDropdown" class="dropdown-content"> ', implode($children), '   
                         
  </div>';

sanırım yanlış lık yapmışsım


buranın  içinden çıkamadım  yeni fark ettim    alt bölümler butonuna tıklayın abi  2 ci bir alt bölüm acınca fark ettim  butona tıklayınca  id 1  bu bölümü açıyor  tıkladıgın bölümdeki alt bölümleri açmıyor

yani kısacası   2 ci sıradaki alt  bölüm butonuna tıklayınca ilk kategorinin alt bölümü açılıyor  :)
http://demo.replikacepsatis.com/index.php

orjinali

echo '
 <div id="board_', $board['id'], '_children" class="children">
 <p><strong id="child_list_', $board['id'], '">', $txt['sub_boards'], '</strong>', implode($children), '</p>
 </div>';

burasıda  edit

<a div id="board_', $board['id'], '_children" class="dropdown">
 <ul><button onclick="myFunction()" class="dropbtn">', $txt['sub_boards'], ' </button></a>
 <div id="myDropdown" class="dropdown-content"> ', implode($children), ' 
 </div>
  </div>';

sanırım yanlış lık yapmışsım


http://demo.replikacepsatis.com/index.php  abi bi baksan çözemiyorum :)  ftp şifreleri aynı

bu butonu aldıgım yer  : https://www.w3schools.com/howto/howto_js_dropdown.asp

ftp ye erişme şansim şuan yok

BoardIndex.template.php kodlarini
Bununla degisin

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

$children[] = $child['new'] ? '' . $child['link'] . '' : '' . $child['link'] . '';
}

echo '
<div id="board_', $board['id'], '_children" class="children dropdown">
<button onclick="myFunction()" class="dropbtn child_list_', $board['id'], '">', $txt['sub_boards'], '</button><div id="myDropdown" class="dropdown-content">', implode($children), '</div>
</div>';
}
}

index.css ye ekleyin

/* Dropdown Button */
.dropbtn {
  background-color: #3498DB;
  color: white;
  font-size: 12px;
  border: none;
  cursor: pointer;
  padding: 0.4em;
  height: 2em;
  line-height: 0em;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

temanizin theme.js yi acin

üste bunu ekleyin

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown menu if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

aynen ekledim dediginiz gibi degişen bişey olmadı  en üstteki alt bölüm açılıyor aşadaki  alt bölüme tıklayınca    anlam veremiyorum  ne güzel mod  bitti demiştim

abi sen musait oluna  bi bak sana zahmet ftp den


EDİT  : Sorun çözülmüştür


function template_bi_board_children($board)
{
global $txt, $scripturl, $context, $settings;

// Show the "Child Boards: ". (there's a link_children but we're going to bold the new ones...)
if (!empty($board['children']))
{
// Sort the links into an array with new boards bold so it can be imploded.
$children = array();
/* Each child in each board's children has:
id, name, description, new (is it new?), topics (#), posts (#), href, link, and last_post. */
foreach ($board['children'] as $child)
{
if (!$child['is_redirect'])
$child['link'] = '' . ($child['new'] ? '<a href="' . $scripturl . '?action=unread;board=' . $child['id'] . '" title="' . $txt['new_posts'] . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')" class="new_posts">' . $txt['new'] . '</a>' : '') . '<a href="' . $child['href'] . '" ' . ($child['new'] ? 'class="board_new_posts" ' : '') . 'title="' . ($child['new'] ? $txt['new_posts'] : $txt['old_posts']) . ' (' . $txt['board_topics'] . ': ' . comma_format($child['topics']) . ', ' . $txt['posts'] . ': ' . comma_format($child['posts']) . ')">' . $child['name'] . '</i></a>';
else
$child['link'] = '<a href="' . $child['href'] . '" title="' . comma_format($child['posts']) . ' ' . $txt['redirects'] . ' - ' . $child['short_description'] . '">' . $child['name'] . '</a>';

// Has it posts awaiting approval?
if ($child['can_approve_posts'] && ($child['unapproved_posts'] || $child['unapproved_topics']))
$child['link'] .= ' <a href="' . $scripturl . '?action=moderate;area=postmod;sa=' . ($child['unapproved_topics'] > 0 ? 'topics' : 'posts') . ';brd=' . $child['id'] . ';' . $context['session_var'] . '=' . $context['session_id'] . '" title="' . sprintf($txt['unapproved_posts'], $child['unapproved_topics'], $child['unapproved_posts']) . '" class="moderation_link">(!)</a>';

            $children[] = $child['new'] ? '<li><span class="strong"><i class="fa fa-comments-o" style="color:orange"> ' . $child['link'] . '</span>' : '<span><i class="fa fa-comments-o" style="color:#34373b;margin-left: 2px;margin-right: auto;margin-top: 10px;"></i> ' . $child['link'] . '</span>';   
 
  }
           echo'<script> function myFunction_', $board['id'], '() { document.getElementById("myDropdown_', $board['id'], '").classList.toggle("show"); }  
                   window.onclick = function(event) {  if (!event.target.matches(\'.dropbtn\')) { var dropdowns = document.getElementsByClassName("dropdown-content");
               var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i];
               if (openDropdown.classList.contains(\'show\')) { openDropdown.classList.remove(\'show\'); } } } } </script>
                  <link href="', $settings['default_theme_url'], '/css/all.css" rel="stylesheet">
                  <a div id="board_', $board['id'], '_children" class="dropdown">
<ul><button onclick="myFunction_', $board['id'], '()" class="dropbtn">', $txt['sub_boards'], ' </button></a>
<div id="myDropdown_', $board['id'], '" class="dropdown-content"> ', implode($children), ' 
  </div>';
}
}


bu şekil  yaparak çözüldü

Yasal Uyarı

İçerik sağlayıcı paylaşım sitesi olarak hizmet veren webtiryaki.com sitemizde 5651 sayılı kanunun 8. maddesine ve T.C.Knın 125. maddesine göre tüm üyelerimiz yaptıkları paylaşımlardan kendileri sorumludur.webtiryaki.com hakkında yapılacak tüm hukuksal şikayetleri İletişim sayfamızdan bize bildirdikten en geç 3 (üç) iş günü içerisinde ilgili kanunlar ve yönetmelikler çerçevesinde tarafımızca incelenerek gereken işlemler yapılacak ve site yöneticilerimiz tarafından bilgi verilecektir.