Masz pomysł na lepszy wygląd?

Transkrypt

1 Właśnie zrobiłem świetne narzędzie dla ludzi z wyobraźnią i wyczuciem smaku :) No właśnie mogę się pochwalić nowym narzędziem, jakie zrobiłem w panelu (do tego są potrzebne uprawnienia, jak ktoś zna się na kolorystyce, to nadam mu takowe). A wygląda to tak: Jak to działa? Ano w ten sposób, że zaciąga oryginalne style ze strony do panelu i pozwala je edytować. Oczywiście nie będzie to miało wpływu na stronę, nie zmieni to oryginalnych stylów, ale umożliwi zapisanie i podgląd efektu tejże roboty. Jest to bezpieczne, można nawet usunąć je wszystkie, albo narobić poważne błędy i zapisać... Nic się nie stanie. Po wciśnięciu przycisku "pokaż na stronie" pokaże efekt zmiany wyglądu. Będzie on widoczny pod specjalnym linkiem, który będzie można wkleić do komentarza, żeby wszyscy mogli zobaczyć jak to wygląda. Ale co jest najfajniejsze? To narzędzie do edycji kolorów... Wystarczy tylko w tekście zaznaczyć myszką dowolny kolor (np. #123456), aby pokazał on się w tym kolorowym widgecie. Następnie na nim można ten kolor zmienić, a po wciśnięciu przycisku "użyj tego koloru" nowa wartość zostanie podmieniona... Tylko kliknąć przycisk "zapisz i kontynuuj edycję" a następnie przycisk "pokaż na stronie", aby obejrzeć efekt podmiany kolorów i innych stylów... Masz pomysł na lepszy wygląd? 1

2 Więc jak ktoś ma koncepcję, zna się na kolorystyce, to zachęcam do zabawy i pokazania swojej wizji... Jest to bezpieczne i nic się nie popsuje. Css jest prosty. Proszę się nie bać tych krzaczków - one tylko z pozoru wyglądają groźnie... W html-u mamy tzw. tagi, a te tagi są z parametrami. Dla przykładu: <div id="jakis_unikalny_identyfikator_elementu"> <div class="jakas_klasa_elementu"> jakiś tekst, który wyświetla się na stronie, a który jest zawartością tych elementów </div> <!-- zamknięcie div-a o klasie "jakas_klasa_elementu" --> </div> <!-- zamknięcie div-a o identyfikatorze "jakis_unikalny_identyfikator_elementu" --> I teraz jak to stylować... div - jest to element html-a atrybut "id" - tutaj jak chcemy, to możemy zdefiniować unikalny identyfikator elementu. W tym przykładzie ma on wartość "jakis_unikalny_identyfikator_elementu" atrybut class = jest to klasa danego elementu. Nie jest ona unikalna i można ją powtarzać w wielu miejscach. W tym przykładzie mamy klasę "jakas_klasa_elementu" I teraz jak chcemy to stylować w css-ie, to trzeba wiedzieć, że znaczek # odnosi się do id-u elementu. Czyli, jak chcemy ostylować div-a o identyfikatorze "jakis_unikalny_identyfikator_elementu", to robi się to bardzo prosto: #jakis_unikalny_identyfikator_elementu { background-color: #888888; Znaczek kropki '.' odnosi się z kolei do klasy. Jak chcemy ostylować jakiś element o klasie jakas_klasa_elementu, to tę nazwę musimy poprzedzić kropką:.jakas_klasa_elementu { border: 1px solid #FF00FF; Masz pomysł na lepszy wygląd? 2

3 Natomiast jak chcemy ostylować element html-owy bez względu na klasę, czy identyfikator, to należy użyć jego nazwy bez kropki i hasha: div { margin: 10px; Trzeba pamiętać, że najpierw jest klasyfikator elementu (w ostatnim przykładzie to div), następnie klamra otwierająca, potem nazwa parametru, dwukropek, wartość i na końcu średnik. Cała definicja kończy się oczywiście zamykającą klamrą. Jak ktoś jest zainteresowany, to potem przedstawię więcej szczegółów tej techniki stylowania, jak to zrobić szybko i bezboleśnie... Teraz idę spać. Jutro dam przykłady takiej zabawy... Następna lekcja - jak pracować, żeby się nie namęczyć? 1. Zainstalować sobie dodatek do firefoxa "firebug" - działa to pod przeglądarką firefox - profesjonalne i zupełnie darmowe narzędzie do tego typu zadań. Jak ktoś używa innych przeglądarek, to powinien się przełamać i zainstalować sobie w końcu firefoxa. Nie trzeba ustawiać jej jako domyślnej przeglądarki, ale do pracy na html-u, kolorystyce nie ma lepszej! Link do pobrania dodatku do firefoxa: Po ściągnięciu i zainstalowaniu należy zamknąć i powtórnie uruchomić firefoxa, a następnie na przeglądarce znaleźć guziczek wyglądający jak to: (tylko ten przycisk będzie czarno-biały - jak się wciśnie i aktywuje, to będzie wyglądał jako to :) 2. Ten obrazek pokazuje to w działaniu: Masz pomysł na lepszy wygląd? 3

4 Oznaczyłem tam "Przycisk inspekcji". Jeśli go wciśniemy, po czym myszką najedziemy na dowolny element strony html i klikniemy w ten element, to z prawej strony tego dodatku firebug pokażą nam się style tego wciśniętego elementu. Można je edytować. Można wstawić nowy kolor i zobaczyć, jak to wygląda. W tym przykładzie najechałem myszką na tę brązową belkę z napisem "DODAJ KOMENTARZ" i firebug wyświetlił fragment tego html-a i odpowiadające mu style - czyli "h3.comment_head". Co widzimy w tych stylach? Ano to, że kolor tła jest to #7A6749 (backgroubd-color), kolor czcionki to biały (#FFFFFF - color), kursor to pointer (czyli jak najedziemy na tę belkę myszką, to myszka zamienia się na łapkę i wszyscy myślą, że to jest link), czcionka jest pogrubiona (font-weight ustawiony na bold), margines, czyli odległość tego elementu od innych elementów w html-u (zgodnie ze wskazowkami zegara od godziny 12 - czyli na górze mamy odstęp 20px, z prawej 0px, na dole 0px, a z lewej 2px, padding to odległość tego napisu "DODAJ KOMENTARZ" od granic tego elementu - czyli 5px. Na koniec to text-tranform - czyli taki styl, który konwertuje napis w tym przypadku na wielkie litery. Dzięki temu narzędziu można odnaleźć fragment w css w tym panelu, który odpowiada za jego wygląd i w łatwy sposób poprawić. Firebug w działaniu: W dalszej części powiem więcej na temat stylowania, jak samodzielnie ostylować dowolny fragment html-a, o tych selektorach css-a, bo to jest chyba tam najważniejsze. Pozdrawiam Masz pomysł na lepszy wygląd? 4

5 Author: Obsługa techniczna Masz pomysł na lepszy wygląd? 5