O szablonach, ich projektowaniu i moich z tym zmaganiach...
Blog > Komentarze do wpisu

Czaruję archiwum bloksa (zwinięta lista miesięcy wg. Szymona)

Zwinięcie archiwum wydawało mi się bardzo trudnym zadaniem. Nic bardziej mylnego. S.z.y.m.o.n przygotował bardzo dokładną instrukcję, w zasadzie lekcję zwijania, która jest cudownie szczegółowa ale może nieco odstraszać swoim rozmiarem i dokładnością. Składa się z trzech notek:

Zapewniam, że aby zwinąć archiwum nie musisz się niczego uczyć, możesz być tak bardzo odporny na wiedzę jak tylko Ci pasuje i nawet całych wpisów nie musisz czytać.

Zwinięte archiwum

Szymon rewelacyjnie pisze notki więc wystarczy, że przejrzysz wpisy zawieszając wzrok jedynie na nagłówkach - bez problemu znajdziesz trzy niezbędne informacje, które układają się w prostą instrukcję:

  1. pobierz plik skryptu i dodaj go do zasobów (cz.1 Wykorzystanie skryptu na bloksie)
  2. kod wywołania wpisz w polu na dodatki (cz.1 Wykorzystanie skryptu na bloksie)
  3. skopiuj kod css zwijający archiwum (cz.3 Gotowe szablony CSS)

Czyli interesuje cię tylko sam początek pierwszej notki i dwa linki na końcu ostatniej. Jeżeli korzystasz z jednego z szablonów zrobionych przeze mnie to opis wyglądu zwiniętego zapewne jest już dodany i dopasowany do wyglądu bloga. Wystarczy więc, że dodasz skrypt do zasobów bloga a kod wywołania wkleisz w polu na kod HTML.

 

Jeżeli korzystasz z szablonu zrobionego przeze mnie to opis wyglądu zwiniętego archiwum powinien być już dodany do kodu CSS aby się o tym upewnić przeczytaj notkę opisującą szablon, tam w tabeli wpisane są wszystkie dodatkowe rzeczy, które opisałam. Jeżeli fraza zwinięte archiwum z linkiem do szymonowego bloga nie pojawia się to zapewne dodatek ten nie jest opisany. Z tego co pamiętam to we wszystkich szablonach na starym kodzie go opisałam ale mojej pamięci daleko do doskonałości więc upewnij się.

skrypty użytkowników, wklejki

Działanie skryptu

Zasada jest prosta: skrypt tworzy listę wypunktowaną, hierarchiczną dzięki czemu będzie można ją zwinąć i ukryć. Skrypt dotyczy jednak archiwum w tzw. starym kodzie a więc jeżeli korzystasz z jednego z szablonów dostępnych na blogu stylekatemac.blox.pl (czyli pisanego na nowym kodzie) to na pewno ten skrypt nie jest opisany bo na nowym kodzie nie działa.

Skrypt zwijający archiwum nie działa na blogach z szablonami na nowym kodzie (new_age).

Archiwum po samym zastosowaniu skryptu nie prezentuje się najlepiej, sam skrypt nie jest odpowiedzialny za kwestie estetyczne ale nie ma się czym martwić bo Szymon tłumaczy jak zacząć czary. 

Przeskocz do części opisującej wygląd ↓

Pora na bardzo dokładną instrukcję

W pierwszej notce opisującej skrypt odszukaj fragment zatytułowany: Wykorzystanie skryptu na bloksie. Umieszczony jest tam zarówno link do skryptu jak i kod wywołujący skrypt do wklejenia na blogu.

testblog skrypt zwijający archiwum na bloksie

  • Pobierz plik blox.archmenu.js i dodaj do zasobów swojego bloga.
    • aby pobrać plik kliknij na linku prawym przyciskiem myszy i wybierz opcję Zapisz element docelowy jako... (Zapisz link jako...) - jeżeli klikniesz lewym przyciskiem myszy to zamiast pobrać otworzysz kod skryptu; w takim przypadku dalej możesz skrypt pobrać poprzez zapisanie strony jako... JScript Script File
    • aby dodać plik do zasobów bloga przejdź do edycji bloga, otwórz menu PLIKI i naciśnij przycisk Nowy plik; odszukaj pobrany skrypt i dodaj go do zasobów; możliwe, że blox pokaże ci komunikat, że plik nie został dodany bo nie jest grafiką - to nieprawda, plik jest już w zasobach
  • Wywołanie skryptu sprowadza się do umieszczenia w polu na kod HTML następującego wpisu
    • skopiuj cały podany tam kod, każdy znaczek jest ważny
    • wklej go w polu na dodatkowy kod HTML; w zasadzie nie ma większego znaczenia czy wkleisz go na początku czy na końcu istotne jest jedynie abyś nie wkleił go w środek jakiegoś innego kodu

