Smf 2.1 Hızlı Menü

Merhaba, tekrar hoş geldiniz!

Bilgi sahibi olanlarla ihtiyaç duyanları buluşturmak, farklı bakış açılarına sahip insanları bir araya getirerek birbirlerini daha iyi anlamalarını sağlamak ve herkesin bilgisini paylaşmasını sağlamak istiyoruz.

orhan

Moderator
Katılım
5 Ara 2018
Mesajlar
466
Tepkime puanı
89
Puanları
28
hmenu.png

Merhaba Başliktada belirtiğim gibi kodlar 2.1 serisi için
Ben kodlamada Bootstrap Font Awesome Icons kulandim
BoardIndex.template.php

bulun

Kod:
/**
 * Outputs the board info for a standard board or redirect.
 *
 * @param array $board Current board information.
 */
function template_bi_board_info($board)
{
	global $context, $scripturl, $txt;

	echo '
						<a class="subject mobile_subject" href="', $board['href'], '" id="b', $board['id'], '">
							', $board['name'], '
							<p class="board_description mobile_display">', $board['description'], '</p>
						</a>';

değiştirin

Kod:
/**
 * Outputs the board info for a standard board or redirect.
 *
 * @param array $board Current board information.
 */
function template_bi_board_info($board)
{
	global $context, $scripturl, $txt;

	echo '<div class="ts-display--flex ts-align-items--center">
						<a class="subject mobile_subject" href="', $board['href'], '" id="b', $board['id'], '">
							', $board['name'], '
							<nav class="ts-padding--left-16 ts-margin--left-auto">
						<a href="javascript:void(0)" data-toggle="dropdown" class="icon" aria-expanded="false">
						<i class="fas fa-ellipsis-v"></i></a>
						<div class="dropdown-menu dropdown-menu-right">
						<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '" class="dropdown-item"> <i class="dropdown-icon fas fa-info-circle"></i> ' ,$txt['notify'], ' </a>
						<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '"class="dropdown-item" > <i class="dropdown-icon fas fa-check"></i> ', $txt['mark_read_short'], '</a>
						<a href="', $scripturl, '?action=unread;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon far fa-lightbulb"></i> ' ,$txt['last_post'], '</a>
						<div class="dropdown-divider"></div> <a href="' . $scripturl . '?action=post;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon fas fa-edit"></i> ' ,$txt['new_topic'], '</a>
						</div> </nav></div>
							<p class="board_description mobile_display">', $board['description'], '</p>
						</a>';

index.css ye ekleyin

Kod:
.ts-margin--left-auto {
    margin-left: auto!important;
}

Kod:
.ts-display--flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

 
Paylasim icin tesekkurler orhan bey tema editlemek isteyenler sayenizde  birseyler ogrenmis olacak
 
http://demo.replikacep.com/index.php  denedim olmadı  sebebi css  denmi aceba  eksik bişeyler vvar  ama çözemedim  :)

sanırım css  eksik kodlar  tam emin degilim  fontawesome  nereden çekecegi vs eklenmemiş 

<link href="//demo.replikacepsatis.com/Themes/default/css/fontawesome.min.css" rel="stylesheet">

örnek
 
merhaba yazida belirtim  Bootstrap Font Awesome Icons  kutüphanesine göre yapildi diye sitenizde font icon var sanirim yanliş kulanilmiş index.template.php de
bu kodun altina

Kod:
function template_init()
{
	global $settings, $txt;

ekleyin

Kod:
loadCSSFile('all.css');

all.css yi css dosyasina webfonts dosyasini tema ana dizinine atin ikon olayi hal olacak Bootstrap kutuphanesi olmadiği icin calişmayacak bunuda css ile cözelim BURDA kod yazdim bakarak temaniza uyarlayin .

 
hocam beni  ugraştırmasan olmazmı :)  kodları  temandan ayırıp  dosyalarla birlikte atsan  konuya  :)
 
http://demo.replikacepsatis.com/index.php  yapamadım bir togaf oldu  :)  yardımınızı bekliyorum orhan bey


Kod:
/**
 * Outputs the board info for a standard board or redirect.
 *
 * @param array $board Current board information.
 */
function template_bi_board_info($board)
{
 global $context, $scripturl, $txt, $settings;

 echo '<div class="ts-display--flex ts-align-items--center">
 <link href="', $settings['default_theme_url'], '/css/all.css"; rel="stylesheet">
 <a class="subject mobile_subject" href="', $board['href'], '" id="b', $board['id'], '">
 ', $board['name'], '
 
 <nav class="ts-padding--left-16 ts-margin--left-auto"><div class="dropdown">
 
 <a href="javascript:void(0)" data-toggle="dropdown" class="icon" aria-expanded="false">
 
 <i class="fas fa-ellipsis-v"></i></a>

 <div class="dropdown-content">
 <div class="dropdown-menu dropdown-menu-right">
 <a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '" class="dropdown-item"> <i class="dropdown-icon fas fa-info-circle"></i> ' ,$txt['notify'], ' </a>
 <a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '"class="dropdown-item" > <i class="dropdown-icon fas fa-check"></i> ', $txt['mark_read_short'], '</a>
 <a href="', $scripturl, '?action=unread;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon far fa-lightbulb"></i> ' ,$txt['last_post'], '</a>
 <div class="dropdown-divider"></div> <a href="' . $scripturl . '?action=post;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon fas fa-edit"></i> ' ,$txt['new_topic'], '</a>
 
                            </div> </nav></div>
 <p class="board_description mobile_display">', $board['description'], '</p>
 </a>';




index css

Kod:
.ts-margin--left-auto {
    margin-left: auto!important;
}
.ts-display--flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

/* Style The Dropdown Button */
@import url(http://demo.replikacepsatis.com/Themes/default/css/all.css);
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}


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

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: .125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
}

/* 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: #f1f1f1}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
.dropdown-content {
  right: 0;
}
 
Tamam kendi sistemiyle yapalim

BoardIndex.template ye bunu ekle

Kod:
function template_bi_board_info($board)
{
	global $context, $scripturl, $txt;

	echo '<div class="ts-display--flex ts-align-items--center">
						<a class="subject mobile_subject" href="', $board['href'], '" id="b', $board['id'], '">
							', $board['name'], '
							<nav class="ts-padding--left-16 ts-margin--left-auto">
						<a href="myFunction()" data-toggle="dropdown" class="dropbtn">
						<i class="fas fa-ellipsis-v"></i></a>
						<div class="dropdown-menu dropdown-menu-right">
						<a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '" class="dropdown-item"> <i class="dropdown-icon fas fa-info-circle"></i> ' ,$txt['notify'], ' </a>
						<a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '"class="dropdown-item" > <i class="dropdown-icon fas fa-check"></i> ', $txt['mark_read_short'], '</a>
						<a href="', $scripturl, '?action=unread;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon far fa-lightbulb"></i> ' ,$txt['last_post'], '</a>
						<div class="dropdown-divider"></div> <a href="' . $scripturl . '?action=post;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon fas fa-edit"></i> ' ,$txt['new_topic'], '</a>
						</div> </nav></div>
							<p class="board_description mobile_display">', $board['description'], '</p>
						</a>';

index.css ye bunu ekleyin

Kod:
/* Dropdown Button */
.dropbtn {
  color: #6a6565;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  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;}
.ts-margin--left-auto {
    margin-left: auto!important;
}
.ts-display--flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}

theme.js ye

bu kodun ustune

Kod:
$(function() {
	$('ul.dropmenu, ul.quickbuttons').superfish({delay : 250, speed: 100, sensitivity : 8, interval : 50, timeout : 1});

	// tooltips
	$('.preview').SMFtooltip();

	// find all nested linked images and turn off the border
	$('a.bbc_link img.bbc_img').parent().css('border', '0');
});

bunu ekleyin

Kod:
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');
      }
    }
  }
}



 
css kodlarini ekledikten sonra ftp den minified_baslayan.css leri sil
 
