Dołącz do zespołu ekspertów! Backend lub Frontend Developer?

Sprawdź najnowsze oferty pracy naszego partnera - 8lines.io!

Panel użytkownika, jak wyśrodkować awatar?

Założony przez  devciak.

11.07.2014, 14:15 (Ten post był ostatnio modyfikowany: 11.07.2014, 14:36 przez devciak.)
#1
wersja skryptu MyBB: Najnowsza
adres forum: pride-fox.pl
na czym polega problem (screen, opis, komunikaty, nazwa stylu/theme/szablonu): Chciałbym żeby awatary były wyśrodkowywane, bądź zasłaniały całą powierzchnie kod, który posiadam:

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
<div><div class="thead">&nbsp;<span>{$lang->profile}</span></div>
    <div id="userprofile-maininfo">
<div id="userprofile-tabs">
    <div id="userprofile-tabs-nav">
    <div class="userprofile_avatar">{$avatar}</div>
    <li><a href="#generalinfo">Ogólne</a></li>
<li><a href="#more">Więcej ...</a></li>
    </div>

    <div class="tab" id="generalinfo">
<div class="tab_content">
<span class="profile_PW button2"></a>&nbsp;<a href="private.php?action=send&amp;uid={$memprofile['uid']}">PW</a></span>
{$sendemail}
<span class="profile_find button2"></a>&nbsp;<a href="search.php?action=finduserthreads&amp;uid={$uid}">{$lang->find_threads}</a></span>
<div class="profile_info">
    <h1>{$formattedname}</h1>
{$groupimage}
    {$awaybit}<br />    
{$online_status} {$lang->lastvisit} {$memlastvisitdate} {$memlastvisittime}<br />
</div>    
<br />
<div class="member_box">
<ul>
<h3><strong>{$lang->users_forum_info}</strong></h3>
<li class="trow_member"><span class="trow_title"><strong>{$lang->joined}</strong></span><span class="trow_text">{$memregdate}</span></li>
<li class="trow_member"><span class="trow_title"><strong>{$lang->date_of_birth}</strong></span><span class="trow_text">{$membday} {$membdayage}</span></li>
<li class="trow_member"><span class="trow_title"><strong>{$lang->local_time}</strong></span><span class="trow_text">{$localtime}</span></li>
<li class="trow_member"><span class="trow_title"><strong>{$lang->lastvisit}</strong></span><span class="trow_text">{$memlastvisitdate} {$memlastvisittime}</span></li>
<li class="trow_member"><span class="trow_title"><strong>{$lang->total_posts}</strong></span><span class="trow_text">{$memprofile['postnum']}</span></li>
<li class="trow_member"><span class="trow_title" style="width:130px;"><strong>{$lang->timeonline}</strong></span><span class="trow_text">{$timeonline}</span></li>
<li class="trow_member">{$warning_level}</li>
<li class="trow_member"><span class="trow_text">{$memprofile['usernotes']}</span></li>
</ul>
</div>
<div class="member_box">
<ul>
<h3><strong>Sygnatura</strong></h3>
<li class="trow_member">{$signature}</li>
</ul>
</div>
<div class="float_right" style="width:30%;bottom:258px;position:relative;">
{$reputation}<div class="member_box2">
<ul>
<h3><strong>Opcje:</strong></h3>
<span class="box_text">
{$adminoptions}
{$modoptions}
</span></ul></div>
<div class="right">
{$referrals}</div>
</div>
</div>
</div>
<div class="tab" id="more">
<div class="tab_content">
<div class="member_box2">
<ul>
<h3><strong>{$lang->users_forum_info}</strong></h3>
<li class="trow_member" style="float:left;"><span class="trow_title" style="display:inline-block;"><strong>{$lang->icq_number}</strong></span><span class="trow_text">{$memprofile['icq']}</span></li>
<li class="trow_member" style="float:left;"><span class="trow_title" style="display:inline-block;"><strong>{$lang->homepage}</strong></span><span class="trow_text">{$website}</span></li>
</ul>
</div>
</div>
</div>

</div>
<script type="text/javascript">
var tabber1 = new Yetii({
id: 'userprofile-tabs'
});
</script>
</div><br class="clear">
{$footer}
</body>
</html>

PRzykładowy profil http://pride-fox.pl/member.php?action=profile&uid=1
11.07.2014, 15:34
#2
W member.css znajdź .userprofile_avatar
i zamien całą klasę na tą:
.userprofile_avatar {
    margin: 0 auto;
    width: 140px;
} 
Jeśli Ci pomogłem naciśnij guzik POMÓGŁ lub dodaj PUNKT REPUTACJI
11.07.2014, 15:57 (Ten post był ostatnio modyfikowany: 11.07.2014, 16:06 przez devciak.)
#3
(11.07.2014, 15:34)SLAVOO napisał(a): W member.css znajdź .userprofile_avatar
i zamien całą klasę na tą:
.userprofile_avatar {
    margin: 0 auto;
    width: 140px;
} 

Wgrałem nawet awatar z tłem i nic.
http://i.imgur.com/9ltXGOK.png
11.07.2014, 16:56
#4
Dopisz jeszcze tam:
text-align: center;
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
11.07.2014, 17:21
#5
Wszystko działa elegancko, tylko w kodzie powinno znajdować się jeszcze coś co automatycznie reguluje wymiary awatara ponieważ przy większym rozmiarze dzieje się takie coś: http://pride-fox.pl/member.php?action=profile&uid=2
11.07.2014, 17:28
#6
Dodaj za tym jeszcze coś takiego:
.userprofile_avatar img {
    height: 140px;
    width: 140px;
} 
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.
11.07.2014, 17:44
#7
}

.userprofile_avatar {
    margin: 0 auto;
    width: 140px;
text-align: center;
.userprofile_avatar img {
    height: 140px;
    width: 140px;
}

efekt: http://pride-fox.pl/member.php?action=profile&uid=2
11.07.2014, 17:47
#8
.userprofile_avatar {
    margin: 0 auto;
    width: 140px;
text-align: center;
}
.userprofile_avatar img {
    height: 140px;
    width: 140px;
}
Prośby na PW dotyczące wsparcia z problemami będą ignorowane. Pomoc poza forum - odpłatna; kontakt: snakemybboard@gmail.com.



Użytkownicy przeglądający ten wątek:

2 gości