Gotowe. Skrypt jest na blogu i powinien zamieniać twoje archiwum w nie całkiem ładną listę wypunktowaną. Pora na wygląd.

Wygląd zwiniętego archiwum

W trzeciej notce, na sam koniec Szymon podaje dwa linki do szablonów. Są to fragmenty szablonowego kodu opisujące właśnie to zwinięte archiwum.

Gotowe szablony CSS

Wystarczy otworzyć link, skopiować treść i wkleić na końcu własnego arkusza CSS. Archiwum od razu zostanie odpowiednio zwinięte. Jest to bardzo prosty opis wyglądu, większość kodu dotyczy ułożenia elementów i jedyne wyglądowe rzeczy to opisy kolorów: czarnego i białego.

poziome archiwum pionowe archiwum

Możesz więc zostawić opis wyglądu tak jak jest albo zastąpić opisy kolorów: black i white.

Ja preferuję poziome archiwum więc takie umieszczam w moich szablonach. Zazwyczaj ograniczam się jedynie do zmiany kolorów więc zapewniam, że dostosowanie wyglądu archiwum do reszty szablonu jest banalnie proste.

Zwinięte archiwum, pozioma lista lat

Pora na konkretny przykład. Dopasować trzeba tylko te fragmenty kodu, które dotyczą koloru. Reszta jest bardzo elastyczna i sama dostosuje się szablonu.

Kod od Szymona »

#nav ul - tutaj możesz opisać kolor tekstu lat a także tło i ramkę dla rozwiniętej listy miesięcy
#nav li:hover, #nav li.over - generalnie kolor tekstu po najechaniu na rok
#nav a - linki czyli w zwiniętym archiwum tylko lista miesięcy, która widoczna będzie dopiero po najechaniu na rok
#nav a:hover - linki na liście miesięcy po najechaniu kursorem

Dopasowując kod Szymona do wyglądu szablonu na tym blogu wprowadziłam kilka kolorystycznych zmian i właśnie w tym miejscu proponuję wprowadzać zmiany:

#nav ul {
    border: 1px solid #DCD3C9;
    background: #EBE2D1;
}
#nav li {
    color: #D71149;
}
#nav li:hover, #nav li.over {
    color: #B52A51;
}
#nav a {
    color: #D71149;
}
#nav a:hover {
    color: #B52A51;
}


Przykłady z istniejących szablonów

Zwinięte archiwum z szablonu lucifix szablon: LUCIFIX

wygląd:

  • pozioma lista lat
  • lista miesięcy na białym tle otoczona delikatnym cieniem

style: skopiuj kod

 

Zwinięte archiwum z szablonu kultivatingszablon: Kultivating

wygląd:

  • pozioma lista lat
  • lista miesięcy na białym ozdobionym wzorkiem z czarnych kropek

style: skopiuj kod

 

Zwinięte archiwum z szablonu inspirationszablon: Inspiration

wygląd:

  • pozioma lista lat
  • lista miesięcy na białym tle otoczona delikatnym cieniem
  • miesiąc po najechaniu zyskuje czarne tło

style: skopiuj kod


Podsumowując zwijane archiwum to nie taka trudna sprawa. Dzięki gotowym CSSom i wyjaśnieniom zwinięcie archiwum to kwestia chwili. Tak więc Szymonowi dziękuję za bardzo użyteczne czary.

