Nieruchomy pasek ala FB + mini foto

[Gość MotyF]

Co zrobić, aby pasek z ikonkami (góra) był nieruchomy a dodatkowo zawierał mini foto przy nazwie?

1. W panelu administracyjnym dodajemy w naszym skinie w global_template wpis o treści

<!-- mobileo -  mini foto--><img src='{$this->memberData['pp_small_photo']}' alt="{$this->memberData['members_display_name']}{$this->lang->words['users_photo']}" class='ipsUserPhoto ipsUserPhoto_mini_header' />  <!-- konic mini foto-->

Dodajemy go w tym miejscu

<li><a id='user_link' href="{parse url="showuser={$this->memberData['member_id']}" seotitle="{$this->memberData['members_seo_name']}" template="showuser" base="public"}"  title='{$this->lang->words['your_profile']}'>[b]<!-- Mobileo -  dodaje mini foto--><img src='{$this->memberData['pp_small_photo']}' alt="{$this->memberData['members_display_name']}{$this->lang->words['users_photo']}" class='ipsUserPhoto ipsUserPhoto_mini_header' />  <!-- konic mini foto-->[/b]{$this->memberData['members_display_name']}  <span id='user_link_dd'></span></a></li>

Ten zabieg spowoduje, że obok nazwy pojawi się foto i będzie ono jednocześnie linkiem do rozwijanej karty profilu. Ale to zdjęcie jest duże. Jak widać w powyższym wpisie zdjęcie dostało klasę ipsUserPhoto_mini_header. Więc w głównym pliku CSS czyli ipb_style dodajemy wpis

	.ipsUserPhoto_mini_header { width: 25px; height: 25px; }

najlepiej dodać do już istniejących wpisów klas zdjęć co wygląda wtedy tak

.ipsUserPhoto_variable { max-width: 155px; }
.ipsUserPhoto_large { max-width: 90px; max-height: 90px; }
.ipsUserPhoto_medium { width: 50px; height: 50px; }
.ipsUserPhoto_mini { width: 30px; height: 30px; }
.ipsUserPhoto_mini_header { width: 25px; height: 25px; }
.ipsUserPhoto_tiny { width: 20px; height: 20px; }
.ipsUserPhoto_icon { width: 16px; height: 16px; }

teraz zdjęcie jest małe i ładne.

Nieruchomy pasek. Musimy ustalić mu atrybut position: fixed;

Dokładnie w tym samym pliku stylu, co powyżej. Jest on zawsze wczytywany, więc każda aplikacja odziedziczy nowe ustawienia.

Szukamy w pliku ipb_styles #header_bar

W oryginale wygląda on tak:

#header_bar {
background: #323232 url(http://www.symbianforum.pl/public/style_images/master/user_navigation.png ) repeat-x bottom;
padding: 0;
text-align: right;
}

Dodajemy mu 3 ostatnie linijki i wygląda tak:

#header_bar {
background: #323232 url(http://www.symbianforum.pl/public/style_images/master/user_navigation.png ) repeat-x bottom;
padding: 0;
text-align: right;
position:fixed;
width: 100%;
z-index: 9999;
}

position-fixed czyli zawsze na górze, szerokość 100% i z-index 9999 (teoretycznie 999 jest najwyższą wartością ale ...), a więc zawsze na górze (klasyfikacja warstw).

Teraz jeszcze jeden wpis do #branding czyli niższego paska z logo.

Musimy go obniżyć o wartość wysokości nieruchomego paska.

W tym samym pliku stylów szukamy #branding i z

#branding {
background: #0f3854 url(http://www.symbianforum.pl/public/style_images/master/branding_bg.png) repeat-x bottom left;
border-bottom: 1px solid #1b3759;
min-height: 64px;
}

robimy

#branding {
background: #0f3854 url(http://www.symbianforum.pl/public/style_images/master/branding_bg.png) repeat-x bottom left;
border-bottom: 1px solid #1b3759;
min-height: 64px;
padding-top: 36px;
}

Gotowe. Jeżeli nie widać zmian - CRTL+F5 lub przebudowa skina.

Tekst z bloga:

www.symbianforum.pl/blog/1/entry-19-jak-zrobic-nieruchomy-pasek-ala-facebook-w-ipb/

Powyższy tekst jest chroniony prawem autorskim. Można rozpowszechniać pod warunkiem podania źródła. 2012 © MotyF - Mobileo

[Booski]

a jakiś ss by się przydał

[Amfidiusz]

Po co screenshot, skoro masz demo?

[Gość MotyF]

Jak chce - proszę.

[dudeka]

Poradnik świetny, dałoby radę zrobić tak z menu ? ;>

Od razu coś napiszę, zauważyłem że rejestrując się na Twoim forum poprzez FaceBook'a nie da się ustawić własnego nicku, tutaj masz rozwiązanie :

[Gość MotyF]

Menu można dodać do paska, i za pomocą prostego JS inkludowanego w stylu pokazać co się chce na zasadzie <li>.

Nie wiem czy o to Ci chodziło ? Sory za kolor - nie miałem nic pod ręką

Edytowane 22 Marca 2012 przez MotyF