SMF 2.1Açılır Kapanır Alt Bölümler (Dropdown Button Window Child Boards Mode)

Başlatan tekyürek, 05 Mar 2019, 13:57

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.

tekyürek

Dropdown_Button_Window_Child_Boards_Mode

*Producer: Replikacep*
*helper - authors :@PALAUDIS @tarantula901*
*Version: 2.1 Date 23.01.2019
*Compatibility: SMF 2.1 RC 1*
*Add new look for SMF 2.1 RC1*

The mod implements the following changes

Subsections: adds buttons to open and close
Font Awesome was used for free. And JavaScript was also used when making the mode.
sub-sections when you click the button, the sections are opened sequentially. and the message number and the subject number have been added.
the sub-section opens and closes and adds new message icons
Sub-sections are opened and The Shape of the claws are closed. and the subject makes the display of the number of posts elegant.
Yes the new sub-section and message sequence numbers are designed for SMF 2.1
Labor spent 2 days

Made with the infrastructure used here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown




Smf  2.1 için  geliştirdigim  bir moddur

made by www.replikacep.com

modun yapımında yardım eden yazarlar :@PALAUDIS @tarantula901

Version: 2.1 Date 2019

Compatibility: SMF 2.1 RC2

*Add new look for smf 2.1 RC 2

2.1  için  yaptım modu

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

This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License. To view a copy of this license, visit http://creativecommons.org/licenses/by-nc-nd/4.0/.
Creative Commons License
Replikacep by Pop-up window mode for sub-sections is licensed under a Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International License.
Based on a work at  Replikacep
Permissions beyond the scope of this license may be available at  simplemachines.org

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

Modu indir  : Dowloand


ö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



güncelleme :

            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'] = '<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'] . ($child['new'] ? '<span class="new_posts">' . $txt['new'] . '</i></a><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']) . ')">' : '') . '</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 amt">!</a>';

            $children[] = $child['new'] ? '<span class="strong"><i class="fal fa-comment-alt-smile" style="color:#34373b;margin-right: auto;line-height: 1.4em;padding: 5px 0px;text-shadow: 1px 1px .5px rgba(109,66,5,.5);"> ' . $child['link'] . '</span>' : '<span><i class="fal fa-comment-alt-smile" style="color:#34373b;margin-left: 2px;margin-right: auto;margin-top: 5px;"></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>
                  <a id="board_', $board['id'], '_children" class="dropdown" title="', $txt['sub_boards'], '"></a>
                    <div class="kanka"><button onclick="myFunction_', $board['id'], '()" class="dropbtn">', $txt['sub_boards'], ' <span class="replikacep-caret"></span></button>
                    <p id="myDropdown_', $board['id'], '" class="dropdown-content"> ', implode($children), ' 
                      </p></div>';                                               
    }
}

PALAUDIS

Üstüne açması sıkıntı dostum.. Kodlarında display:absulute; kullanmanı tavsiye ederim. Bi ara bu sıkıntıyı giderelim. ama mantıken işlem güzel  ;) eline sağlık

tekyürek

Alıntı yapılan: Palaudis - 05 Mar 2019, 19:21Üstüne açması sıkıntı dostum.. Kodlarında display:absulute; kullanmanı tavsiye ederim. Bi ara bu sıkıntıyı giderelim. ama mantıken işlem güzel  ;) eline sağlık

 position: absolute;  ekli ama  nedense çalışmıyor   alıp  kullandıgım yer  : https://www.w3schools.com/howto/howto_js_dropdown.asp

PALAUDIS

Alıntı yapılan: tekyürek - 05 Mar 2019, 21:36position: absolute;  ekli ama  nedense çalışmıyor   alıp  kullandıgım yer  : https://www.w3schools.com/howto/howto_js_dropdown.asp
Tamam ben bi bakayım kodlarına bu akşam  ;)

tekyürek

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>';
 
 
 }
alt bölümlere icon koymaya ugraşıyorum  yapamadım
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">

PALAUDIS

Bu kodlarla oyna
$children[] = $child['new'] ? '<span class="strong">' . $child['link'] . '</span>' : '<span>' . $child['link'] . '</span>';
 }
<span class="strong">yeni olduğunda
<span> normal görünüşüdür.

buna göre icon renginide değiştirebilirsin. yeni olduğunda turuncu olur mesela

<span class="strong" style="color:orange"> gibi mesela

tekyürek

bana örnek verirmisin  

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

position: absolute;  olayını çözdüm  bu arada

PALAUDIS

Bunu aynen dene
$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>';


PALAUDIS

O alanı
echo '
<p class="board_description">', $board['description'], '</p>';
bunun altına al.. ama bu alana dokunmadan... Daha düzenli görünecek

tekyürek

 
Alıntı yapılan: Palaudis - 07 Mar 2019, 18:29O alanı
echo '
<p class="board_description">', $board['description'], '</p>';
bunun altına al.. ama bu alana dokunmadan... Daha düzenli görünecek

Anlamadim dediginizi 

tarantula901

Yapmış olduğunuz alt kategori olayını paladusun söylediği kodların altına al demek istiyor.
Sitenizde işlem yapmadan önce mutlaka yedek alın, yedek alın yedek almayı unutmayın her şeyden önce bu önemli

Pm'den ve Skype'den istenilen destekler ücretlidir. Ücret ödememek için lütfen sitede sorunuzu konu açarak sorabilirsiniz.

Ücretli Smf Destek İçin

tekyürek

Modu son kez Güncelledim   alt bölümler ve  konu ve ileti sayısı eklenmiştir  güle güle  kullanın

 

tarantula901

Sitenizde işlem yapmadan önce mutlaka yedek alın, yedek alın yedek almayı unutmayın her şeyden önce bu önemli

Pm'den ve Skype'den istenilen destekler ücretlidir. Ücret ödememek için lütfen sitede sorunuzu konu açarak sorabilirsiniz.

Ücretli Smf Destek İçin

tekyürek

Alıntı yapılan: tarantula901 - 08 Mar 2019, 21:47Güzel paylaşım olmuş. Devamını bekleriz.

Rica ederim admin id olayini siz yardim etmeseniz çozemezdim belkide simdiye :d

Devam edecek tabiki font icon heryerde kullanacagim