smf açılıp kapanan profil alanı

[Snrj]

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 Expand

// 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 Expand

// 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 Expand

// Done with the information about the poster... on to the post itself.
echo '
</ul>
</div>
değiştir

Code Select Expand

// 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 Expand

.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 Expand

.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 Expand

.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 Expand

.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 Expand

.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 Expand

.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