Skocz do zawartości
Przeglądasz forum jako gość, nie masz dostępu do większości funkcji! Zarejestruj się już teraz!
Witaj na Strefaskilla.pl

GŁOSUJ NA SERWERY

Zagłosuj na nasze serwery!

Przejdź do głosowania

NOWY/STARY ODŚWIEŻONY STYL !

Właśnie wleciał odświeżony styl z kilkoma zmianiami i dodatkami

Zobacz szczegóły

FANPAGE

Dołącz do naszej społeczności na fanpage’u!!

DOŁĄCZ!

OTWARTA

Szybka rekrutacja na typera

Złóż podanie

OTWARTA

Szybka rekrutacja na redaktora

Złóż podanie



#96 Elita Sieci - Wrzesień 2026





[PORADNIK] Zmiana wyglądu profilu mybb na a'la IPB

Limitowany.

Przez Limitowany.,
w Okres: 2018 - 2024

Rekomendowane odpowiedzi

  • Użytkownik
Limitowany. Zapaleniec

Limitowany.

Opublikowano
  • Użytkownik
Opublikowano

Witam w tym poradniku pokażę wam jak zmienić wygląd profilu na stronie z silnikiem mybb na wygląd przypominający IPB.

Gotowy efekt będzie prezentował się mniej więcej tak:

 

Spoiler

spacer.png

Tak więc zaczynamy:

 

[hide] 

1. Na początku wchodzimy w style i szablony -> style -> tworzymy nowy styl o nazwie "profile.css"Do niego wklejamy kod:

Spoiler 



