Skocz do zawartości
"Idzie nowe..." - o zmianach i nie tylko ×
Przeniesienie zakupów z IPS Marketplace / Moving bought items from IPS Marketplace ×

Nieruchomy pasek ala FB + mini foto


Gość MotyF

Rekomendowane odpowiedzi

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

Odnośnik do komentarza
Udostępnij na innych stronach

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 przez MotyF
Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
  • 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

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę.