eksperymenty z internetem, blogami, bloxem, javascriptem, firefoxem czy różnymi użytecznymi programami czy narzędziami, tak okołoinformatycznie tudzież okołokomputerowo...
Blog > Komentarze do wpisu

blox i edycja CSS "na żywo"

Dla wszystkich, którzy eksperymentują z wyglądem swojego bloga i majstrują w arkuszu CSS, szczerze polecam rozszerzenie Web Developer do przeglądarki Firefox. Tym samym szczerze zachęcam do instalacji Firefoxa (linki w panelu bocznym). Tym, którzy jeszcze nie mają, polecam od razu wersję 2. Tym, którzy już mają, wystarczy instalacja podanego rozszerzenia...
Rozszerzenie to ma mnóstwo narzędzi bardzo przydatnych dla deweloperów stron internetowych, ale we wspomnianym kontekście edycji CSS chciałbym zwrócić uwagę na możliwość edycji arkusza stylu związanego z wyświetlaną stroną, przy czym efekty tej edycji widać natychmiast na przerabianej stronie!
To niewiarygodnie wygodne i efektywne, bo oszczędza sporo pracy, którą trzeba poświęcić na ciągłe ładowanie przerobionego arkusza, sprawdzanie efektów, poprawki, ładowanie arkusza, sprawdzanie, poprawki, ...

Procesu instalacji nie opisuję, bo jest moim zdaniem intuicyjny. Po instalacji rozszerzenia pojawi się dodatkowy pasek narzędziowy w przeglądarce.

Wystarczy teraz uruchomić własny blog a potem wejść w menu CSS i wybrać Edit CSS (można też użyć skrótu klawiszowego Ctrl+Shift+E). W ten sam sposób zamyka się edytor.

W bocznym panelu po lewej stronie pojawi się dodatkowy panel, która zawiera arkusz CSS związany ze stroną.


Teraz można już dowolnie grzebać w elementach CSS.

Szybką deaktywację pojedyńczej linii wpisu w arkuszu uzyskamy po wpisaniu "//" na jej początku. Później jednak warto się pozbyć tych linii, bo po przekopiowaniu zmian do ostatecznego wyglądu bloga, te linie komentarzy będą ignorowane w Internet Explorerze powodując różnice w wyglądzie między przeglądarkami.
Stałą deaktywację linii uzyskamy po ujęciu linii w zapisy "/* zawartość linii */". W ten sposób można "zakomentować kilka linii, stawiając przed pierwszą "/*" i za ostatnią "*/" i taką składnię Internet Explorer akceptuje, ignorując tak zaznaczone linie.
Efekt pojedyńczej zmiany w arkuszy będzie widoczny dopiero po prawidłowym wpisie.Należy pamiętać o średnikach.
Warto też tak sobie uporządkować wpisy w arkuszu, żeby w jednej linii był wpis dotyczący jednego atrybutu stylu. W ten sposób lepiej się panuje nad zawartością. Warto też stosować delikatne "wcięcia" - ja korzystam z pojedyńczej spacji. Ale to są już sugestie tylko i wyłącznie związane z własnymi standardami pracy.

UWAGA-1: jeśli edytując styl strony przełączymy się na inną, to wtedy możemy stracić to co edytowaliśmy, bo rozszerzenie załaduje arkusz z innej otwieranej strony. Można się przed tym zabezpieczyć kilkając na niebieską strzałkę "zamrażającą" arkusz CSS (patrz powiększony obrazek).

UWAGA-2: bawiąc się tym edytorem nie zmieniamy zawartości arkusza CSS przypisanego do bloga. To są tylko zmiany w locie!
Gdy już uznamy pracę za skończoną, to wtedy w okienku edytowanego arkusza wciskamy Ctrl+A, zaznaczając wszystko. Wystarczy teraz skopiować i wkleić zawartość do arkusza stylów bloxa. Można też tę zawartość edytować (uporządkować) w innym edytorze a potem całą zawartość wkleić do tego edytora, żeby zobaczyć efekty.

