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/.
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
aşadakilerle oynayın
ö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
mobilde gizlemek istiyorsanız icon ları
responsive.css de bul
altına ekle
bu yukarıa verdigim bir örnek tir
buton büyük diyorsanız
index.css de bul
font-size: 16px; bunu 13 yapın buton küçülür
güncelleme :
*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/.
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
Kod Seç
.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
Kod Seç
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
mobilde gizlemek istiyorsanız icon ları
responsive.css de bul
Kod Seç
@media (max-width: 480px) {altına ekle
Kod Seç
.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
Kod Seç
.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 :
Kod Seç
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>';
}
}