.profile-header {
    background-color: rgba(0, 0, 0, 0.6);
    background-blend-mode: color;
    background-position: center;
    border-radius: 3px;
    position: relative;
    height: 250px;
    border-bottom: 7px solid #343434;
}
.stats-container {
    position: absolute;
    right: 0;
    bottom: 0;
    padding-right: 10px;
}
.stats-container .stat {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-bottom: 7px solid #541415;
    margin-bottom: -7px;
}
.stats-container .stat .title {
    margin-top: 5px;
    font-size: 12pt;
}
.stats-container .stat .value {
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
}
.profile-options {
    position: absolute;
    top: 0;
    padding: 20px;
    right: 0;
}
.profile-header .avatar {
    left: 20px;
    position: absolute;
    bottom: 0;
    border: 5px solid #343434;
    border-bottom: 0;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.profile-header .avatar img {
    height: 110px;
    width: 110px;
}
.profile-header .info {
    margin-left: 20px;
    font-size: 10pt;
    position: absolute;
    left: 136px;
    bottom: 15px;
}
.profile-header .info h1 {
    font-size: 20pt;
    line-height: 22pt;
}
.profile-header .info h1 .title {
    font-weight: 100;
    font-size: 13pt;
    color: #fff;
}
.profile-header .info h1 .group {
    margin-top: 5px;
}
.profile-container {
    margin-top: 30px;
}
.profile-container .info {
    width: 23%;
    padding-right: 3%;
    box-sizing: border-box;
    float: left;
}
.profile-container .additional-stuff {
    float: right;
    width: 77%;
}
.profile-container .additional-stuff .menu {
    margin-bottom: 30px;
}
.profile-container .additional-stuff .menu ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}
.profile-container .additional-stuff .menu ul li {
    display: inline-block;
    background: #343434;
    cursor: pointer;
    padding: 15px 20px;
    border-radius: 3px;
    margin: 0 10px;
    transition: background 0.3s ease-in-out;
    background: rgba(255, 255, 255, 0.04);
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    padding: 9px 25px;
    border-radius: 2px 2px 0px 0px;
    font-weight: bold;
}
.profile-container .additional-stuff .menu ul li.active {
    cursor: default;
    background: #030202;
    color: #fff;
}
.profile-container .additional-stuff .menu ul li:not(.active):hover {
    background: #262525;
}
.profile-container .additional-stuff .menu ul li:first-child {
    margin-left: 0;
}
.profile-container .additional-stuff .stuff > div {
    display: none;
}
.profile-container .additional-stuff .stuff > div.active {
    display: block;
}
.stable .row {
    box-sizing: border-box;
    width: 100%;
    padding: 20px 25px;
    background: #080808;
    border-bottom: 1px solid #0b0c0d;
}
.stable .row:first-child {
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.stable .row:last-child {
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}
.stable .row .title {
    display: inline-block;
    font-weight: bold;
    font-size: 11pt;
}
.stable .row .title i {
    margin-right: 5px;
}
.stable .row .value {
    display: inline-block;
    color: #877373;
    font-size: 11pt;
}
.find > div {
    padding: 15px 20px;
    border-radius: 3px;
    margin: 10px 0;
    font-size: 11pt;
    transition: background 0.3s ease-in-out;
    background: #0a0a0a;
}
.find > div:hover {
    background: #000;
    color: #fff;
}
.find > div.vote {
    background: #3a8941;
}
.find > div.vote:hover {
    background: #1a7022;
}
.find > div.warn {
    background: #c93030;
}
.find > div.warn:hover {
    background: #952323;
}
.find > div.rep-details {
    background: #0a0a0a;
}
.find > div.rep-details:hover {
    background: #000;
    color: #fff;
}
.find > div:first-child {
    margin-top: 0;
}
.find > div i {
    margin-right: 5px;
}
.find > div a:hover {
    color: #e0f0ec;
}


 


2. Style i szablony -> Twój szablon -> Niezgrupowane szablony -> headerinclude -> Dodajemy do niego:

Spoiler 



<script type="text/javascript" src="http://forum.p0y3b.eu/images/Mroczny/profile.js"></script>


 

 

3. Reszte zmieniać będziemy w Style i szablony -> Twój szablon -> Podgląd profilu

- przechodzimy do member_profile, usuwamy jego zawartość i wklejamy:

Spoiler

<html>
<head>
<title>{$mybb->settings['bbname']} - {$lang->profile}</title>
{$headerinclude}
<script type="text/javascript" src="{$mybb->asset_url}/jscripts/report.js?ver=1804"></script>
    
<style>
.profile-header {
    background-image: url({$userfields['fid6']});
    background-color: rgba(0, 0, 0, 0.6);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}
</style>
    
</head>
<body id="uzytkownicy">
{$header}


    <div class="profile-header clearfix">
        
        <div class="avatar">
            {$avatar}
        </div>
        
        <div class="info">
            <div class="user">
                <h1>
                    <div class="nickname">{$formattedname}</div>
                    <div class="title">({$usertitle})</div>
                </h1>                
            </div>
        </div>
        
        <div class="profile-options">
            {$buddy_options}{$ignore_options}{$report_options}
        </div>
        
    <div class="stats-container">
        <div class="stat">
            <div class="value">
                {$memprofile['postnum']}
            </div>
            <div class="title">
                posty
            </div>
        </div>
        <div class="stat">
            <div class="value">
                {$memprofile['threadnum']}
            </div>
            <div class="title">
                tematy
            </div>
        </div>
        <div class="stat">
            <div class="value reputation">
                {$reputation}
            </div>
            <div class="title">
                reputacja
            </div>
        </div>
        
    </div>
</div>
    
    
    
    
    <div class="profile-container clearfix">
    <div class="info">
        <div class="group"></div>
        <div class="find">
            <div class="posts">
                <a href="search.php?action=finduser&amp;uid={$memprofile['uid']}">
                    <span><i class="fa fa-commenting-o" aria-hidden="true"></i> Znajdź wszystkie posty</span>
                </a>
            </div>
            <div class="threads">
                <a href="search.php?action=finduserthread&amp;uid={$memprofile['uid']}">
                    <span><i class="fa fa-comments" aria-hidden="true"></i> Znajdź wszystkie wątki</span>
                </a>
            </div>
            <div class="rep-details">
                <a href="reputation.php?uid={$memprofile['uid']}">
                    <span><i class="fa fa-info" aria-hidden="true"></i> Szczegóły reputacji</span>
                </a>
            </div>
            
            
        </div>
    </div>
    <div class="additional-stuff">
        
        <div class="menu">
            <ul>
                <li data-element="main" class="active">Główne informacje</li>
                <li data-element="signature" class="">Sygnatura</li>
                <li data-element="contact" class="">Kontakt</li>
                <li data-element="other" class="">Inne</li>
            </ul>
        </div>
        
        <div class="stuff">
            
            <div data-element="main" style="display: block;">
                <div class="stable">
                    <div class="content">
                        <div class="rows-container">
                            <div class="row">
                                <div class="title"><i class="fa fa-calendar" aria-hidden="true"></i> Dołączył:</div>
                                <div class="value">{$memregdate}</div>
                            </div>
                            <div class="row">
                                <div class="title"><i class="fa fa-clock-o" aria-hidden="true"></i> Ostatnia wizyta:</div>
                                <div class="value">{$memlastvisitdate}</div>
                            </div>
                            <div class="row">
                                <div class="title"><i class="fa fa-commenting-o" aria-hidden="true"></i> Razem postów:</div>
                                <div class="value">{$memprofile['postnum']}</div>
                            </div>
                            <div class="row">
                                <div class="title"><i class="fa fa-comments" aria-hidden="true"></i> Razem wątków:</div>
                                <div class="value">{$memprofile['threadnum']}</div>
                            </div>
                            <div class="row">
                                <div class="title"><i class="fa fa-comments" aria-hidden="true"></i> Spędzony czas online:</div>
                                <div class="value">{$timeonline}</div>
                            </div>
                            <div class="row">
                                <div class="title"><i class="fa fa-map-marker" aria-hidden="true"></i> Lokalizacja:</div>
                                <div class="value">{$online_status}</div>
                            </div>                            
                            <div class="row">
                                <div class="title"><i class="fa fa-plus-circle" aria-hidden="true"></i> Reputacja:</div>
                                <div class="value">{$reputation}</div>
                            </div>                            
                        </div>
                    </div>
                </div>
            </div>
            
            <div data-element="signature" style="display: none;">
                <div class="stable">
                    <div class="content">
                        <div class="rows-container">
                            <div class="row scaleimages">
                                {$signature}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div data-element="contact" style="display: none;">
                <div class="stable">
                    <div class="content">
                        <div class="rows-container">
                            {$contact_details}
                        </div>
                    </div>
                </div>
            </div>
            
            <div data-element="other" style="display: none;">
                {$profilefields}
                
            </div>
        </div>
    </div>
</div>
    
    
{$footer}
</body>
</html>

- przechodzimy do member_profile_contact_details, usuwamy jego zawartość i dodajemy:

Spoiler

{$website}
    {$sendemail}
    {$sendpm}
    {$contact_fields['icq']}
    {$contact_fields['aim']}
    {$contact_fields['yahoo']}
    {$contact_fields['skype']}
    {$contact_fields['google']}

 

- przechodzimy do member_profile_customfields, usuwamy jego zawartość i dodajemy:

Spoiler

<table border="0" cellspacing="{$theme['borderwidth']}" cellpadding="{$theme['tablespace']}" class="tborder tfixed" id="other">
<colgroup>
<col style="width: 30%;" />
</colgroup>
{$customfields}
</table>
<br />

 

- przechodzimy do member_profile_email, usuwamy jego zawartość i dodajemy:

 

Spoiler

<div class="row">
    <div class="title">
        <i class="fa fa-envelope" aria-hidden="true"></i> E-mail:
    </div>
    <div class="value">
        <a href="member.php?action=emailuser&amp;uid={$memprofile['uid']}">{$lang->send_user_email}</a>
    </div>
</div>

 

- przechodzimy do member_profile_pm, usuwamy jego zawartość i dodajemy:

Spoiler

<div class="row">
    <div class="title">
        <i class="fa fa-envelope-o" aria-hidden="true"></i> Prywatna wiadomość:
    </div>
    <div class="value">
<a href="private.php?action=send&amp;uid={$memprofile['uid']}">{$lang->send_pm}</a>
    </div>
</div>

 

- przechodzmy do member_profile_referrals, usuwamy jego zawartość i dodajemy:

Spoiler

{$memprofile['referrals']}

 

- przechodzimy do member_profile_reputation, usuwamy jego zawartość i dodajemy:

 

Spoiler

{$reputation}

 

[/hide]

 

To byłoby na tyle w tym poradniku, po wprowadzeniu zmian wystarczy F5 i profil zmieniony, za niedługo udostępnię więcej swoich kodów, poradników oraz zleceń kodowanych dla innych ludzi.

 

Pozdro Limit.

 

 

 

 

 

 

 

 

 

 

  • Lubię to! 9
Odnośnik do komentarza
  • Użytkownik∙
Marves Lider STREFY

Marves

Opublikowano
  • Użytkownik∙
Opublikowano

___________________________________________________________________________________
Wiadomość wygenerowana automatycznie.
Temat został zamknięty przez Moderatora.

Powód: Temat Zamknięty.

onDOqcR.png

Jeżeli się z tym nie zgadzasz raportuj ten post, a Moderator lub Administrator rozpatrzy go ponownie.
Z pozdrowieniami.
Administracja StrefaSkilla.pl
___________________________________________________________________________________

Odnośnik do komentarza
  • 5 miesięcy temu...
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.
Tematy

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Zapoznaj się z polityką prywatności forum Polityka prywatności oraz regulaminem forum Regulamin

  Akceptuję
  • Opiekun [MIRAGE #1]
  • Opiekun [MIRAGE #2]
  • Opiekun [1VS1]
  • Opiekun [AWP #1]
  • Opiekun [AWP #2]
  • Opiekun [SURF]
  • Opiekun [MIR/CACH]
  • Opiekun [5VS5]
  • Opiekun [DR+KLASY]