Smf tablı istatistik alanı css3 (11 Animations)

şuan sitemizde kullandığımız tablı istatistik modudur ilerde değişebilir
demo kaldırıldı
11 farklı animasyon şekli vardır altta nasıl değiştirmeniz gerektiğini söylecem
boardindex.template.php de
bul

Kod Seç Expand

template_info_center();
}değiştir

Kod Seç Expand

echo'<br class="clear" /><div class="sky-tabs sky-tabs-pos-top-left sky-tabs-anim-flip sky-tabs-response-to-icons">
 <input checked="checked" name="sky-tabs" id="sky-tab1" class="sky-tab-content-1" type="radio">
 <label for="sky-tab1"><span><span>', $txt['online_users'], '</span></span></label>
 
 <input  name="sky-tabs" id="sky-tab2" class="sky-tab-content-2" type="radio">
 <label for="sky-tab2"><span><span>', $txt['forum_stats'], '</span></span></label>
 <input name="sky-tabs" id="sky-tab3" class="sky-tab-content-3" type="radio">
 <label for="sky-tab3"><span><span>Son Üyeler</span></span></label>
 
 <input name="sky-tabs" id="sky-tab4" class="sky-tab-content-4" type="radio">
 <label for="sky-tab4"><span><span>Popüler Üyeler</span></span></label>
 
     <ul>
 <li class="sky-tab-content-1">
 <div class="typography">';
     online();
 echo '
      </div>
 </li>
 
 <li class="sky-tab-content-2">
 <div class="typography">';
  bilgi();
 echo '
      </div>
 </li>
<li class="sky-tab-content-3">
 <div class="typography">';
  sonuye($parameters, $id, $return_parameters = false);
 echo '
      </div>
 </li>