piątek, 07 grudnia 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2007/12/08 13:10:08
Odpisałam Ci przed chwilą u mnie pod Twoim komentarzem, wracam, aby Ci powiedzieć, ale widzę, że już nieaktualna jest moja wypowiedź, bo archiwum naprawione:)
-
2007/12/08 13:27:18
Ja wybrałam pionowe menu, bo nie byłam pewna jak zachowa się szpalta, gdy obok siebie będzie więcej roczników. A jeśli szerokość archiwum przekroczy szerokość szpalty wąskiej, to co wtedy?
Kate, nie możesz do szablonów, które ogólnie udostępniasz wstawiać zwijanego menu, bo w czasie kopiowania nie przechodzi na drugi blog. Raz zrobiłam taki szablon na zamówienie i nie przekopiowało się archiwum. Chyba, że umieścisz gdzieś skrypt do skopiowania, ale nie pamiętam, czy w nim nie nanosi się indywidualnych danych. Ten skrypt w formie pliku tez się nie przekopiował.
Są osoby, które nie potrafią nawet wkleić go do pola na HTML. A czasmi jest tak, że po wklejeniu jednego skryptu nagle inny przestaje funkcjonować. Szkoda, że w tym kierunku nie idą zmiany na Bloxie. Aby to co teraz umieszczamy poprzez skrypty można było zapisać CSSem, no może choć część. Np. ostatnie komentarze, czy choćby zwijane menu i to nie tylko archiwum. Wszystkie zmiany idą w kierunku zwiększenia popularności, większej dostępności.
-
2007/12/08 13:34:48
Kate, to znowu ja. Zauważyłam, ze na niektórych blogach nad notką widnieje napis kategorii do jakiej została przydzielona, a na niektórych nie ma tego. Wiem, wiem, ze to jest nowa opcja. Ale mam na myśli sytuację na blogach przystosowanych do tej opcji. Ty na szblonach masz, a tu nie. Gdy wchodzę na blog Jejuków (ten prawdziwy) też jest (dostosowałam go do opcji), natomiast na moim blogu nie ma, choc też mam poprawiony. Czy znowu w coś nie kliknęłam?;))
-
kate_mac
2007/12/08 17:27:48
primo: nie naprawiony bo tak jestem zajęta nowymi szablonami, że nie mogę się wręcz oderwać; komentarz przeczytałam i będę działać w tej sprawie nieco później
secundo: szerokością swojego archiwum się nie przejmuję bo przy generalnych porządkach w szablonie zlikwiduję wyświetlanie archiwum
tertio: CSS ze zwijanym archiwum będzie dodatkiem, jak ktoś będzie chciał skorzystać będzie musiał sobie u Szymona przeczytać jak zainstalować a ode mnie skopiować fragment CSS który udostępnię w pliku tekstowym