Minimize css and JavaScript files


etkin degilki 
css yi kontrol ettim  bu css ler mevcut degil
 
orhan ben ben çalıştıramadım  dediginizi aynen yaptım  anlam veremiyorum  çalışmıyor  isterseniz ftp vereyim siz  kontrol edin  bölümlerdeki  ikona  tıklayınca  : http://demo.replikacepsatis.com/myFunction()  böyle yönleniyor

sagulun orhan bey  olay çözülmüştür  :)

kodları arındırıp paylaştım lazım  olan olursa kullansın

BoardIndex.template.php

bulun

Kod:
/**
 * Outputs the board info for a standard board or redirect.
 *
 * @param array $board Current board information.
 */
function template_bi_board_info($board)
{
 global $context, $scripturl, $txt;

 echo '
 <a class="subject mobile_subject" href="', $board['href'], '" id="b', $board['id'], '">
 ', $board['name'], '
 <p class="board_description mobile_display">', $board['description'], '</p>
 </a>';

değiştirin

Kod:
/**
 * Outputs the board info for a standard board or redirect.
 *
 * @param array $board Current board information.
 */
function template_bi_board_info($board)
{
 global $context, $scripturl, $txt, $settings;

 echo '<div class="ts-display--flex ts-align-items--center">
 <a class="subject mobile_subject" href="', $board['href'], '" id="b', $board['id'], '"><link href="', $settings['default_theme_url'], '/css/all.css"; rel="stylesheet">
 ', $board['name'], '
 <nav class="ts-padding--left-16 ts-margin--left-auto">
 <a href="javascript:void(0)" data-toggle="dropdown" class="icon" aria-expanded="false">
 <i class="fas fa-ellipsis-v"></i></a>
 <div class="dropdown-menu dropdown-menu-right">
 <a href="', $scripturl, '?action=unread" title="', $txt['unread_since_visit'], '" class="dropdown-item"> <i class="dropdown-icon fas fa-info-circle"></i> ' ,$txt['notify'], ' </a>
 <a href="', $scripturl, '?action=unreadreplies" title="', $txt['show_unread_replies'], '"class="dropdown-item" > <i class="dropdown-icon fas fa-check"></i> ', $txt['mark_read_short'], '</a>
 <a href="', $scripturl, '?action=unread;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon far fa-lightbulb"></i> ' ,$txt['last_post'], '</a>
 <div class="dropdown-divider"></div> <a href="' . $scripturl . '?action=post;board=', $board['id'], '" class="dropdown-item"><i class="dropdown-icon fas fa-edit"></i> ' ,$txt['new_topic'], '</a>
 </div> </nav></div>
 <p class="board_description mobile_display">', $board['description'], '</p>
 </a>';



index.template.php  de bul : 

Kod:
// load in any javascript files from mods and themes
 template_javascript();


altına ekle :

Kod:
echo '
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>';

bul :
Kod:
function template_init()
{
 global $settings, $txt;

Kod:
altına ekle : loadCSSFile('all.css');




index.css ye ekleyin

bu  kodu index.css  nin en başına ekleyin :
Kod:
@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);

Kod:
.ts-margin--left-auto {
    margin-left: auto!important;
}

Kod:
.ts-display--flex {
    display: -webkit-box!important;
    display: -ms-flexbox!important;
    display: flex!important;
}
 
memurhocam' Alıntı:
Hocam Bu kodlar menü kısmını mı düzenliyor  :eek:  :-\

Hayır üstteki resme iyi bakin anlarsınız kategoriler için hızlı menü
 
Geri
Üst Alt