<li class="sky-tab-content-4">
 <div class="typography">';
 populeruyeler($parameters, $id, $return_parameters = false);
 echo '
      </div>
 </li>

 
 </ul>
 </div>';
 template_info_center();
}
function online(){
    global $context, $settings, $options, $txt, $scripturl, $modSettings;
 // "Users online" - in order of activity.
 echo '
 <p class="inline stats">
 ', $context['show_who'] ? '<a href="' . $scripturl . '?action=who">' : '', comma_format($context['num_guests']), ' ', $context['num_guests'] == 1 ? $txt['guest'] : $txt['guests'], ', ' . comma_format($context['num_users_online']), ' ', $context['num_users_online'] == 1 ? $txt['user'] : $txt['users'];

 // Handle hidden users and buddies.
 $bracketList = array();
 if ($context['show_buddies'])
 $bracketList[] = comma_format($context['num_buddies']) . ' ' . ($context['num_buddies'] == 1 ? $txt['buddy'] : $txt['buddies']);
 if (!empty($context['num_spiders']))
 $bracketList[] = comma_format($context['num_spiders']) . ' ' . ($context['num_spiders'] == 1 ? $txt['spider'] : $txt['spiders']);
 if (!empty($context['num_users_hidden']))
 $bracketList[] = comma_format($context['num_users_hidden']) . ' ' . $txt['hidden'];

 if (!empty($bracketList))
 echo ' (' . implode(', ', $bracketList) . ')';

 echo $context['show_who'] ? '</a>' : '', '
 </p>
 <p class="inline smalltext">';

 // Assuming there ARE users online... each user in users_online has an id, username, name, group, href, and link.
 if (!empty($context['users_online']))
 {
 echo '
 ', sprintf($txt['users_active'], $modSettings['lastActive']), ':', implode(', ', $context['list_users_online']);

 // Showing membergroups?
 if (!empty($settings['show_group_key']) && !empty($context['membergroups']))
 echo '
 [' . implode(']&nbsp;&nbsp;[', $context['membergroups']) . ']';
 }
 echo '
 </p>
 <p class="last smalltext">
 ', $txt['most_online_today'], ': <strong>', comma_format($modSettings['mostOnlineToday']), '</strong>.
 ', $txt['most_online_ever'], ': ', comma_format($modSettings['mostOnline']), ' (', timeformat($modSettings['mostDate']), ')
 </p>';

 // If they are logged in, but statistical information is off... show a personal message bar.
 if ($context['user']['is_logged'] && !$settings['show_stats_index'])
 {
 echo '
 <div class="title_barIC">
 <h4 class="titlebg">
 <span class="ie6_header floatleft">
 ', $context['allow_pm'] ? '<a href="' . $scripturl . '?action=pm">' : '', '<img class="icon" src="', $settings['images_url'], '/message_sm.gif" alt="', $txt['personal_message'], '" />', $context['allow_pm'] ? '</a>' : '', '
 <span>', $txt['personal_message'], '</span>
 </span>
 </h4>
 </div>
 <p class="pminfo">
 <strong><a href="', $scripturl, '?action=pm">', $txt['personal_message'], '</a></strong>
 <span class="smalltext">
 ', $txt['you_have'], ' ', comma_format($context['user']['messages']), ' ', $context['user']['messages'] == 1 ? $txt['message_lowercase'] : $txt['msg_alert_messages'], '.... ', $txt['click'], ' <a href="', $scripturl, '?action=pm">', $txt['here'], '</a> ', $txt['to_view'], '
 </span>
 </p>';
 }
}
function sonuye($parameters, $id, $return_parameters = false)
{
 global $smcFunc, $context, $scripturl, $txt, $color_profile;

 $block_parameters = array(
 'limit' => 'int',
 );

 if ($return_parameters)
 return $block_parameters;

 $limit = !empty($parameters['limit']) ? (int) $parameters['limit'] : 5;

 $request = $smcFunc['db_query']('','
 SELECT id_member, real_name, date_registered
 FROM {db_prefix}members
 WHERE is_activated = {int:is_activated}
 ORDER BY id_member DESC
 LIMIT {int:limit}',
 array(
 'is_activated' => 1,
 'limit' => $limit,
 )
 );
 $members = array();
 $colorids = array();
 while ($row = $smcFunc['db_fetch_assoc']($request))
 {
 if (!empty($row['id_member']))
 $colorids[$row['id_member']] = $row['id_member'];

 $members[] = array(
 'id' => $row['id_member'],
 'name' => $row['real_name'],
 'href' => $scripturl . '?action=profile;u=' . $row['id_member'],
 'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row['id_member'] . '">' . $row['real_name'] . '</a>',
 'date' => timeformat($row['date_registered'], '%d %b'),
 );
 }
 $smcFunc['db_free_result']($request);

 

 echo '
 <ul class="portalsonuye">';

 foreach ($members as $member)
 echo '
 <li> ', $member['link'], ' - ', $member['date'], '</li>';

 echo '
 </ul>';
}
function populeruyeler($parameters, $id, $return_parameters = false)
{
 global $smcFunc, $context, $scripturl, $modSettings, $txt, $color_profile;

 $block_parameters = array(
 'limit' => 'int',
 'type' => 'select',
 );

 if ($return_parameters)
 return $block_parameters;

 $limit = !empty($parameters['limit']) ? (int) $parameters['limit'] : 5;
 $type = !empty($parameters['type']) ? (int) $parameters['type'] : 0;

 if (!empty($type))
 {
 if ($type == 1)
 {
 list($year, $month, $day) = explode('-', date('Y-m-d'));
 $start_time = mktime(0, 0, 0, $month, $day, $year);
 }
 elseif ($type == 2)
 $start_time = mktime(0, 0, 0, date("n"), date("j"), date("Y")) - (date("N") * 3600 * 24);
 elseif ($type == 3)
 {
 $months = array( 1 => 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
 $start_time = mktime(0, 0, 0, date("n"), date("j"), date("Y")) - (3600 * 24 * $months[(int) date("m", time())]);
 }

 $start_time = forum_time(false, $start_time);

 $request = $smcFunc['db_query']('', '
 SELECT
 mem.id_member, mem.real_name, COUNT(*) as posts,
 mem.avatar, a.id_attach, a.attachment_type, a.filename
 FROM {db_prefix}messages AS m
 LEFT JOIN {db_prefix}members AS mem ON (mem.id_member = m.id_member)
 LEFT JOIN {db_prefix}attachments AS a ON (a.id_member = mem.id_member)
 WHERE m.poster_time > {int:start_time}
 AND m.id_member != 0
 GROUP BY mem.id_member
 ORDER BY posts DESC
 LIMIT {int:limit}',
 array(
 'start_time' => $start_time,
 'limit' => $limit,
 )
 );
 }
 else
 {
 $request = $smcFunc['db_query']('','
 SELECT
 m.id_member, m.real_name, m.posts, m.avatar,
 a.id_attach, a.attachment_type, a.filename
 FROM {db_prefix}members AS m
 LEFT JOIN {db_prefix}attachments AS a ON (a.id_member = m.id_member)
 ORDER BY posts DESC
 LIMIT {int:limit}',
 array(
 'limit' => $limit,
 )
 );
 }
 $members = array();
 $colorids = array();
 while ($row = $smcFunc['db_fetch_assoc']($request))
 {
 if (!empty($row['id_member']))
 $colorids[$row['id_member']] = $row['id_member'];

 if ($modSettings['avatar_action_too_large'] == 'option_html_resize' || $modSettings['avatar_action_too_large'] == 'option_js_resize')
 {
 $avatar_width = !empty($modSettings['avatar_max_width_external']) ? ' width="' . $modSettings['avatar_max_width_external'] . '"' : '';
 $avatar_height = !empty($modSettings['avatar_max_height_external']) ? ' height="' . $modSettings['avatar_max_height_external'] . '"' : '';
 }
 else
 {
 $avatar_width = '';
 $avatar_height = '';
 }

 $members[] = array(
 'id' => $row['id_member'],
 'name' => $row['real_name'],
 'href' => $scripturl . '?action=profile;u=' . $row['id_member'],
 'link' => '<a href="' . $scripturl . '?action=profile;u=' . $row['id_member'] . '">' . $row['real_name'] . '</a>',
 'posts' => comma_format($row['posts']),
 'avatar' => array(
 'name' => $row['avatar'],
 'image' => $row['avatar'] == '' ? ($row['id_attach'] > 0 ? '<img src="' . (empty($row['attachment_type']) ? $scripturl . '?action=dlattach;attach=' . $row['id_attach'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) . '" alt="" class="avatar" border="0" />' : '') : (stristr($row['avatar'], 'http://') ? '<img src="' . $row['avatar'] . '"' . $avatar_width . $avatar_height . ' alt="" class="avatar" border="0" />' : '<img src="' . $modSettings['avatar_url'] . '/' . htmlspecialchars($row['avatar']) . '" alt="" class="avatar" border="0" />'),
 'href' => $row['avatar'] == '' ? ($row['id_attach'] > 0 ? (empty($row['attachment_type']) ? $scripturl . '?action=dlattach;attach=' . $row['id_attach'] . ';type=avatar' : $modSettings['custom_avatar_url'] . '/' . $row['filename']) : '') : (stristr($row['avatar'], 'http://') ? $row['avatar'] : $modSettings['avatar_url'] . '/' . $row['avatar']),
 'url' => $row['avatar'] == '' ? '' : (stristr($row['avatar'], 'http://') ? $row['avatar'] : $modSettings['avatar_url'] . '/' . $row['avatar'])
 ),
 );
 }
 $smcFunc['db_free_result']($request);

 

 echo '
 <table class="populeruyeler"><tr>';

 foreach ($members as $member)
 echo '
 
 <td>', !empty($member['avatar']['href']) ? '
 <a href="' . $scripturl . '?action=profile;u=' . $member['id'] . '"><img src="' . $member['avatar']['href'] . '" alt="' . $member['name'] . '" width="40" /></a>' : '', '
 </td>
 <td>
 ', $member['link'], '
 ', $member['posts'], ' ', $txt['posts'], '
 </td>';

 echo '
 </tr></table>';
}
function bilgi(){
 global $context, $settings, $options, $txt, $scripturl, $modSettings;
 // Show statistical style information...
 if ($settings['show_stats_index'])
 {
 echo '
 ', $context['common_stats']['total_posts'], ' ', $txt['posts_made'], ' ', $txt['in'], ' ', $context['common_stats']['total_topics'], ' ', $txt['topics'], ' ', $txt['by'], ' ', $context['common_stats']['total_members'], ' ', $txt['members'], '.<br> ', !empty($settings['show_latest_member']) ? $txt['latest_member'] . ': <strong> ' . $context['common_stats']['latest_member']['link'] . '</strong>' : '', '
 ', (!empty($context['latest_post']) ? $txt['latest_post'] . ': <strong>&quot;' . $context['latest_post']['link'] . '&quot;</strong> ' : ''), '
 <a href="', $scripturl, '?action=recent">', $txt['recent_view'], '</a>', $context['show_stats'] ? '
 <a href="' . $scripturl . '?action=stats">' . $txt['more_stats'] . '</a>' : '', '';
 }


}index.css en alta ekle

Kod Seç Expand

.sky-tabs,
.sky-tabs * {
 margin: 0;
 padding: 0;
 outline: none;
 border: 0;
 background: none;
}
.sky-tabs {
 position: relative;
 font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 font-size: 0;
 text-align: left;
 color: #666;
}
.sky-tabs > input {
 position: absolute;
 display: none;
}
.sky-tabs > label {
 position: relative;
 z-index: 1;
 display: inline-block;
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 padding: 1px;
 padding-top: 0;
 padding-left: 0;
 font-size: 13px;
 line-height: 45px;
 cursor: pointer;
}
.sky-tabs > label.inverse {
 float: right;
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs > label.disabled {
 cursor: default;
}
.sky-tabs > label span {
 display: block;
 padding: 5px;
 background: rgba(255,255,255,0.9);
}
.sky-tabs > label span span {
 padding: 0 20px;
 background: transparent;
 transition: background 0.4s, color 0.4s;
 -o-transition: background 0.4s, color 0.4s;
 -ms-transition: background 0.4s, color 0.4s;
 -moz-transition: background 0.4s, color 0.4s;
 -webkit-transition: background 0.4s, color 0.4s;
}
.sky-tabs > label:hover span span {
 background: #2da5da;
 color: #fff;
}
.sky-tabs > label.disabled span span {
 background: transparent;
 color: inherit;
}
.sky-tabs > input:checked + label {
 cursor: default;
}
.sky-tabs > input:checked + label span span {
 background: #2da5da;
 color: #fff;
}
.sky-tabs > .switcher {
 display: none;
}
.sky-tabs > .switcher a {
 display: block;
 margin: 0 -20px;
 padding: 0 20px;
 text-decoration: none;
 color: inherit;
}
.sky-tabs > ul {
 list-style: none;
 position: relative;
 display: block;
 font-size: 13px;border: 1px solid #CCC;
}
.sky-tabs > ul > li {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 overflow: auto;
 padding: 20px 25px 25px;
 background: rgba(255,255,255,0.9);
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 opacity: 0;
 -o-transform-origin: 0% 0%;
 -ms-transform-origin: 0% 0%;
 -moz-transform-origin: 0% 0%;
 -webkit-transform-origin: 0% 0%;
 -o-transition: opacity 0.8s, -o-transform 0.8s;
 -ms-transition: opacity 0.8s, -ms-transform 0.8s;
 -moz-transition: opacity 0.8s, -moz-transform 0.8s;
 -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
}
.sky-tabs > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 position: relative;
 z-index: 1;
 opacity: 1;
}


/**/
/* positions */
/**/
.sky-tabs-pos-top-center {
 text-align: center;
}
.sky-tabs-pos-top-right {
 text-align: right;
}
.sky-tabs-pos-top-right > label {
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs-pos-top-justify > label {
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-2 > label {
 width: 50%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-3 > label {
 width: 33.33%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-4 > label {
 width: 25%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-5 > label {
 width: 20%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-6 > label {
 width: 16.66%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-7 > label {
 width: 14.28%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-8 > label {
 width: 12.5%;
}
.sky-tabs-pos-top-justify.sky-tabs-amount-9 > label {
 width: 11.11%;
}
.sky-tabs-pos-top-justify > input:first-child + label {
 padding-left: 0;
}
.sky-tabs-pos-left > label,
.sky-tabs-pos-right > label {
 display: block;
 width: 25%;
 float: left;
 clear: left;
 margin-right: 0;
}
.sky-tabs-pos-right > label {
 float: right;
 clear: right;
}
.sky-tabs-pos-left > ul {
 margin-left: 25%;
}
.sky-tabs-pos-right > ul {
 margin-right: 25%;
}
.sky-tabs-pos-right > label {
 padding-right: 0;
 padding-left: 1px;
}
.sky-tabs-pos-top-center > ul > li,
.sky-tabs-pos-top-justify > ul > li {
 -o-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
}
.sky-tabs-pos-right > ul > li,
.sky-tabs-pos-top-right > ul > li {
 -o-transform-origin: 100% 0%;
 -ms-transform-origin: 100% 0%;
 -moz-transform-origin: 100% 0%;
 -webkit-transform-origin: 100% 0%;
}


/**/
/* animations */
/**/
.sky-tabs-anim-slide-up > ul > li {
 -o-transform: translateY(-15%);
 -ms-transform: translateY(-15%);
 -moz-transform: translateY(-15%);
 -webkit-transform: translateY(-15%);
}
.sky-tabs-anim-slide-right > ul > li {
 -o-transform: translateX(15%);
 -ms-transform: translateX(15%);
 -moz-transform: translateX(15%);
 -webkit-transform: translateX(15%);
}
.sky-tabs-anim-slide-down > ul > li {
 -o-transform: translateY(15%);
 -ms-transform: translateY(15%);
 -moz-transform: translateY(15%);
 -webkit-transform: translateY(15%);
}
.sky-tabs-anim-slide-left > ul > li {
 -o-transform: translateX(-15%);
 -ms-transform: translateX(-15%);
 -moz-transform: translateX(-15%);
 -webkit-transform: translateX(-15%);
}
.sky-tabs-anim-slide-up-left > ul > li {
 -o-transform: translate(-15%,-15%);
 -ms-transform: translate(-15%,-15%);
 -moz-transform: translate(-15%,-15%);
 -webkit-transform: translate(-15%,-15%);
}
.sky-tabs-anim-slide-up-right > ul > li {
 -o-transform: translate(15%,-15%);
 -ms-transform: translate(15%,-15%);
 -moz-transform: translate(15%,-15%);
 -webkit-transform: translate(15%,-15%);
}
.sky-tabs-anim-slide-down-right > ul > li {
 -o-transform: translate(15%,15%);
 -ms-transform: translate(15%,15%);
 -moz-transform: translate(15%,15%);
 -webkit-transform: translate(15%,15%);
}
.sky-tabs-anim-slide-down-left > ul > li {
 -o-transform: translate(-15%,15%);
 -ms-transform: translate(-15%,15%);
 -moz-transform: translate(-15%,15%);
 -webkit-transform: translate(-15%,15%);
}
.sky-tabs > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: translate(0,0);
 -ms-transform: translate(0,0);
 -moz-transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

.sky-tabs-anim-scale > ul > li {
 -o-transform: scale(0.1,0.1);
 -ms-transform: scale(0.1,0.1);
 -moz-transform: scale(0.1,0.1);
 -webkit-transform: scale(0.1,0.1);
}
.sky-tabs-anim-scale > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs-anim-scale > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs-anim-scale > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs-anim-scale > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs-anim-scale > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs-anim-scale > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs-anim-scale > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs-anim-scale > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs-anim-scale > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: scale(1,1);
 -ms-transform: scale(1,1);
 -moz-transform: scale(1,1);
 -webkit-transform: scale(1,1);
}

.sky-tabs-anim-rotate > ul > li {
 -o-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}
.sky-tabs-anim-rotate.sky-tabs-pos-right > ul > li,
.sky-tabs-anim-rotate.sky-tabs-pos-top-right > ul > li {
 -o-transform: rotate(-90deg);
 -ms-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
}
.sky-tabs-anim-rotate > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs-anim-rotate > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs-anim-rotate > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs-anim-rotate > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs-anim-rotate > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs-anim-rotate > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs-anim-rotate > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs-anim-rotate > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs-anim-rotate > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: rotate(0deg);
 -ms-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
}

.sky-tabs-anim-flip > ul {
 perspective: 2000px;
 -o-perspective: 2000px;
 -ms-perspective: 2000px;
 -moz-perspective: 2000px;
 -webkit-perspective: 2000px;
 perspective-origin: 50% 50%;
 -o-perspective-origin: 50% 50%;
 -ms-perspective-origin: 50% 50%;
 -moz-perspective-origin: 50% 50%;
 -webkit-perspective-origin: 50% 50%;
}
.sky-tabs-anim-flip > ul > li {
 -o-transform: rotateX(-90deg);
 -ms-transform: rotateX(-90deg);
 -moz-transform: rotateX(-90deg);
 -webkit-transform: rotateX(-90deg);
}
.sky-tabs-anim-flip.sky-tabs-pos-left > ul > li {
 -o-transform: rotateY(90deg);
 -ms-transform: rotateY(90deg);
 -moz-transform: rotateY(90deg);
 -webkit-transform: rotateY(90deg);
}
.sky-tabs-anim-flip.sky-tabs-pos-right > ul > li {
 -o-transform: rotateY(-90deg);
 -ms-transform: rotateY(-90deg);
 -moz-transform: rotateY(-90deg);
 -webkit-transform: rotateY(-90deg);
}
.sky-tabs-anim-flip > .sky-tab-content-1:checked ~ ul > .sky-tab-content-1,
.sky-tabs-anim-flip > .sky-tab-content-2:checked ~ ul > .sky-tab-content-2,
.sky-tabs-anim-flip > .sky-tab-content-3:checked ~ ul > .sky-tab-content-3,
.sky-tabs-anim-flip > .sky-tab-content-4:checked ~ ul > .sky-tab-content-4,
.sky-tabs-anim-flip > .sky-tab-content-5:checked ~ ul > .sky-tab-content-5,
.sky-tabs-anim-flip > .sky-tab-content-6:checked ~ ul > .sky-tab-content-6,
.sky-tabs-anim-flip > .sky-tab-content-7:checked ~ ul > .sky-tab-content-7,
.sky-tabs-anim-flip > .sky-tab-content-8:checked ~ ul > .sky-tab-content-8,
.sky-tabs-anim-flip > .sky-tab-content-9:checked ~ ul > .sky-tab-content-9 {
 -o-transform: rotateX(0deg);
 -ms-transform: rotateX(0deg);
 -moz-transform: rotateX(0deg);
 -webkit-transform: rotateX(0deg);
 -o-transition-delay: 0.2s;
 -ms-transition-delay: 0.2s;
 -moz-transition-delay: 0.2s;
 -webkit-transition-delay: 0.2s;
}


/**/
/* grid system */
/**/
.sky-tabs .grid-row {
 margin-top: 20px;
}
.sky-tabs .grid-row:after {
 content: '';
 display: table;
 clear: both;
}
.sky-tabs .grid-row:first-child {
 margin-top: 0;
}
.sky-tabs .grid-col {
 display: block;
 float: left;
 width: 100%;
 margin-left: 2%;
}
.sky-tabs .grid-col:first-child {
 margin-left: 0;
}
.sky-tabs .grid-col .inner {
 padding: 10px 0;
 border-radius: 5px;
 background: rgba(0,0,0,0.1);
 text-align: center;
}
.sky-tabs .grid-col-1 {
 width: 6.5%;
}
.sky-tabs .grid-col-2 {
 width: 15%;
}
.sky-tabs .grid-col-3 {
 width: 23.5%;
}
.sky-tabs .grid-col-4 {
 width: 32%;
}
.sky-tabs .grid-col-5 {
 width: 40.5%;
}
.sky-tabs .grid-col-6 {
 width: 49%;
}
.sky-tabs .grid-col-7 {
 width: 57.5%;
}
.sky-tabs .grid-col-8 {
 width: 66%;
}
.sky-tabs .grid-col-9 {
 width: 74.5%;
}
.sky-tabs .grid-col-10 {
 width: 83%;
}
.sky-tabs .grid-col-11 {
 width: 91.5%;
}
.sky-tabs .grid-col-offset-1,
.sky-tabs .grid-col-offset-1:first-child {
 margin-left: 8.5%;
}
.sky-tabs .grid-col-offset-2,
.sky-tabs .grid-col-offset-2:first-child {
 margin-left: 17%;
}
.sky-tabs .grid-col-offset-3,
.sky-tabs .grid-col-offset-3:first-child {
 margin-left: 25.5%;
}
.sky-tabs .grid-col-offset-4,
.sky-tabs .grid-col-offset-4:first-child {
 margin-left: 34%;
}
.sky-tabs .grid-col-offset-5,
.sky-tabs .grid-col-offset-5:first-child {
 margin-left: 42.5%;
}
.sky-tabs .grid-col-offset-6,
.sky-tabs .grid-col-offset-6:first-child {
 margin-left: 51%;
}
.sky-tabs .grid-col-offset-7,
.sky-tabs .grid-col-offset-7:first-child {
 margin-left: 59.5%;
}
.sky-tabs .grid-col-offset-8,
.sky-tabs .grid-col-offset-8:first-child {
 margin-left: 68%;
}
.sky-tabs .grid-col-offset-9,
.sky-tabs .grid-col-offset-9:first-child {
 margin-left: 76.5%;
}
.sky-tabs .grid-col-offset-10,
.sky-tabs .grid-col-offset-10:first-child {
 margin-left: 85%;
}
.sky-tabs .grid-col-offset-11,
.sky-tabs .grid-col-offset-11:first-child {
 margin-left: 93.5%;
}


/**/
/* typography */
/**/
.sky-tabs .typography h1,
.sky-tabs .typography h2,
.sky-tabs .typography h3,
.sky-tabs .typography h4,
.sky-tabs .typography h5,
.sky-tabs .typography h6 {
 margin: 40px 0 0 0;
 padding: 0;
 text-align: left;
 color: #333;
}
.sky-tabs .typography h1 {
 font-size: 40px;
 line-height: 50px;
 font-weight: 300;
}
.sky-tabs .typography h2 {
 font-size: 34px;
 line-height: 44px;
 font-weight: 300;
}
.sky-tabs .typography h3 {
 font-size: 28px;
 line-height: 36px;
 font-weight: 300;
}
.sky-tabs .typography h4 {
 font-size: 22px;
 line-height: 30px;
 font-weight: 400;
}
.sky-tabs .typography h5 {
 font-size: 16px;
 line-height: 23px;
 font-weight: 400;
 text-transform: uppercase;
}
.sky-tabs .typography h6 {
 font-size: 14px;
 line-height: 20px;
 font-weight: 400;
 text-transform: uppercase;
}
.sky-tabs .typography p {
 margin: 20px 0 0 0;
 padding: 0;
 line-height: 20px;
 text-align: left;
}
.sky-tabs .typography ul,
.sky-tabs .typography ol {
 list-style: none;
 margin: 20px 0 0 0;
 padding: 0;
 line-height: 20px;
}
.sky-tabs .typography li {
 position: relative;
 margin-top: 5px;
 padding-left: 20px;
}
.sky-tabs .typography li ul,
.sky-tabs .typography li ol {
 margin-top: 5px;
}
.sky-tabs .typography ul li:before {
 content: '';
 position: absolute;
 top: 8px;
 left: 0;
 width: 4px;
 height: 4px;
 background: #333;
}
.sky-tabs .typography ol {
 counter-reset: list1;
}
.sky-tabs .typography ol > li:before {
 counter-increment:list1;
 content: counter(list1)'.';
 position: absolute;
 top: 0;
 left: 0;
 color: #333;
}
.sky-tabs .typography a {
 text-decoration: underline;
 color: #2da5da;
}
.sky-tabs .typography a:hover {
 text-decoration: none;
}
.sky-tabs .typography .pic {
 padding: 4px;
 border: 1px dotted #ccc;
}
.sky-tabs .typography .pic img {
 display: block;
}
.sky-tabs .typography .pic-right {
 float: right;
 margin: 0 0 10px 20px;
}
.sky-tabs .typography .link {
 text-decoration: underline;
 color: #2da5da;
 cursor: pointer;
}
.sky-tabs .typography .link:hover {
 text-decoration: none;
}
.sky-tabs .typography h1:first-child,
.sky-tabs .typography h2:first-child,
.sky-tabs .typography h3:first-child,
.sky-tabs .typography h4:first-child,
.sky-tabs .typography h5:first-child,
.sky-tabs .typography h6:first-child,
.sky-tabs .typography p:first-child {
 margin-top: 0;
}
.sky-tabs .typography .text-center {
 text-align: center;
}
.sky-tabs .typography .text-right {
 text-align: right;
}


/**/
/* icons */
/**/
.sky-tabs > label .fa {
 display: block;
 float: left;
 width: 18px;
 margin: 0 12px 0 -6px;
  font-family: FontAwesome;
  font-style: normal;
  font-size: 16px;
  line-height: 45px;
  text-align: center;
  -webkit-font-smoothing: antialiased;
}


/**/
/* pad */
/**/
@media screen and (max-width: 1000px) {
 .sky-tabs > label span span {
 padding: 0 15px;
 }
 .sky-tabs > label .fa {
 margin-right: 10px;
 margin-left: -5px;
 }
}


/**/
/* phone */
/**/
@media screen and (max-width: 767px) {
 
 .sky-tabs .grid-col,
 .sky-tabs .grid-col:first-child {
 float: none;
 width: 100%;
 margin: 20px 0 0 0;
 }
 
 .sky-tabs-response-to-stack > label {
 display: block;
 width: 100%;
 padding-right: 0;
 padding-left: 0;
 text-align: left;
 }
 .sky-tabs-response-to-stack > ul {
 margin-top: 0;
 margin-right: 0;
 margin-left: 0;
 }
 .sky-tabs-response-to-stack > ul > li {
 -o-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
 }
 .sky-tabs-response-to-stack.sky-tabs-anim-flip > ul > li {
 -webkit-transform: rotateX(-90deg);
 }
 
 .sky-tabs-response-to-icons > label {
 font-size: 0;
 }
 .sky-tabs-response-to-icons > label .fa {
 width: 45px;
 margin: 0;
 font-size: 16px;
 }
 .sky-tabs-response-to-icons > label span span {
 padding: 0;
 }
 .sky-tabs-response-to-icons.sky-tabs-pos-left > label,
 .sky-tabs-response-to-icons.sky-tabs-pos-right > label {
 width: 56px;
 }
 .sky-tabs-response-to-icons.sky-tabs-pos-left > ul {
 margin-left: 56px;
 }
 .sky-tabs-response-to-icons.sky-tabs-pos-right > ul {
 margin-right: 56px;
 }
 
 .sky-tabs-response-to-switcher > label {
 display: none;
 width: 100%;
 padding-right: 0;
 padding-left: 0;
 text-align: left;
 }
 .sky-tabs-response-to-switcher > .switcher {
 display: block;
 }
 .sky-tabs-response-to-switcher:hover > label {
 display: block;
 }
 .sky-tabs-response-to-switcher:hover > .switcher {
 display: none;
 }
 .sky-tabs-response-to-switcher > ul {
 margin-top: 0;
 margin-right: 0;
 margin-left: 0;
 }
 .sky-tabs-response-to-switcher > ul > li {
 -o-transform-origin: 50% 0%;
 -ms-transform-origin: 50% 0%;
 -moz-transform-origin: 50% 0%;
 -webkit-transform-origin: 50% 0%;
 }
 .sky-tabs-response-to-switcher.sky-tabs-anim-flip > ul > li {
 -webkit-transform: rotateX(-90deg);
 }
}
.populeruyeler{width:100%}
.portalsonuye{top: -25px;
position: relative;}11 farklı animasyon

Kod Seç Expand

sky-tabs-anim-slide-up
sky-tabs-anim-slide-right
sky-tabs-anim-slide-down
sky-tabs-anim-slide-left
sky-tabs-anim-slide-up-left
sky-tabs-anim-slide-up-right
sky-tabs-anim-slide-down-right
sky-tabs-anim-slide-down-left

sky-tabs-anim-scale
sky-tabs-anim-rotate
sky-tabs-anim-flipdeğiştirmek için yapmanız gereken
size verdiğim kodlar içinde kırmızı ile işaretli kısımı üstekilerden biri ile değiştimek (boardindex.template.php de)
<div class="sky-tabs sky-tabs-pos-top-left sky-tabs-anim-flip sky-tabs-response-to-icons">
eski bilgi merkezini kaldırmak isteyenler alttaki kırmızı ile işaretli resim

boardindex.template.php de

Kod Seç Expand

template_info_center();bulup silmeleri yeterli olacaktır

selam hocam Bu Modu son konular sohbet yanitalanan bölüm en en son ekleneler vs acaba



Örnek sitesi surda var http://smfdestek.com/index.php?topic=952.msg5176

evet yapmak mümkün en kısa süre içinde yapıp paylaşırım

Allah Razi ola beklemedeyim

buyrun @Ali1980  http://smf.konusal.com/index.php?topic=114.0
umarım istediğiniz gibi olmuştur

şuan sitemizde kullandığımız tablı istatistik modudur ilerde değişebilir
demo olarak teknoromi bakabilirsiniz

usta son zamanlarda buradaki linke tıkladınmı bir yanlışlık olmasın senin adres teknoloji sitesi değilmi

evet eskiden bana ait bir domain di hatta eskiden burası bile smf teknoromi idi
demekki birileri alıp yönlendirme yapmış domaine