Gönderen Konu: Butonlara Mobil Özelikli Ekleme [Smf 2.0]  (Okunma sayısı 67 defa)

Çevrimdışı orhan

  • Yönetici
  • Trade Sayısı: (0)
  • *
  • İleti: 384
  • Karma +19/-1
  • Cinsiyet: Bay
    • Profili Görüntüle
    • webtiryaki.com
Butonlara Mobil Özelikli Ekleme [Smf 2.0]
« : 23 Eyl 2016, 16:00:33 »
Merhaba Bu dersimizde sizlere smf'de var olan buton sistemini font icon kulanarak mobil uyumlu seo dostu butonlara donuştrmeyi göstericem.
Öncelikle bu konuyu ve bu konuyu Okuduğunuzu farz ederek (Mutlaka Okuyun) başliyorum.
Tema butonlarimizin normal görüntuleri resimdeki gibi




Temamizin index.template.php sini aciyoruz

Bulalim

Kod: [Seç]
// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;

if (!is_array($strip_options))
$strip_options = array();

// List the buttons in reverse order for RTL languages.
if ($context['right_to_left'])
$button_strip = array_reverse($button_strip, true);

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '
<li><a' . (isset($value['id']) ? ' id="button_strip_' . $value['id'] . '"' : '') . ' class="button_strip_' . $key . (isset($value['active']) ? ' active' : '') . '" href="' . $value['url'] . '"' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '><span>' . $txt[$value['text']] . '</span></a></li>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '
<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
implode('', $buttons), '
</ul>
</div>';
}

Değiştirelim

Kod: [Seç]
// Generate a strip of buttons.
function template_button_strip($button_strip, $direction = 'top', $strip_options = array())
{
global $settings, $context, $txt, $scripturl;

if (!is_array($strip_options))
$strip_options = array();

// List the buttons in reverse order for RTL languages.
if ($context['right_to_left'])
$button_strip = array_reverse($button_strip, true);

// Create the buttons...
$buttons = array();
foreach ($button_strip as $key => $value)
{
if (!isset($value['test']) || !empty($context[$value['test']]))
$buttons[] = '
<li><a' . (isset($value['id']) ? ' id="button_strip_' . $value['id'] . '"' : '') . ' class="button_strip_' . $key . (isset($value['active']) ? ' active' : '') . '" href="' . $value['url'] . '"' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '><i class="fa fa-'.$key.' fa-fw"></i><span>' . $txt[$value['text']] . '</span></a></li>';
}

// No buttons? No button strip either.
if (empty($buttons))
return;

// Make the last one, as easy as possible.
$buttons[count($buttons) - 1] = str_replace('<span>', '<span class="last">', $buttons[count($buttons) - 1]);

echo '
<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul class="nav nav-pills">',
implode('', $buttons), '
</ul>
</div>';
}

Burda ne yaptik onu anlatayim font icon kulanimi dersimizde fa larin işlevini anlatmiştik
Buton kodlarimizin arasina '.$key.' ozeliğini kulanarak kodlarimizi ekledik <i class="fa fa-'.$key.' fa-fw"></i>

Şimdi index.css dosyamizda bunlara cilas ekleyelim tek tek anatmiyorum uzun surer direk kodlari vereyim

Kod: [Seç]
/*icons*/
.fa-help:before{content:"\f059"}
.fa-admin:before{content:"\f0b1"}
.fa-moderate:before{content:"\f085"}
.fa-profile:before{content:"\f007"}
.span-profiler:before{content:"\f007"}
.fa-pm:before{content: "\f0e0"}
.fa-mlist:before, .fa-view_all_members:before{content:"\f0c0"}
.fa-mlist_search:before{content: "\f002";}
.fa-logout:before{content:"\f08b"}
.fa-register:before{content:"\f040"}
.fa-login:before{content:"\f007"}
.fa-add_poll:before{content:"\f0ae"}
.fa-new_poll:before{content:"\f0ae"}
.fa-notify:before{content:"\f0f3"}
.fa-unnotify:before{content:"\f0a2"}
.fa-mark_unread:before{content:"\f00c"}
.fa-mark_as_read:before{content:"\f00c"}
.fa-send_topic:before{content:"\f0e0"}
.fa-mark_read_short:before{content:"\f00c"}
.fa-new_topic:before{content:"\f040"}
.fa-move_topic:before{content:"\f07c"}
.fa-remove_topic:before{content:"\f014"}
.fa-set_lock:before{content:"\f023"}
.fa-set_sticky:before{content:"\f046"}
.fa-set_nonsticky:before{content:"\f046"}
.fa-merge:before{content:"\f0ec"}
.fa-set_unlock:before{content:"\f09c"}
.fa-poll_lock:before {content: "\f023";}
.fa-poll_edit:before{content: "\f044";}
.fa-poll_remove:before {content: "\f00d";}
.fa-calendar_link:before {content: "\f073";}
.fa-check:before, .fa-markread:before {content: "\f00c";}
.fa-signal:before, .fa-add_poll:before, .fa-post_poll:before, .fa-results:before {content: "\f012";}
.fa-arrow-right:before, .fa-move:before {content: "\f061";}
.fa-trash:before, .fa-delete:before {content: "\f1f8";}
.fa-thumb-tack:before, .fa-sticky:before {content: "\f08d";}
.fa-fw {
    margin-right: 5px;
}
ikonlarimizi ekledik sira geldi ikon sistemini irenove etmeye malum sistem main_block girafigini kulaniyor biz bu yuktende kurtulalim css'ile zevkimize göre renkte boyda hoverli kisacasi hayal gücünuze kalmiş butonlar yapalim

