Sam robiłem taki podgląd pod MyBB wcale to nie takie trudne choć jest sporo zabawy z marginesami
Efekt wygląda następująco:
http://lost-rp.pl/member.php?action=profile&uid=1
Przestawię Ci jak stworzyć strukturę razem z usertabs czyli tymi zakładkami po prawo w profilu.. Jest pewna różnica pomiędzy przełączaniem owych zakładek w MyBB ,a IPB. W IPB zmieniają się one wolniej należy czekać na ładowanie strony tutaj natomiast odbywa się to swobodnie...
- Pobierz potrzebny Ci do usertabs JavaScript:
http://lost-rp.pl/jscripts/usertabs.js - zapisz stronę jako .js
Następnie przez klient FTP umieść plik na serwerze w folderze jscripts
- Przejdź do: ACP --> Style i szablony --> Szablony --> Twój styl szablony --> Niezgrupowane szablony --> headerinclude po czym nad:
Dodaj linijkę:
<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/usertabs.js">
/***********************************************
* Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/
</script>
- Teraz dodajemy cały szkielet szablonu był robiony jakiś rok temu kiedy nie znałem połowy ciekawych zastosowań CSS
Tak więc:
ACP --> Style i szablony --> Szablony --> Twój styl szablony --> Podgląd profilu szablony --> member_profile
<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
</head>
<body>
{$header}
{$awaybit}
<br/>
<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder">
<tr>
<td class="memprof" colspan="2">{$lang->profile}</b><span style="float: right;">{$userstars}</span></td>
</tr>
<tr>
<td class="profbox"><div align="center" class='avat'>{$avatar}</div>
<div>
<div class="bar">{$lang->users_forum_info}</div>
<div class="text"><b>Nick:</b> <span class="infor">{$formattedname}</span></div>
<div class="text"><b>Group:</b> <span class="infor">{$usertitle}</span></div>
<div class="text"><b>{$lang->joined} </b>{$memregdate}</div>
<div class="text"><b>{$lang->total_posts} </b>{$memprofile['postnum']}</div>
<div class="text"><b>{$lang->lastvisit}</b>{$memlastvisitdate} {$memlastvisittime}</div>
{$warning_level}
<div class="text"><b>{$lang->postbit_status} </b>{$online_status}</div>
<div class="text"><b>{$lang->timeonline} </b>{$timeonline}</div>
<div class="bar">{$lang->users_additional_info}</div>
<div class="text"><b>{$lang->date_of_birth} </b>({$membday}) {$membdayage}</div>
{$profilefields}
<div class="bar">{$lang->users_contact_details}</div>
<div class="text"><b>{$lang->homepage} </b>{$website}</div>
<div class="text"><b>{$lang->pm} </b><a href="private.php?action=send&uid={$memprofile['uid']}">{$lang->send_pm}</a></div>
{$sendemail}
<br />{$modoptions}
</div>
</td>
</td>
<td valign="top"><div id="usertabs" class="usertabs">
<ul>
<li><a href="#" rel="1" class="selected">Test 1</a></li>
<li><a href="#" rel="2">Test 2</a></li>
<li><a href="#" rel="3">Test 3</a></li>
</ul>
</div>
<div id="1" class="tabcontent">
<div class="box-thing"></div>
<div class="tables"><span class="pole">
Test 1
</span></div>
</div>
<div id="2" class="tabcontent">
<div class="box-thing"></div>
<div class="tables"><span class="pole">
Test 2
</span></div>
</div>
<div id="3" class="tabcontent">
<div class="box-thing">
</div><div class="tables"><span class="pole">
Test 3
</span></div>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
var mypets=new ddtabcontent("usertabs")
mypets.setpersist(true)
mypets.setselectedClassTarget("link")
mypets.init(0)
</script>
<br/>
</div>
</div>
</div>
{$footer}
</body>
</html>
- Teraz pora na arkusz CSS...
Stwórz sobie arkusz w ACP --> Style i szablony --> Style --> Twój styl --> Nowy arkusz CSS -->
Nazwa pliku: other.css
Dołączane do: * do wszytkich
Wpisz podaną przeze mnie zawartość
/***********************************************
* Usertabs*
***********************************************/
.usertabs {
width: 65%;
margin-left: 30px;
margin-top: 20px;
font-size: 11px;
}
.usertabs ul {
padding: 0;
margin: 0;
}
.usertabs li {
display: inline;
margin: 0;
}
.usertabs li a {
background: #B4C1D3;
color: #303B4A;
position: relative;
z-index: 1;
padding: 11px;
-moz-border-radius-topleft: 5px;
-webkit-border-top-left-radius: 5px;
-moz-border-radius-topright: 5px;
-webkit-border-top-right-radius: 5px;
text-align: center;
margin-right: 5px;
text-decoration: none;
font-weight: bold;
}
.usertabs li a:visited {
color: #2d2d2d;
text-decoration: none;
font-weight: bold;
}
.usertabs li a:hover {
color: #2d2d2d;
text-decoration: none;
font-weight: bold;
}
.usertabs li a.selected {
background: #303B4A;
color: #fff;
border-color: #262D35;
font-weight: bold;
}
.usertabs li a.selected:hover {
text-decoration: none;
}
.tabcontent {
display: none;
margin-left: 10px;
}
.box-thing {
background: #B4C1D3;
border-top: 10px solid #303B4A;
height: 20px;
font-weight: bold;
}
@
media print {
.tabcontent {
display:block !important;
}
}
.tables {
background: #eef3f8;
border: 1px solid #d5dde5;
border-bottom: 4px solid #d5dde5;
margin-bottom: 10px;
overflow: hidden;
}
.pole {
padding: 15px;
}
/***********************************************
* Teraz - panel po prawej*
***********************************************/
.profbox {
background: #eef3f8;
width: 29%;
border: 1px solid #d5dde5;
border-bottom: 4px solid #d5dde5;
margin-bottom: 10px;
overflow: hidden;
}
.infor {
padding: 3px 4px;
text-align: justify;
}
.bar {
background: #d5dde5;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
font-weight: bold;
}
.avat {
padding-top: 20px;
padding-bottom: 20px;
}
.text {
padding-top: 3px;
padding-bottom: 3px;
padding-left: 5px;
border-bottom: 1px solid #d5dde5;
}
.memprof {
background: #303B4A url(images/ipb/menu.png) top repeat-x;
width: 98%;
color: #ffffff;
padding: 8px 8px 8px 15px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
}
- Gdyby czegoś brakowało pisz w tym wątku Miłej pracy...
