Smf 2.1 Hızlı Menü

Started by orhan, Jan 02, 2019, 11:04 am

Previous topic - Next topic

orhan


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

bulun

Code Select
/**
 * 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

Code Select
/**
 * 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

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

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


replikacep

Paylasim icin tesekkurler orhan bey tema editlemek isteyenler sayenizde  birseyler ogrenmis olacak

replikacep

Jan 02, 2019, 03:20 pm #2 Last Edit: Jan 02, 2019, 05:06 pm by replikacep
http://demo.replikacepsatis.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

orhan

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

Code Select
function template_init()
{
global $settings, $txt;

ekleyin

Code Select
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 .


replikacep

hocam beni  ugraştırmasan olmazmı :)  kodları  temandan ayırıp  dosyalarla birlikte atsan  konuya  :)

replikacep

Jan 03, 2019, 11:08 am #5 Last Edit: Jan 03, 2019, 11:33 am by replikacep
http://demo.replikacepsatis.com/index.php  yapamadım bir togaf oldu  :)  yardımınızı bekliyorum orhan bey


Code Select
/**
 * 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

Code Select

.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;
}

orhan

Tamam kendi sistemiyle yapalim

BoardIndex.template ye bunu ekle

Code Select
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

Code Select
/* 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

Code Select
$(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

Code Select
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');
      }
    }
  }
}




replikacep

dediginizi aynen yaptım olmadı

dosyaları kontrol edebilirsiniz
[attach name=Yeni+klasör.zip type=application/zip]43[/attach]

orhan

css kodlarini ekledikten sonra ftp den minified_baslayan.css leri sil

replikacep

Minimize css and JavaScript files


etkin degilki 
css yi kontrol ettim  bu css ler mevcut degil

replikacep

Jan 03, 2019, 11:31 pm #10 Last Edit: Jan 05, 2019, 03:01 am by replikacep
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

Code Select
/**
 * 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

Code Select
/**
 * 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 : 

Code Select
// load in any javascript files from mods and themes
 template_javascript();


altına ekle :

Code Select
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 :
Code Select
function template_init()
{
 global $settings, $txt;

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



index.css ye ekleyin

bu  kodu index.css  nin en başına ekleyin :
Code Select
@import url(https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css);
Code Select
.ts-margin--left-auto {
    margin-left: auto!important;
}

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