Oczywiście do eksperymentów zalecane jest minimum wiedzy o kaskadowych arkuszach stylów. W internecie można znaleźć sporo dokumentów z wiedzą na ten temat. Wystarczy zapytać Google...
Warto też wiedzieć co nieco o budowie strony każdego bloxa. W tej sprawie polecam szczególnie ten wpis z bloga css.blox.pl.


Życzę udanych eksperymentów :)
czwartek, 02 listopada 2006, sgk

Polecane wpisy

  • usunięcie pomarańczowej "belki promocyjnej" bloxa

    Dziś rano na moich blogach zaskoczył mnie ( i nie tylko mnie ) taki widok: Nie mam pojęcia co to za pomysł, bo zapowiedzi administratorów nigdzie nie widziałem.

  • permalinki do komentarzy na blox.pl (user.js)

    W czasie gdy debergerac udoskonala swój skrypt do awatarów osób komentujących na blox.pl (ostatnio dodał awatary z blip.pl ) ja postanowiłem zająć się czymś, c

  • takie prace warto propagować

    Mimo, że kilka dni temu zrobiłem już o tym wzmiankę w minizapiskach , ale wciąż jestem pod wielkim wrażeniem graficznej doskonałości nowego projektu SenTineLa

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
nauma
2006/11/03 00:36:36
Faktycznie, niezłe urządzonko, właśnie je wykorzystałem :)
-
Mr.Yez
2006/11/07 23:50:29
Brzmi wręcz bajkowo; ja całe godziny spędzam nad CSS-ami do moich dwóch blogów, przymierzam i przymierzam, normalnie gorzej niż kobieta w sklepie z ciuchami ;-)
Jutro na spokojnie zainstaluję to i wypróbuję. Jeśli wszystko pójdzie zgodnie tak jak piszesz, to będzie to kolejny krok w stronę pewnego przeglądarkowego trendu, który ostatnio zauważam:

Otóż, mam wrażenie od jakiegoś czasu, że Firefox przestaje być dla mnie przeglądarką. Odkąd pamiętam, FF był tą alternatywną, w której czasem coś się oglądało dla porównania. Ale ostatnio, za sprawą świetnych rozszerzeń nie służących przeglądaniu, zamienia się powoli w narzędzie bardziej specjalistyczne. Póki co wpisy na bloga robię przez Performancing, a jeśli teraz dojdzie jeszcze to... To okaże się, że Firefox stanie się czymś w rodzaju centrum web-developerskiego, a do normalnego, codziennego czytania internetu pozostanie mi, jak zawsze, Opera :-)
-
bartek9011
2006/12/28 17:18:42
Witam !!!
Nie mogłem znaleźć tego tematu w archiwum wątków, więc zwracam się do
Was. Czy w jakiiś sposób możliwe jest wstawienie
skryptu java do kodu CSS. Chodzi mi o wstawienie reklam Google Adsense pod
kategorie na górze strony i po prawej stronie (na prawym boku strony).
Mój blog to www.bartek9011.blox.pl.
Pozdrawiam
bartek9011
-
sgk
2006/12/29 09:06:09
@bartek9011
Skrypt Java czy skrypt Javascript? To dwie różne rzeczy i przypuszczam, że gdy mowa o AdSense to chodzi o Javascript.
Do kodu CSS nie da się tego wstawić.
Jedyne miejsce do wstawiania kodu na bloxie to pole na kod w Wygląd -> Elementy w panelu administracyjnym. Można jednak wstawić tam własne bloki (div id="") i ostylować je w arkuszu CSS pozycjonując w wybranym przez siebie miejscu, przesuwając inne zdefiniowane elementy strony.
Tak to wygląda ogólnie...
-
kate_mac
2007/10/31 14:02:03
Pomyślałam, że podziękuję Ci też tutaj bo Twoja rada był prosta i skuteczna co sobie wielce cenię więc jestem teraz bardzo zadowolona i wdzięczna Ci za zaoszczędzenie mojego czasu ;) Rewelacja
bloxowe porady

RSS


dodaj do netvibes

Add to Google


pobierz Spiceworks - darmowe oprogramowanie do zarządzania infrastrukturą IT