Advertisement:

Author Topic: smf açılıp kapanan profil alanı  (Read 4675 times)

Offline Snrj

  • Jr. Member
  • **
  • Posts: 318
  • Gender: Male
    • Snrj Forumları
smf açılıp kapanan profil alanı
« on: November 09, 2016, 04:00:54 PM »
farklı renklerde hazırlamaya çalıştım istediğiniz renkte kullanabilirsiniz
anlatım default temaya göredir başka temalarda farklılık arz edebilir

örnek resimler


Display.template.php dosyasında bul
Code: [Select]
// Show information about the poster of this message.
 echo '
 <div class="poster">
 <h4>';

 // Show online and offline buttons?
 if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
 echo '
 ', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

 // Show a link to the member's profile.
 echo '
 ', $message['member']['link'], '
 </h4>
 <ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';

 // Show the member's custom title, if they have one.
 if (!empty($message['member']['title']))
 echo '
 <li class="title">', $message['member']['title'], '</li>';

 // Show the member's primary group (like 'Administrator') if they have one.
 if (!empty($message['member']['group']))
 echo '
 <li class="membergroup">', $message['member']['group'], '</li>';

 // Don't show these things for guests.
 if (!$message['member']['is_guest'])
 {
 // Show the post group if and only if they have no other group or the option is on, and they are in a post group.
 if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
 echo '
 <li class="postgroup">', $message['member']['post_group'], '</li>';
 echo '
 <li class="stars">', $message['member']['group_stars'], '</li>';

 // Show avatars, images, etc.?
 if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
 echo '
 <li class="avatar">
 <a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
 ', $message['member']['avatar']['image'], '
 </a>
 </li>';
değiştir
Code: [Select]
// Show information about the poster of this message.
 echo '
 <div class="poster">';
 
 // Show avatars, images, etc.?
 if (!empty($settings['show_user_images']) && empty($options['show_no_avatars']) && !empty($message['member']['avatar']['image']))
 echo '<ul class="reset">
 <li class="avatar', $message['member']['online']['is_online'], '">
 <a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
 ', $message['member']['avatar']['image'], '
 </a>
 </li></ul>';
 else
 echo '<ul class="reset">
 <li class="avatar', $message['member']['online']['is_online'], '">
 <a href="', $scripturl, '?action=profile;u=', $message['member']['id'], '">
 <img src="' . $settings['images_url'] . '/default_avatar.png" alt="', $message['member']['id'], '" />
 </a>
 </li></ul>';
 echo'<h4><span class="teknosol"></span>', $message['member']['link'], '<span class="teknosag"></span></h4>
 <section>
 <article>
 <details><summary>Ekstra Bilgi</summary>';
 // Show online and offline buttons?
 if (!empty($modSettings['onlineEnable']) && !$message['member']['is_guest'])
 echo '
 ', $context['can_send_pm'] ? '<a href="' . $message['member']['online']['href'] . '" title="' . $message['member']['online']['label'] . '">' : '', '<img src="', $message['member']['online']['image_href'], '" alt="', $message['member']['online']['text'], '" />', $context['can_send_pm'] ? '</a>' : '';

 // Show a link to the member's profile.
 echo '<ul class="reset smalltext" id="msg_', $message['id'], '_extra_info">';
 echo '
 <li class="stars">', $message['member']['group_stars'], '</li>';
 

 // Show the member's primary group (like 'Administrator') if they have one.
 if (!empty($message['member']['group']))
 echo '
 <li class="membergroup"><span class="teknosol"></span><b>', $message['member']['group'], '</b><span class="teknosag"></span></li>';

 // Don't show these things for guests.
 if (!$message['member']['is_guest'])
 {
 // Show the post group if and only if they have no other group or the option is on, and they are in a post group.
 if ((empty($settings['hide_post_group']) || $message['member']['group'] == '') && $message['member']['post_group'] != '')
 echo '
 <li class="postgroup"><span class="teknosol"></span><b>', $message['member']['post_group'], '</b><span class="teknosag"></span></li>';
 // Show the member's custom title, if they have one.
 if (!empty($message['member']['title']))
 echo '
 <li class="title">', $message['member']['title'], '</li>';
bul
Code: [Select]
// Done with the information about the poster... on to the post itself.
 echo '
 </ul>
 </div>
değiştir
Code: [Select]
// Done with the information about the poster... on to the post itself.
 echo '
 </ul>
 </details>
 </article>
 </section>
 </div>

index.css de en alta ekle
Code: [Select]
.poster {
    width: 10em;
    background:linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 9px;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    float: left;
    box-shadow: 0px 0px 0px 1px #FCFCFC inset;
    position: relative;margin-left: 6px;
}
.postarea, .moderatorbar { margin: 0px 0px 0px 14em;}
.teknosol{border-top-left-radius: 3px;left: -1px;}
.teknosag{border-top-right-radius: 3px;right: -1px;}
.poster h4, .poster ul {
    padding: 0px;
    margin: 0px;
}
.poster li.avatar1 {
    background-color: #F6F6F6;
 border-width: 3px 1px 2px;
 border-radius: 60px;
 border-style: solid;
 border-color: #3EF737;
 overflow: hidden;
 width: 96px;height: 96px;
 margin: 0px auto;
}
.poster li.avatar {
    background-color: #F6F6F6;
 border-width: 3px 1px 2px;
 border-radius: 60px;
 border-style: solid;
 border-color: #ccc;
 overflow: hidden;
 width: 96px;height: 96px;
 margin: 0px auto;
}
.poster li.avatar1 img,.poster li.avatar img{
    width: 96px;
 height: 96px;
}

.poster li.stars {
    margin: 0px auto;
    text-align: center;
}
.poster li.membergroup,.poster li.postgroup ,.poster h4, .poster h4 {
 padding: 1px 5px;
 border: 1px solid transparent;
 border-radius: 3px;
 box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.25);
 margin: 1px -14px 5px;
}
.poster li.membergroup, .poster li.membergroup b,.poster li.postgroup, .poster li.postgroup b,.poster h4, .poster h4 a{
 border-top-right-radius: 0px;
 border-top-left-radius: 0px;
 position: relative;
 display: block;
 text-align: center;
 font-size: 11px;
}
.poster li.membergroup span,.poster li.postgroup span,.poster h4 span{
    top: -4px;
    width: 5px;
    height: 4px;
    background-color: inherit;
    position: absolute;
}
.poster h4, .poster h4{
 background:linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%) repeat scroll 0% 0% transparent;
}
.poster h4, .poster h4 a {
 background-image:linear-gradient(to bottom, #feccb1 0%,#f17432 50%,#ea5507 51%,#fb955e 100%);
 color: #000;
 background-color: #f17432;
 border-color: #f17432;
}
.poster li.membergroup{
 background: linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%) repeat scroll 0% 0% transparent;
}
.poster li.membergroup, .poster li.membergroup b{
 background-image:linear-gradient(to bottom, #bfd255 0%,#8eb92a 50%,#72aa00 51%,#9ecb2d 100%);
 color: #000;
 background-color: #8eb92a;
 border-color: #8eb92a;
}
.poster li.postgroup{
 background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%) repeat scroll 0% 0% transparent;
}
.poster li.postgroup, .poster li.postgroup b{
 background-image:linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
 color: #000;
 background-color: #87CEEB;
 border-color: #87CEEB;
}

