Poradnik stylowania grup #1
Poziom - kompletny nowicjusz, element - górna belka2 comments StylowaGrupa kalmanawardze strimoid.pl 0
Treść
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.
Comments
Super. Kawał dobrej roboty <3
PS kwestie styl dzienny/styl nocny w następnym poradniku, bo to trzeba jednak zaznaczyć.