temamizin index.css'inde
bulalim

Kod: [Seç]
/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a
{
display: block;
font-size: 0.8em;
color: #000;
background: #e8e8e8 url(../images/theme/menu_gfx.png) no-repeat 0 -60px;
padding: 0 0 0 8px;
margin-left: 12px;
text-transform: uppercase;
cursor: pointer;
}
.buttonlist ul li a:hover
{
background: url(../images/theme/menu_gfx.png) no-repeat 0 0;
color: #fff;
text-decoration: none;
}
.buttonlist ul li a span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -60px;
display: block;
height: 19px;
line-height: 19px;
padding: 0 8px 0 0;
}
.buttonlist ul li a:hover span
{
background: #fff url(../images/theme/menu_gfx.png) no-repeat 100% 0;
}
/* the active one */
.buttonlist ul li a.active
{
background: #5a6c85 url(../images/theme/menu_gfx.png) no-repeat 0 -90px;
color: #fff;
font-weight: bold;
}
.buttonlist ul li a.active span
{
background: url(../images/theme/menu_gfx.png) no-repeat 100% -90px;
}
.buttonlist ul li a.active
{
font-weight: bold;
}
.buttonlist ul li a.active:hover
{
color: #ddf;
}

Değişelim
Kod: [Seç]
/* Styles for the standard button lists.
------------------------------------------------------- */

.buttonlist ul
{
z-index: 100;
padding: 5px;
margin: 0 0.2em 5px 0;
}
.buttonlist ul li
{
margin: 0;
padding: 0;
list-style: none;
float: left;
}
.buttonlist ul li a {
    display: block;
    border: 1px solid #2196F3;
    border-radius: 3px;
    font-size: 110%;
    color: #00BCD4;
    padding: 2px 6px;
    margin-left: 12px;
    cursor: pointer;
    transition: 0.4s ease;
}
.buttonlist ul li a:hover
{
background: #2e94ab !important;
color: #fff;
text-decoration: none;
}
/* the active one */
.buttonlist ul li a.active
{
background: #2e94ab;
color: #fff;
font-weight: bold;
}
.buttonlist ul li a.active
{
font-weight: bold;
}
.buttonlist ul li a.active:hover
{
color: #f8f8f8;
}
Bakalim nasil bir göruntu yakaladik



Evet görüldüğü gibi girafik'lerden kurtulduk şik ve güzel artik rengini kafaniza göre düzenleyin.

Sira geldi ikonlarimiza butonlarimiz  mobil gösterimde yazilarin görunmemesi lazim yanliz ikonlar görunecek bunun icin index.template ye kod eklerken 2 yerde değişiklik yaptik biri icon kodlari digeri yazi yani
Bu kodlara

Kod: [Seç]
<div class="buttonlist', !empty($direction) ? ' float' . $direction : '', '"', (empty($buttons) ? ' style="display: none;"' : ''), (!empty($strip_options['id']) ? ' id="' . $strip_options['id'] . '"': ''), '>
<ul>',
class ekledik
<ul class="nav nav-pills">

Bu ne isimize yaradi?

kod  mobilde yazilari gizlememize yarayacak
index.css'mizi acalim en alta kodu ekliyelim

Kod: [Seç]
@media (max-width: 991px){
.buttonlist li span {
    display: none;
}
}
Bu kadar
sayfamizin normal hali



buda mobil hali



Bir başka anlatımda görüşmek üzre.