Smf tablı istatistik alanı css3 (11 Animations)

Başlatan snrj, 18 Mayıs 2014 04:23

« önceki - sonraki »

osmancastle ve 19 Ziyaretçiler konuyu incelemekte.

Aşağı git Sayfa1

snrj

*

  1. 3,261

  2. 596

  3. 1076
18 Mayıs 2014 04:23 Son düzenlenme: 09 Şub 2018 14:31 snrj


ş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ç
template_info_center();
}değiştir
Kod Seç
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ç
.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ç
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ç
template_info_center();bulup silmeleri yeterli olacaktır



  2. 632

  3. 251
21 Haz 2014 01:46 #1
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



snrj

*

  1. 3,261

  2. 596

  3. 1076
22 Haz 2014 17:35 #2
evet yapmak mümkün en kısa süre içinde yapıp paylaşırım



  2. 632

  3. 251
22 Haz 2014 23:02 #3

Allah Razi ola beklemedeyim

snrj

*

  1. 3,261

  2. 596

  3. 1076
23 Haz 2014 00:29 #4
buyrun @Ali1980  http://smf.konusal.com/index.php?topic=114.0
umarım istediğiniz gibi olmuştur

esudur

*

  1. 2

  2. 1
09 Şub 2018 01:39 #5 Son düzenlenme: 09 Şub 2018 14:32 snrj
Alıntı yapılan: snrj - 18 Mayıs 2014 04:23
ş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
SAĞLIKLI YAŞAM FORUMU / YAŞAM TADINDA HİKAYELER

snrj

*

  1. 3,261

  2. 596

  3. 1076
09 Şub 2018 14:35 #6
evet eskiden bana ait bir domain di hatta eskiden burası bile smf teknoromi idi
demekki birileri alıp yönlendirme yapmış domaine
Yukarı git Sayfa1

Benzer Konular (5)


MENU ×