Renk Değiştirmek isteyenler index.css ye ekledikleri şu kısımı alttaki hangi renkte istiyorsa onunla değiştirsin
üstteki default renk
Code: [Select]
.poster {
    width: 10em;
    background:linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);
    padding: 9px;
    border: 1px solid #E4E4E4;
    border-radius: 6px;
    float: left;
    box-shadow: 0px 0px 0px 1px #FCFCFC inset;
    position: relative;margin-left: 6px;
}

kırmızı
Code: [Select]
.poster {
    width: 10em;
    background:linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
    padding: 9px;
    border: 1px solid #8f0222;
    border-radius: 6px;
    float: left;
    box-shadow: 0px 0px 0px 1px #8f0222 inset;
    position: relative;margin-left: 6px;
 color:#fff;
}
mavi
Code: [Select]
.poster {
    width: 10em;
    background:linear-gradient(to bottom, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
    padding: 9px;
    border: 1px solid #b3dced;
    border-radius: 6px;
    float: left;
    box-shadow: 0px 0px 0px 1px #b3dced inset;
    position: relative;margin-left: 6px;
 color:#000;

}

siyah
Code: [Select]
.poster {
    width: 10em;
    background:linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
    padding: 9px;
    border: 1px solid #7d7e7d;
    border-radius: 6px;
    float: left;
    box-shadow: 0px 0px 0px 1px #7d7e7d inset;
    position: relative;margin-left: 6px;
 color:#fff;
}
sarı
Code: [Select]
.poster {
    width: 10em;
    background:linear-gradient(to bottom, #f1e767 0%,#feb645 100%);
    padding: 9px;
    border: 1px solid #feb645;
    border-radius: 6px;
    float: left;
    box-shadow: 0px 0px 0px 1px #feb645 inset;
    position: relative;margin-left: 6px;
 color:#000;
}

ekteki avatarı temanızın images klasörüne atın

kaynak