Joomla!WikiPL

Wiele pytań na forach dotyczy CSS - jak znaleźć styl przypisany elementowi, jak poprawić nieodpowiednie formatowanie. Przedstawiamy w tym artykule, jak rozwiązywać podobne problemy za pomocą dostępnych i wolnych narzędzi.

Ogólnie

Sporą ilość narzędzi i rozszerzeń pomocnych w w projektowaniu witryn internetowych oferuje Firefox. Chris Pederick jest autorem potężnego pakietu narzędzi Web Developer. Rozszerzenie dodaje w menu Narzędzia Twojej przeglądarki pasek projektanta (niewidoczny, gdy nie jest używany). Wśród wielu innych narzędzi, jak walidator niepoprawnych odnośników, generator formularzy i konwerter sposobów przesyłania danych (get na post, post na get), oferuje również wgląd w CSS.

• Popraw CSS [Edit CSS]
• Zobacz CSS [View CSS]
• Dodaj arkusz stylu użytkownika [Add User Syle Sheet]
• Zobacz informacje o stylach [View Style Information]
• wiele innych

Najistotniejszą dla rozważanej przez nas kwestii jest jest opcja View Style Information [Zobacz informacje o stylach]

Oto, dlaczego... Masz niewielkie albo nie masz żadnego doświadczenia w projektowaniu CSS i nie masz zielonego pojęcia, co to jest table.moduletable czy też jak działa Twój szablon. Chcesz zmienić tło nagłówka określonych modułów w swoim szablonie. Opcja Zobacz informacje o stylach, dostępna również za pomocą skrótu klawiaturowego Ctrl+Shift+Y działa, jak następuje. Tworzy celownik, który możesz ustawiać w różnych miejscach. Powiedzmy, że chcesz zmnienić nagłówek oraz rozmiar nagłówka modułu, ale nie masz żadnego pomysłu, jak to zrobić, co zmienić, gdzie zmienić i jak zmienić w swoim szablonie.

W przyborniku (albo naciskając klawisze CTR+SHift+Y) możesz umieścić celownik na górze pożądanego modułu tabeli i - klikając nagłówek modułu zobaczysz poniższa informację:

    table.moduletable th    (line 203)
    {
        background-color: transparent;
        background-image: url(../images/title_background.png);
        background-repeat: no-repeat;
        background-attachment: scroll;
        -x-background-x-position: 0%;
        -x-background-y-position: 0%;
        -moz-background-clip: initial;
        -moz-background-origin: initial;
        -moz-background-inline-policy: initial;
        vertical-align: middle;
        font-size: 11px;
        font-weight: bold;
        color: rgb(204, 204, 204);
        text-align: left;
        text-indent: 15px;
        width: 100%;
        height: 24px;
        text-transform: uppercase;
    }

Czego się tutaj dowiadujesz?

• Dowiadujesz się, że pojemnik przechowujący tytuł modułu nazywa się "table.moduletable.th", więc jest tym elementem, z którym musisz coś uczynić, zaczynając od zlokalizowania w strukturze katalogu swego szablonu i poprawienia za pomocą jakiegoś edytora tekstowego, takiego jak Notatnik (albo rozbudowanego narzędzia, jak Dreamweaver/Zend/etc)
• Możesz teraz zmienić wedle swego życzenia rozmiar etc. :::: zobacz, co jest wyszczególnione? kolor/rozmiar/waga/odstępy/itd.
• Zapisz swoje zmiany i gotowe!

Widzisz, jakie to pomocne rozszerzenie???

Instalacja przybornika jest bardzo prosta i łatwa, choć mogą Ci się przytrafić jakieś drobne problemy. Wykonaj następujące kroki, a powinno pójść dobrze:

1. Pobierz Firefox, jeśli jeszcze go nie masz.
2. Uruchom instalację, wybierz opcję "custom install" (dowolna) i zaznacz pole opcji development tools(narzędzia programisty)..
3. Zainstaluj FF.
4. Uruchom FF > Narzędzia > Dodatki > Pobierz dodatki > Przeglądaj wszystkie dodatki > Narzędzia twórców witryn > Web developer (sprawdź wśród zestawu wyświetlonych albo wyszukaj) Zainstaluj.
5. Zamknij i otwórz ponownie swoją przeglądarkę, a następnie przejdź w Narzędzia > Web Developer > Brak błędów w arkuszu CSS > Wyświetl informacje o stylach (albo skorzystaj ze skrótu klawiaturowego Ctrl+Shift+Y) (Uwaga, od pewnego momentu w polskim tłumaczeniu jest drobny błąd - zamiast opcji CSS mamy Brak błędów w arkuszu CSS).

Nie zapomnij przejrzec innych opcji tego rozszerzenia. Są wartościowe!

Jeśli masz już zainstalowanego "ognistego liska", ale bez narzędzi twórcy witryn (Web Developer Tools), może być konieczne przeinstalowanie Firefoksa.

1. Wybierz z menu głównego przeglądarki Narzędzia > Web Developer, a następnie znów Narzędzia > Inspektor DOM. Jeśli pojawi się okno z komunikatem Aby ta funkcja działała, musi być zainstalowany Inspektor DOM, oznacza to, że FF nie został zainstalowany z narzędziami twórcy witryn.
2. Przeinstaluj więc FF, zaznaczając podczas instalacji opcję Z narzędziami twórców witryn. W ten sposób zapewnisz, ze Inspektor DOM również zostanie zainstalowany. Nie obawiaj się... Wszystkie Twoje wcześniejsze ustawienia FF zostaną zachowane. Przeinstalowanie jest jednak konieczne, inaczej nie będzie działać poprawnie.
3. Po instalacji sprawdź, czy Inspektor DOM został rzeczywiście dodany (znajduje się na karcie paska Web Developera).
4. Jeśli Inspektor DOM jest dostępny, przejdź na stronę rozszerzeń i wykonaj kolejne kroki opisane powyżej.

© Ten materiał jest dokładnym albo swobodnym tłumaczeniem artykułu http://docs.joomla.org/Discover_your_template_css-styles_and_learn_how_to_change_them udostępnionego na licencji JEDL na witrynie: Joomla! Official Documentation Wiki

Dziękujemy za wkład

» Stefan Wajda [zwiastun],