Poradnik stylowania grup #1

Jako, że g/StylowaGrupa ma uczyć laików, to poradniki będą wyjaśniały nawet najprostsze kwestie, no i dziś jeden z takich właśnie. Czyli pobaw się z górną belką, 5 kroków.

Dziś czytać mogą tylko kompletne laiki ;)

Jutro wrzucę kolejny poradnik, który rozszerzy kwestię zabaw z górną belką o bardziej zaawansowane zabawy, w tym rozwijane listy, możliwości zabaw z własnymi grafikami czy dodawanie grafik do wszystkich elementów.

Natomiast profesjonalne poradniki będą się ukazywały na równi z tworzonymi przeze mnie stylami grup, dzięki czemu będę mógł tłumaczyć na przykładach i screenach wszelkie zawiłości. A na to trzeba poczekać, bo te style muszę... stworzyć ;] Tak więc zaczynamy.

PS Ze względu na lekkie różnice w stylu pomiędzy przypiętą i odpiętą górną belką efekty mogą się różnić, a nie wszystko sprawdzam w obu wersjach, za dużo klikania. W dzisiejszym poradniku takich problemów nie będzie, ale to Post Scriptum będę dodawał do każdego poradnika, póki problem nie zostanie naprawiony przez duxa.

Jak zmienić kolor/grafikę górnej belki

.navbar { background: #fff; border-color: #000; } .navbar .container { background: #fff; }

w .navbar ustawiamy sobie kolor jaki nas interesuje i kopiujemy to samo do .navbar .container (chociaż możecie użyć dwóch różnych, ale sami zobaczycie efekt). W border-color ustawiacie sobie natomiast kolor tej poziomej kreski pod topem.

Jeżeli chcesz aby zamiast jednolitego koloru był gradient, stwórz go sobie za pomocą http://www.colorzilla.com/gradient-editor/ a wyświetlony kod skopiuj zamiast "background:#fff;"

Możesz również wrzucić tam grafikę.

Są dwie opcje, jedna to powielane po całej długości jednolite tło, wówczas zamiast background dajecie background:url(adresurlgrafiki) repeat-x top; jednak nie jest to konieczne, gdyż większość takich powielanych grafik można zrobić gradientem.

Wrzucanie sztywnych grafik w drugim poradniku, bo to wymaga screenów, a te zaprezentuję na przykładzie własnego stylu, który niedługo się pojawi.

Zmiana koloru belki z grupami.

.groupbar { background-color: #1B1B1B; }

Reszta tak samo jak wyżej. Możesz tu dać gradient/grafikę.

Zmieniłem kolory tła w belce, ale potrzebuję zmienić kolory czcionek.

a) Kolor nazwy grupy

.navbar-inverse .navbar-brand {color:#000}

b) Kolor dla linków popularne, nowe, wpisy

.navbar-inverse .navbar-nav>li>a, .navbar-inverse .navbar-nav>li>a { color: #000; }

c) Kolor tła dla aktualnie otwartej karty i czcionka (popularne, nowe, wpisy)

.navbar .navbar-nav .active a, .navbar .navbar-nav .active a:hover, .navbar .navbar-nav .active a:focus { color: #fff; background-color: #fff; }

(color to czcionka, background to tło)

d) zmiana koloru ikonki powiadomień i koloru nicka po prawej:

ul.navbar-right li a.dropdown-toggle {color:#000}

e) jeżeli chcesz aby ikonka i nick miały inne kolory, to wyżej będzie kolorem dla nicka, a poniższe dodaj z kolorem dla ikonki

ul.navbar-right li.notifications_dropdown a.dropdown-toggle {color:#000}

Zmieniamy kolor belki z grupami:

groupbar { background-color: #1B1B1B; }

Kolor czcionki zmieniamy:

.groupbar>ul li a {color:#000;}

Tu pojawia się problem, mianowicie zmieni się również kolor czcionki w rozsuwanym menu, więc należy go przywrócić dodając również:

.groupbar .dropdown-menu a { color:#fff; }

Chcę ustawić własne logo zamiast tekstu.

.navbar-inverse .navbar-brand, .navbar-inverse .navbar-brand {background:url(http://twojurldoimgura)no-repeat left top;font-size:0;width:200px;}

W url podajesz adres swojego obrazka natomiast w width podajesz szerokość owego logo. Rozwiązanie z font-size:0 nie zawsze działa, wiec w następnym szerszym poradniku będzie lepsze rozwiązanie.

To oczywiście tylko kilka miniporad, ale kolejne będą się ukazywały w miarę szybko i regularnie ;)

W razie jakiegoś błędu proszę pisać, niestety robię na szybko po godzinach, więc i trzeźwy nie bywam.

http://i.imgur.com/9IURG9g.png