nie wiem już w jakim języku liczę (włoski czy łacina) i nie wiem więc jak mam napisać po czwarte ;)
po czwarte po polsku: napisz mi na próbnych jejujkach adresy to wieczorem (raczej bardzo późnym) zobaczę o co chodzi bo teraz znikam
-
2007/12/08 22:42:53
Kate, help!!! Okropna rzecz się stała. Dałam skończony szablon do skopiowania. Myślałąm, że wszystko jest w porządku, ale popatrzyłam okiem IE i tragedia. Ten obrazek dzieci na zielonym pasku zrobiony w fotoszopie, aby miezy obrazkami była przeźroczystość w IE tej przeźroczystości nie ma!!! Kate, ratuj proszę. Co ja mam zrobić. Przeciez to nie możliwe, żeby IE była tak ślepa i nie widziała mojej żmudnej pracy. Błagam Cię powiedz jak temu zaradzić.
Pechowy ten szablon, albo dzisiejszy dzień. To jeszcze nie wszystko, bo okazało się, ze tego obrazka z planetą tez nie było w IE. Uff, ale z tym sobie poradziłam.
-
kate_mac
2007/12/09 08:43:10
ok skoro z ziemianami sbie poradziłaś to nawet nie zastataniwałam się czemu tak się stało ;)
co do jejuków to rzeczywiście problemem jest IE; z nieznanych mi bliżej powodów IE nie wyświetla przezroczystości w png;
jak zerkniesz na tą stronę w IE to zobaczysz że obrazek blockqute wygląda nienajlepiej; wniosek jest jeden nie używać png przy szablonach; zamiast png robić grafiki w jpg a jeżeli przezroczystość jest konieczna to gif
-
2007/12/09 10:29:06
Kate, bardzo, bardzo Ci dziękuję za obrazek, jesteś kochana:***. Nawet go poprawiłaś, bo teraz jest dokładniej wymazany:) Dobrze, że już wiem o niechęci IE do png. Ciągle mnie IE zaskakuje;)
A co do tego szablonu, wreszcie zrozumiałam zasadę działania !important.
Tam jest tego bez liku. Postawione przy colorze czcionki nie pozwala w edycji zmienić jej barwy. Przy rozmiarze, rozmiaru itd. Dzisiaj alarmowała mnie Lotka, że chciała pokolorować, a tu się nie da. Ja jednak najlepiej pojmuję teorię w działaniu praktycznym:)
-
kate_mac
2007/12/09 11:15:26
Nie ma za co :*
robiąc szablony doszłam do wniosku że wolę przetwarzać, robić kolaże niż tworzyć od zera; najlepszym tego przykładem będzie żółta grafika do nowego szablonu; nie potrafię nawet zrobić swobodnie porozrzucanych kształtów w grafice, zawsze wydaje mi się, że to źle wygląda, wolę jeden wyrazisty i do tego jakiś w miarę jednolity wzorek (tak było z liściem w 11 i 10); ale do żółto niebieskiego zrobiłam grafikę "od zera"; zobaczymy jak to będzie ;)
!important to ciekawe, nie wiedziałam; nie lubię jak ktoś zmienia w edycji kolor czcionek które wybrałam; nie lubię nie dlatego że zmienia ale dlatego że w Tiny najprościej wybrać kolory proste (webowe) które często gryzą się z tymi których ja użyłam; bo nie każda czerwień pasuje do każdej czerwieni
-
2007/12/09 14:43:16
Kate, masz podziękowanie od Lotki we wpisie w jej Albumie. Zerknij sobie. Tam jest cała gama kolorów, jeśli już o nich wspomniałaś:) oto link jejukowyswiat.blox.pl
Powiedziałam jej, ze zrobiłaś w obrazku przeźroczystość.
A co do zmian w szablonach, zaczynam się wkurzać. Utknęłam na "Kruchosći serca". Zaden z proponowanych na forach i w pomocach sposób nie obniża ostatnich notek na stronie komentarzowej, tak aby nie obsunąć przy okazji umieszczonego w wąskiej szpalcie obrazka (oczywiście też na stronie komentarzowej). No nic, zgrzytam zębami i idę dalej:) W dodatku nie mam nawet czasu prowadzić własnego bloga.
-
kate_mac
2007/12/09 21:39:01
nie przejmuj się zmianami; jest dużo czasu a ty właśnie zrobiłaś szablon na zamówienie więc daj sobie trochę przerwy; jutro zerknę na kruchość i może coś mi wpadnie do głowy to Ci podpowiem;
-
2007/12/10 10:25:06
Kate, z radością donoszę, że Kruchość przełamana:) Wreszcie udało mi się, ale prawdę mówiąc w tej chwili nie pamiętam jak to zrobiłam. Będę musiała to sobie gdzieś zapisać;) Dziękuję za zrzuty ekranowe i zapytuję, dlaczegoż to ja tego nie widzę? O tym, że tam jest jeszcze dłoń, pojęcia nie miałam. A już zupełnie wystraszył mnie jej kolor na moim szablonie. Wczoraj, robiąc u siebie zmiany z linkiem w tytule notki, nagle zauważyłam, że info pod tekstem mam na czerowno. Samo się zamieniło. oczywiście już to poprawiłam, ale skąd ten kolor?!
-
kate_mac
2007/12/10 10:33:43
nie martw się ta dłoń to było takie małe Fun ;)
sama ją zrobiłam na zrzucie :P
-
2007/12/10 12:09:10
Wot, szutnik!;) No ok. ręka wyjaśniona, ale dlaczego nie widzę kategorii?! Dodam, że u Ciebie tez nie widzę. Widzę jedynie u Lotki, bez klikania w cokolwiek.
-
kate_mac
2007/12/10 12:53:52
hmm
to rzeczywiście ciekawe
nie jestem pewna ale lotka chyba ma ustawione aby blog otwierał się na konkretnej kategorii i dlatego widać już na wejściu
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...