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

Subtelne szablony

Chyba wreszcie skończyłam z subtelnymi szablonami. Zrobiłam trzy bardzo ładne gotowe projekty, każdy w nieco innym stylu i kolorze a mimo to niemal identyczne. Do każdego z trzech dodałam alternatywne ilustracje tytułowe tak, że jeżeli komuś przeszkadzają niebieskie piksele czy różowe kwiaty może sobie swobodnie wymienić top na bardziej jednolity czy uniwersalny. Napisałam tez notki, które opisują bardzo łatwe zmiany w szablonie: zmianę stronności czy zmianę na szablon jednokolumnowy. W niektórych proponowanych przeze mnie zmianach wystarczy słowo left zamienić na right czy dopisać jedną cechę więcej aby dokonać całkiem istotnej zmiany.


01 szablon subtelny, różowo-oliwkowy

Szablon subtelny 01 - różowo-oliwkowy,
na nowym kodzie, dla blogów na blox.pl. -590px- 


02 szablon subtelny, niebieski

Szablon subtelny 02 - niebieski,
na nowym kodzie, dla blogów na blox.pl. -590px- 


03 szablon subtelny, zgaszony pistacjowy

Szablon subtelny 03 - zgaszony pistacjowy,
na nowym kodzie, dla blogów na blox.pl. -590px- 


Wszystkie one są na nowym kodzie, mają wszystkie elementy wąskiej szpalty zarówno na stronie głównej jak i stronach z pojedynczymi wpisami. Kod do górnego menu mają opisany ale w nowych szablonach dodaję mu nieco inny identyfikator. Dodatkowe elementy w wąskiej szpalcie nie są jak w starych szablonach dodawane ni z gruszki ni z pietruszki ale mają własny kontener i klasę. Jeżeli sam szablon to za mało to przydadzą się jeszcze te wpisy:

środa, 02 listopada 2011, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
felicja79
2011/11/02 12:00:15
Są piękne. Szczególnie niebieski i pistacjowy. Wzięłam sobie na próbę, żeby obejrzeć kod tych nowych szablonów. Nie podoba mi się tylko jedna rzecz, taki drobiazg, ale mnie denerwuje ;-). Jak się przejdzie do wpisu z pojedynczą notką, to wyrazy: "poprzedni wpis" zlewają się z datą napisania notki. Można to poprawić? Czy Tobie to nie przeszkadza?

Podobnie w kalendarzu, wyrazy "poprzedni miesiąc" i "następny miesiąc" trochę dużo miejsca zajmują i fajniejsze byłyby strzałki. Nie wiem, czy to można zmienić?
To takie szczegóły i pytam teoretycznie, bo na razie nie zamierzam korzystać z tych szablonów. Tylko im się przyglądam ;-).

A poza tym chciałam bardzo pochwalić Twoje instrukcje - są genialne. I nie przesadzam :-). Sama ostatnio nic nie napisałam, bo zrobiłam plan notek do napisania i wyszło mi, że wszystkie poza jedną dotyczą zmian w CSS, a ja się nie czuję jeszcze kompetentna, żeby kogoś uczyć czegoś, czego nie umiem. Może Ty o tym napiszesz niedługo? Przedstawię Ci zarys mojej listy. Może coś Cię zainteresuje i też masz to w planach do napisania:

1. Jak zrobić akapity - użycie text-indent.
2. Tagi - zmiana listy wypunktowanej na chmurę tagów.
3. Użycie ozdobników - hr (wiem, że o tym pisałaś, ale chciałam napisać o tym po swojemu, tylko nie wiem, czy jest sens).
4. Jak opisać boksy w CSS (wiem, że pisałaś o boksach, ale pomyślałam o tych, którzy nie mają Twoich szablonów i chcieliby je sobie opisać w CSS).
5. Pozycjonowanie w CSS - pomyślałam, że przydałaby się taka ogólna notka, jak zmieniać położenie różnych elementów w CSS, tylko czy to się objętościowo zmieści w jednym wpisie?
6. Zakładki - tytuły wygląd - tu taki jeden zbiorczy tytuł o wyglądzie zakładek, szczególnie o tym jak ukryć słowo "Zakładki" i jak opisać tytuły zakładek w CSS.
7. Jak zmienić tło szablonu - to proste do opisania.
8. Jak zmienić w CSS wygląd blocquote - to bardzo ciekawe. Nie wiem, czy o tym szczegółowo pisałaś, poza naszą dyskusją w komentarzach.
9. Użycie fieldset, jako ramki w bocznej szpalcie. Jak opisać w CSS i HTML.

Sporo tego i myślę, że mnie na razie przerasta. Ucieszę się, jeżeli coś z tego Cię zainteresuje.

Ja chyba zrobię u siebie taki zbiorczy wpis z linkami do Twoich instrukcji. Sama bardzo często z nich korzystam i na nich się uczę. Warto, żeby jak najwięcej osób trafiło na Twojego bloga :-).
A i wciąż planuję dodać do mojego wpisu o Twoich szablonach linki do wszystkich "moich" ulubionych Twoich szablonów :-).
Dziękuję za wszystkie instrukcje i szablony!
-
kate_mac
2011/11/06 23:26:49
@felicja
Jak się przejdzie do wpisu z pojedynczą notką, to wyrazy: "poprzedni wpis" zlewają się z datą napisania notki. Można to poprawić? Czy Tobie to nie przeszkadza?

To akurat przeszkadza, jest to jedna z rzeczy do poprawienia przy okazji. Z nowym kodem problem polega na tym, że nie zawsze można być pewnym, że to co się chce opisać nie wpłynie na inne elementy. Klasy są poprzypisywane według klucza, który nie jest mi jeszcze dobrze znany. Ale poprawię to.

Podobnie w kalendarzu, wyrazy "poprzedni miesiąc" i "następny miesiąc" trochę dużo miejsca zajmują i fajniejsze byłyby strzałki. Nie wiem, czy to można zmienić?
To takie szczegóły i pytam teoretycznie, bo na razie nie zamierzam korzystać z tych szablonów. Tylko im się przyglądam ;-).


To akurat specjalnie. Można to zmienić ale mi się tak spodobało, rzecz przyzwyczajenia. W następnym szablonie jestem już zgoda z przyzwyczajeniem ;)

A poza tym chciałam bardzo pochwalić Twoje instrukcje - są genialne. I nie przesadzam :-).

A dziękuję bardzo. Cieszę się, że Ci odpowiadają choć tak naprawdę o nie wiem na ile w ogóle są przydatne. Szablon czy jakaś zmiana dla większości jest działaniem jednorazowym. Wpadają tu z problemem, znajdują rozwiązanie (bądź i nie) i zmykają dalej. Mało kto podzieli się doświadczeniem, powie co w instrukcji było niejasne czy coś w tym stylu... Ja w każdym bądź razie tak zazwyczaj mam ;]

Sama ostatnio nic nie napisałam, bo zrobiłam plan notek do napisania i wyszło mi, że wszystkie poza jedną dotyczą zmian w CSS, a ja się nie czuję jeszcze kompetentna, żeby kogoś uczyć czegoś, czego nie umiem.


Im więcej będziesz wiedzieć tym mniej kompetentna będziesz się czuła. Ja najlepiej uczę się pisząc właśnie instrukcje i jakieś wyjaśnienia bo wtedy po kolei sprawdzam wszystko co popadnie aby w imię swojej najlepszej wiedzy nie wprowadzać nikogo w błąd :P

1. Jak zrobić akapity - użycie text-indent. Nie całkiem moja bajka. Ekran i druk to dwie inne rzeczy. Tak jak i gazeta i książka są nieco inne. Tworzenie czegoś nowego zaczynam zawsze od skopiowania czegoś co już istnieje ale efekt satysfakcjonujący mnie osiągam zazwyczaj dopiero wtedy gdy uwolnię się od tego co skopiowałam. Akapit w internecie wyróżniony jest odstępem a nie wcięciem akapitowym. Tak jak w książce wyróżnia go wcięcie a nie odstęp. Nie widzę nic złego w stosowaniu text-indent w określonych warunkach świetnie się sprawdzi i będzie szczegółem który "zrobi" całość ale na razie nie planuję specjalnej notki na ten temat.

2. Tagi - zmiana listy wypunktowanej na chmurę tagów. Na blox wiki jest chyba temat na ten temat :D Jak zmiana wypłynęła to spisałam szybką instrukcję: szablonkatemac.blox.pl/2009/12/Zmiany-na-Blox-tagi.html Bardziej aby była mi pod ręką niż dla innych ale potem rozszerzyłam nieco notkę o wyjaśnienia. Jeżeli o tym napiszę to raczej generalnie o zmianie listy wypunktowanej w chmurkę (tak jak pisałam ostatnio o zmianie listy wypunktowanej w poziome menu).

3. Użycie ozdobników - hr (wiem, że o tym pisałaś, ale chciałam napisać o tym po swojemu, tylko nie wiem, czy jest sens). Jak najbardziej jest sens. Mam zwyczaj pisać długie instrukcje. Nie zawsze jestem pewna czy wszystko uwzględniłam i czy dobrze to podzieliłam. Każdy ma inny sposób komunikowania się. Zresztą to też zależy od nastroju. czasem piszę bardzo prosto, innym razem używam masowo porównań a czasem zachwycam się profesjonalnymi sformułowaniami i wydaje mi się, że taka instrukcja będzie bardziej precyzyjna :D

Treść tego komentarza robi się za długa dla bloksa więc dokończenie w następnym.
-
kate_mac
2011/11/07 00:51:59
część druga odpowiedzi dla @felicja

4. Jak opisać boksy w CSS (wiem, że pisałaś o boksach, ale pomyślałam o tych, którzy nie mają Twoich szablonów i chcieliby je sobie opisać w CSS). Bardzo dobry pomysł ale jaki wygląd im nadasz? Można spróbować prosto: odstęp dolny, etykieta, ewentualnie ramka dolna pod etykietą... Najbardziej jednak przyda się wygląd taki jak innych elementów w szablonie więc najlepszym rozwiązaniem będzie dopisanie dodatkowych klas do istniejących opisów. Wydaje mi się, że to sporo wyjaśnień bo ja widzę sporo wariantów więc jak będziesz potrafiła to skrócić to będzie rewelacyjnie. Trochę porządków w dodatkach zawsze się przyda. Ja pisałam dwa razy: skrótowo i jeszcze nie skończona strona

5. Pozycjonowanie w CSS - pomyślałam, że przydałaby się taka ogólna notka, jak zmieniać położenie różnych elementów w CSS, tylko czy to się objętościowo zmieści w jednym wpisie? Zapewne zmieści się. Są jednak dwie grupy osób, które skorzystałyby na takiej instrukcji: pierwsza sobie poradzi bez względu na to na przykładzie jakiego elementu będziesz pozycjonować. Wystarczy, że dobrze oznaczysz wpis (tak aby był łatwy do odnalezienia) i wymienisz w nim różne przykładowe warianty. Druga grupa to osoby, które lubią nie mieć wyboru bo szkoda im czasu na szukanie wariantu dla siebie. W takiej sytuacji chyba lepsze byłoby napisanie kilku notek. Ja pisałam o przenoszeniu różnych rzeczy do trzeciej szpalty, o tworzeniu dodatkowego menu na dole bloga, o umieszczaniu reklamy nad kategoriami i ostatnio o górnym menu. A i było też o linku rss jako przykład przenoszenia pojedynczego elementu.

6. Zakładki - tytuły wygląd - tu taki jeden zbiorczy tytuł o wyglądzie zakładek, szczególnie o tym jak ukryć słowo "Zakładki" i jak opisać tytuły zakładek w CSS. Kolejny przydatny pomysł. Ja pisałam kiedyś o konkretnym wyglądzie w osobnych ramkach i zbiorczo o możliwościach ukrycia różnych elementów wąskiej szpalty cała szpalta, archiwum, słowo zakładki

7. Jak zmienić tło szablonu - to proste do opisania. jak najbardziej ale... :D nie tak łatwo zmienisz np. tło w szablonie deco z którego skorzystałaś bo często łączę tło body z tłem bloga aby dodać jakiś cień czy coś w tym stylu. Ale lawendowy handmade już jest do zmiany i to bardzo łatwej. Chyba osobnej notki o tym nie napiszę ale najbliższe nowe szablony na stylach jakieś wyjaśnienie w tym stylu będą miały.

8. Jak zmienić w CSS wygląd blocquote - to bardzo ciekawe. Nie wiem, czy o tym szczegółowo pisałaś, poza naszą dyskusją w komentarzach. I tak i nie. Coś tam pisałam, raczej ogólnie i ta notka jest do poprawienia bo zawiera nieaktualne dane. I o pewnym specyficznym blockquote, które potem s.z.y.m.o.n skorygował bardzo ciekawie

c.d.n.
-
kate_mac
2011/11/07 01:27:36
OMG trzecia część odpowiedzi:

Część trzecia i ostatnia odpowiedzi dla @felicja

Gdybym nie umieszczała tych linków to pewnie by się zmieściło w dwóch :D

9. Użycie fieldset, jako ramki w bocznej szpalcie. Jak opisać w CSS i HTML. Nie jestem pewna czy to dobry pomysł. Jeżeli zależy Ci tylko na wyglądzie, na efekcie ramki to od tego jest css (border). fieldset grupuje elementy typowe dla formularzy (chyba) sprawdź specyfikację dla tego znacznika i używaj go zgodnie z przeznaczeniem. Przychodzi mi do głowy raczej brutalne porównanie, nie wiem na ile trafne więc zwalmy to na późną porę: niby miska to miska ale nie każdy zdecyduje się przygotowywać jedzenie w nocniku. Staraj się więc upewniać, że używasz znaczników zgodnie z ich przeznaczeniem. Z drugiej strony stare kody do układania treści wykorzystują tabele (co i mnie się zdarza w niektórych notkach). Tabele są dla wartości tabelarycznych/zestawieniowych do budowania układu strony (wyglądu) służy css.


Podsumowując wszystkie pomysły poza tym ostatnim bardzo dobre i z chęcią przeczytam instrukcje, które na ten temat popełnisz. To, że o czymś ja pisałam o niczym nie świadczy. Twoja notka nie umniejsza pracy włożonej w moją ;) a może co najwyżej być tylko na korzyść.

Uważaj z dłuższymi planami i różnymi akcjami. Mnie, owszem, one motywują do skończenia danego tematu ale także zniechęcają nieco, tworzą obowiązek. Ostatnio robię kilka tematów na raz. Mam chyba z 20 pozaczynanych notek z czego część nadaje się tylko do kosza, część wymaga tylko dopracowania a reszta to zaczęte pomysły, które wymagają duuużej pracy i dalszych notek więc zacznę je publikować kiedy większość będę miała zrobione... czyli nie wiadomo kiedy :D

co do Twojej listy to polecam taką kolejność (biorąc pod uwagę mój punkt widzenia):
1-6-4-2-7}-8-3-5-(9)
dziewięć musisz najpierw sprawdzić
siedem będzie dobrą wprawką dla osiem więc powinno być przed
pięć może być bardzo rozbudowane więc dałam na końcu ale jeżeli uda Ci się zwięźle i jasno to gites
o jeden raczej szybko nie napiszę, o sześć i dwa pisałam dawno temu i nie wiem czy będę to robić jeszcze raz
czwórką się chyba zajmę ale nie wiem jak szybko i jeżeli już to zapewne w postaci podobnej do opisów górnego menu więc Twoje przejrzyste instrukcje też się przydadzą
-
felicja79
2011/11/14 17:56:13
Ojej! Ale się napisałaś! Bardzo dziękuję za taką szczegółową odpowiedź! :-)
Ja niestety ostatnio się pochorowałam i przeleżałam trochę w łóżku, więc zrobiło mi się okropnie dużo zaległości we wszystkim. Przede wszystkim muszę je nadrobić na blogu książkowym. Ten z dodatkami wymaga więcej wysiłku, sprawdzania, dokładności. I właśnie te moje plany, ta cała lista notek do napisania, zamiast motywować, to blokują.
Jak już na dobre uporam się z moimi zatokami, to wezmę się za nie. Mam nadzieję :-). Albo za coś prostszego.

Co do użycia "fieldset" to chciałam tylko wyjaśnić, że nie ja wymyśliłam użycie tego jako ramki, ale tak było na stronie "html dla zielonych":

www.kurshtml.edu.pl/html/obramowanie,tekst.html

Podoba mi się to rozwiązanie z jednego powodu, a raczej dwóch. Można dodać tytuł za pomocą "legend", który wyświetla się w fajny sposób. A drugi powód jest taki, że to bardzo proste w użyciu. Tylko parę rzeczy opisałam sobie w CSS, a potem już bez problemu używam. Tak mam na blogu ze scenariuszami zrobioną księgę gości i skrzynkę pocztową:

nonscholaesedvitae.blox.pl

Bardzo mi się podoba. A poza tym, że to niepoprawne, to żadnych złych efektów nie powoduje. Pomyślałam, że można by tym sposobem zrobić sobie więcej takich "boksów" w bocznej szpalcie, bo mają identyczny kolor obramowania, szerokość ramki i styl tytułu.

Dzięki za propozycję kolejności notek - przemyślę to. I wielkie dzięki za linki. Przeczytam uważnie przed napisaniem notek.
-
Gość: kate_mac, *.dynamic.chello.pl
2011/11/20 16:14:46
@felicja79
I właśnie te moje plany, ta cała lista notek do napisania, zamiast motywować, to blokują.
To jest moja najczęstsza przypadłość. Dopiero w tym roku, po długiej przerwie w blogowaniu postanowiłam nie trzymać się planów. Jasne, mam jakieś pomysły itd. zaczynam je realizować ale jeżeli nie kończę to nie robię sobie z tego powodu wyrzutów :D Moja lista wygląda w przybliżeniu tak (chociaż w związku z tym, ze staram się nie robić list to mogłam coś zapomnieć):
- dodać górne menu do wszystkich szablonów
- opisać dodawanie i wygląd górnego menu na przykładzie kilku typów szablonów
- uporządkować notki o trzeciej szpalcie
- opisać dodawanie różnej szerokości trzeciej szpalty do różnych szablonów
- poprawić szablony BASIC i na ich przykładzie opisać różne zmiany (ozdabianie, zmiana kolorów, poszerzanie, przenoszenie elementów, pozycjonowanie, dodawanie tematów itd)
- opisać różne cechy z CSS2.1
- opisać nowości z CSS3, które już dobrze działają we wszystkich aktualnych przeglądarkach
- opisać selektory z całego starego kodu bloga
- zrobić pełne FAQ i wypisać w łątwodostępnym miejscu najczęstsze problemy
- napisać notkę przewodnikową, która po kolei poprowadzi poprzez proces robienia własnego szablonu
- wypisać najpopularniejsze kroje i opisać je nieco
- polecić kilka krojów mniej popularnych
- podać linki do pobrania kilku bardzo dobrych darmowych fontów
itd
Najlepsze jest to, że wszystko co wyżej opisałam jest już pozaczynane i dotyczy głównie tego bloga a podobne plany mam na stylowym blogu też.



Co do użycia "fieldset" to chciałam tylko wyjaśnić, że nie ja wymyśliłam użycie tego jako ramki, ale tak było na stronie "html dla zielonych"

Dlatego, ja nie mówię, że jest to złe rozwiązanie. W gruncie rzeczy nie mam nic przeciwko używaniu rzeczy wbrew ich przeznaczeniu o ile będzie to dla nas wygodne. Chcę tylko abyś pamiętała, że każdy znacznik w html ma jakieś przeznaczenie i nie ma ono wiele wspólnego z wyglądem. Całkiem niedawno był taki czas gdy dzieciaki na różnych serwisach społecznościowych ozdabiały swoje imię i nazwisko różnymi ozdobnymi znakami, które układały się we wzorki. Nie zmienia to jednak faktu, że te znaki miały jakiś cel zanim zostały użyte tylko do ozdoby. To były kropki, średniki, pytajniki... M0g3 t32 pis4c w t4k1 5p050b, 2e n13kt0r3 l1t3ry 4lf4b3tu 245t4p13 cyfr4mi, m4j4 p0dobny k52t4łt:
1=I 2=Z 3=E 4=A 5=S 0=O
ł4tw0 s13 przyzwycz41ć d0 t4k1ego z4p1su, szcz3g0ln13 gdy j3szcz3 zmn13szy s13 l1czb3 z4st3pw4nych ll1t3r tylk0 d0 s4m0głos3k.
Fatalnie jednak się to piszę więc wróćmy do normalnego zapisu.

"fieldset" możesz użyć jako ramki ale jeżeli robisz to dlatego, że zależy Ci na określonym wyglądzie i tylko na wyglądzie to poprawniej będzie jeżeli zrobisz to opisując wygląd w CSS. Tak jak istnieją zasady gramatyki czy ortografii w języku polskim, angielskim czy jakimkolwiek innym tak samo HTML i CSS mają swoje zasady i łącznie budują strony (zresztą mówi się o języku HTML itp.)

Bardzo mi się podoba. A poza tym, że to niepoprawne, to żadnych złych efektów nie powoduje. Pomyślałam, że można by tym sposobem zrobić sobie więcej takich "boksów" w bocznej szpalcie, bo mają identyczny kolor obramowania, szerokość ramki i styl tytułu.
Wszystko będzie zależeć od podejścia do poprawności języka. Ja sama często pisze niezbyt poprawnie i polecam rozwiązania wbrew poprawnemu kodowi po to aby uzyskać efekt, który trudno by było uzyskać w inny sposób. Generalnie jednak jestem wielką zwolenniczką określania wyglądu elementów poza HTML.
Dodatkowo szukaj instrukcji i przewodników najbardziej aktualnych jak to możliwe. Bloksy pisane są językiem xhtml (chociaż nie wiem czy mogę użyć tu określenia język), który już jest stosunkowo wiekowy ale dalej aktualny.
-
felicja79
2011/11/20 20:27:15
Twoja lista jest imponująca! I mogę jedynie powiedzieć, że bardzo przydatna i z chęcią przeczytam wszystkie notki. I postaram się wykorzystać.
Szczególnie przydatne wydaje mi się opisanie selektorów z całego kodu bloxa i zrobienie FAQ z najczęstszymi problemami. Oczywiście jestem także zainteresowana tym, jak zmieniać i ozdabiać swoje szablony. Nie mówiąc o tym, że chętnie dowiem się jak robić je od podstaw krok po kroku :-).
-
felicja79
2011/11/20 20:32:31
A wygląd fieldset opisałam w CSS:

fieldset {
border-color: #8C9855;
border-style: solid;
padding: 10px;
}

Potem dodałam tylko w polu na Dodatki opis koloru do "legend", bo pasował mi czarny.
To tak proste rozwiązanie, że aż się prosi, żeby z niego korzystać :-)
-
kate_mac
2011/11/27 09:49:26
@felicja79
Ja będę bronić zasady, że HTML jest do tworzenia elementów a CSS do opisywania ich wyglądu.
Samą ramkę możesz dodać do niemal absolutnie każdego elementu. To co wpisałaś przy fieldset może być równie dobrze przypisane w divie o klasie .boks2 czy jakiejkolwiek innej. Opisując znaczniki (nie klasy czy identyfikatory) opisujesz wszystkie elementy html umieszczone w takim znaczniku. W starym kodzie bloks go nie używa ale w nowym jest w nim szukacz.
Dodatkowo jeżeli zależy Ci na jakimś wyglądzie elementu nie zdawaj się na przeglądarkę (jeżeli wygląd elementu nie jest opisany w szablonie a mimo to nie jest to goły tekst oznacza to, że przeglądarka wzięła sprawy w swoje ręce).

ten sam wygląd zrobiony css

najpierw kod html, oczywiście w nawiasach okrągłych zamiast ostrych bo ostre nie przejdą w komentarzu

(div class="boks-f")
(div class="tyt")Skrzynka pocztowa(/div)
(p)(a href="felicja79@wp.pl)(img src="h-t-t-p://najlepszedodatkinabloga.blox.pl/resource/koperta.png" /)Napisz do mnie e-mail(/a)(/p)
(/div)

etykietę tytułową mogłam umieścić w znaczniku span wtedy od razu miałaby wartość wyświetlania inline i ten opis nie byłby potrzebny; mogłam ją tez umieścić w znacznik bez klasy czy to span czy np h3 i opisać w css jak kombinator (tylko znacznik span/h3 umieszczony w klasie boks-f)

jeżeli nie umieściłabym linku w znaczniku paragrafu (p) to ten sam opis mogłabym dodać po prostu do linku (a) zmieniający tylko sposób jego wyświetlania na block

klasa .tyt opisana jest w formie kombinatora bo użyta jest także przy innych moich bloksach więc aby miała inny wygląd niż w w tamtych boksach musiałam sprecyzować o co mi chodzi. I na koniec jeszcze opis wyglądu ilustracji bo masz go wpisanego w kodzie html

.boks-f {
text-align: center;
border: 2px solid #8468BA;
}
.boks-f p {
clear:both;
}
.boks-f .tyt {
float:left;
background:#F4F2F7;
margin: -0.8em 0.5em 0 0.5em;
padding:0 0.2em;
}
.boks-f img {
vertical-align: middle;
}

sama ramka to tylko opis przy pierwszym selektorze
ostatni zaś to wyrównanie ilustracji
reszta związana jest z wyglądem etykiety

kod dotyczy szablonu lawendowego a nie zielonego ;) zrobiłam go trochę na oko ale wg mojej wiedzy działa bez problemów

podsumowując nie mam nic przeciwko fieldset; nawet do kontaktu po części by mi pasował, polecam jednak wygląd definiować w arkuszu
-
felicja79
2011/11/27 11:37:41
Teraz mnie w końcu przekonałaś :-).

Nie umiałam opisać w CSS tytułu ramki, żeby wyglądała jak efekt przy użyciu "legend". Za mało jeszcze umiem. Tobie się udało. Zapamiętam ten sposób. Chociaż porównując długość kodu, widać różnicę ;-).
-
szablonykatemac
2011/11/27 13:32:17
@felicja79
warto cssowi przyjrzeć się dokładniej; przeglądarki aktualnie interpretują go bardzo dobrze.; długi czas IE robiła kłopoty tak, że nie można było niczego bardziej zaawansowanego zrobić ale IE9 była już wprost rewolucyjnie poprawna patrząc na poprzednie jej wersje

co do długości kodu to jeżeli chodzi o rameczkę to robi się ją dokładnie tak samo jak przy fieldset;
inne selektory związane są ze stylami które i tak wpisujesz tylko w postaci lokalnej; ja je tylko przeniosłam do arkusza zewnętrznego więc uważam, że nie powinnaś mi ich liczyć heh :]

ułożenie tytułu może wymagać więcej kodu ale wszystko będzie zależeć od tego jak bardzo szczegółowo do tego podejdziesz; w gruncie rzeczy jeżeli element z tytułem będzie liniowy, np span a po nim złamanie wiersza (br) to przy tytule wystarczy opisać ujemny margines górny aby podciągnąć tekst na wysokość ramki (margin-top: -0.8em;) i dać elementowi tło aby zasłonić fragment ramki pod tekstem (background)

.boks-f {
margin-top: -0.8em;
background:white;
}

hmm chyba zrobię o boksach i ramkach wpis na wtorek ;)
-
felicja79
2011/11/27 15:04:23
Policzyłam Ci wszystkie linijki kodu, bo u mnie lokalnie to wygląda np. tak;

(fieldset)

(legend style="color: black;")Skrzynka pocztowa(/legend)

(a href="nonscholaesedvitae@wp.eu)
(img style="vertical-align: middle;" src="nonscholaesedvitae.blox.pl/resource/koperta.png /)(/a)

(b)Napisz do mnie(/b)

(a href="nonscholaesedvitae@wp.eu)(b)e-mail(/b)(/a)

(/fieldset)

Albo zwyczajnie tak, gdy nie potrzebuję tytułu:

(fieldset)
(a href="net3.pl/uslugi/ksiega.php?p_user=felicja&p_nrksiegi=0 target="blank")(img src="nonscholaesedvitae.blox.pl/resource/ksiega_gosci.jpg alt="Księga gości"/)(/a)
(/fieldset)

Zwróć uwagę, że nie muszę opisywać wyglądu ramki w HTML tym sposobem, bo wszystko robi za mnie przeglądarka (więc nie ma co przenosić do CSS, jedynie trzeba tam wstawić ten opis, który podałam we wcześniejszym komentarzu, bo IE sobie nie radzi i wyświetla po swojemu). Jedynie wygląd "legend"opisałam w pierwszym przykładzie jako czarny (bo nie umiałam opisać "legend" w CSS).

Teraz już rozumiem jak ty zrobiłaś swój opis w CSS. Ten ujemny margin był poza zasięgiem moich umiejętności, i nie wpadłam na to by dodać tło do tytułu, które zasłoni ramkę :-).

A wpis o boksach i ramkach oczywiście przeczytam, jak tylko napiszesz.
-
kate_mac
2011/11/29 21:26:42
@felicja79
Byłabym ostrożna :D w wyręczaniu się przeglądarką jeżeli chodzi o opisywanie wyglądu; owszem są pewne standardy i zwyczaje ale jak to ze zwyczajami bywa są zmienne i bardzo zależne od okoliczności i miejsca. Pamiętaj że przeglądarek jest wiele i mają różne zadania. Nie wyobrażam sobie możliwości sprawdzenia wszystkiego więc chyba głównie dlatego lubię polegać na standardach (choć oczywiście nie zawsze to robię).

Taki boks z kontaktem no nic wielkiego, nic o kluczowej istotności dla strony i w zasadzie ta dyskusja ma dla mnie raczej charakter teoretyczny ;)). Sprawdziłam na stronie fundacji W3C co tam pisze o fieldset i label i jest tam dokładnie tak napisane:
The fieldset element represents a set of form controls grouped under a common name.
Jeżeli chodzi o dozwoloną zawartość to w zasadzie wstawić można wszystko a label jest opcjonalne więc częściowo nie ma problemu z dowolnym wykorzystaniem. Chodzi raczej o intencje, o przeznaczenie tego tagu: represents a set of form controls.

Jeżeli zaś chodzi o wygląd to jako zalecaną ramkę fundacja podaje grove 2px więc i tak musisz to zmienić jeżeli chcesz ramkę o jednolitym kolorze.

A arkusz stylów nie jest złem koniecznym gdzie na nieszczęście trzeba przenosić rzeczy z HTML ;) to raczej ułatwienie. I nie trzeba się uczyć HTML aby zmieniać wygląd. Wystarczy znajomość kilku podstawowych znaczników do wprowadzania tekstu na stronę i resztę można załatwić w arkuszu stylów.

I na koniec. Napisałaś, że nie wiedziałaś jak sobie poradzić z label w arkuszu stylów. Jeżeli sobie poradziłaś z dodaniem fieldset to zapewne nie o budowę stylu chodzi.
(A jeżeli chodzi to: w dowolnym kursie CSS zacznij od selektorów. Może tam być dużo różnych nawet skomplikowanych rzeczy opisanych ale na początek zawsze jest napisane, że selektorem może być znacznik, klasa albo identyfikator i jak to zapisać. Ja kilka dni temu rozszerzyłam treść wpisu Co jest czym w CSS czyli budowa stylu)
Ciekawi mnie więc co za problem z legend miałaś? Masz na myśli, że chciałaś odwzorować wygląd typowy dla fieldset-legend w odniesieniu do innego znacznika?

Chyba dzisiaj wolno kojarzę bo załapałam to dopiero jak napisałam odpowiedź haha więc lepiej skończę zanim jakiegoś babola popełnię :D
-
felicja79
2011/11/29 21:51:52
Ja już sama nie pamiętam, co ja tam z tym "legend" wyprawiałam. Teraz będziesz krzyczeć - wpisywałam różne rzeczy do arkusza CSS na chybił trafił i patrzyłam na efekt ;-). Ale to było jakiś czas temu, teraz już wpisuję i wiem nawet co.

Dziś zmieniłam trochę wygląd "ostatnich komentarzy" (dodatku Szymona) na blogu z książkami, na tym Twoim muzycznym szablonie:

cowartoprzeczytac.blox.pl

Tak się cieszyłam, że już umiem przesuwać elementy, zmieniać ich wygląd :-). I zmieniłam też wygląd komentarzy pod wpisami, zmniejszyłam czcionkę, wyjustowałam. Taka jestem z siebie dumna, że potrafię to sama zrobić ;-).

A propos wyglądu, słyszałaś o tym konkursie?

cokryjeblox.blox.pl/2011/11/male-poprawki.html

Twoje szablony tam zostały zgłoszone w duże liczbie :-).
-
kate_mac
2011/12/05 14:47:13
@felicja
Teraz będziesz krzyczeć - wpisywałam różne rzeczy do arkusza CSS na chybił trafił i patrzyłam na efekt ;-)
Wcale nie będę krzyczeć, sama tak robiłam i nadal często tak robię. Jak inaczej przekonać się czy efekt będzie zgodny z oczekiwaniami. Teraz jest już znacznie prościej ale jeszcze kilka lat temu IE6, która sprawia gigantyczne problemy, była szalenie popularna i wszystko trzeba było osobno w niej sprawdzać. Najgorzej było gdy do sprawdzania przechodziłam jak już cały szablon był zrobiony i teraz jak odkryć co powoduje problem. IE6 nadal jest niezmiennie problematyczna ale jej popularność na szczęście zmalała.
Nie wiem jakiej przeglądarki używasz ale dla chrome i dla firefox na pewno jest takie rozszerzenie: WebDeveloper jest genialnym ułatwiaczem podglądu. Jest tam opcja pokaż css, która wyświetla arkusz obok strony i pozwala natychmiastowo zobaczyć efekt. Polecam
-
felicja79
2011/12/05 15:49:34
O to ciekawe rozwiązanie. Skorzystam. Używam Firefoxa.

W nim przynajmniej ten dodatek "awatary w komentarzach" ładnie wygląda. Chodzi mi o brak obrazka, jeżeli ktoś nie ma konta na bloxie ani nie podał strony www. Na IE pojawia się taki brzydki czerwony krzyżyk, a w Firefoxie całe szczęście w tym miejscu nie ma nic, chyba że wstawi się w CSS ramkę. Ale z ramką też sobie poradziłam, dałam w CSS tło i wygląda już bardzo ładnie (oczywiście w Firefoxie, bo w IE nadal czerwony krzyżyk tylko że na moim tle). Ostatnio dużo grzebię w szablonie "muzycznym", zobacz, jakie fajne tło dałam w tych "pustych" awatarach - fragment ozdobnika).

Mam pytanie z innej beczki. Nie mam gdzie tego umieścić (może zrobiłabyś stronę statyczną i dała link w bocznej szpalcie - np. "Problemy i pytania" :-)).

Chciałabym przesunąć przyciski facebooka i wykop pod pojedynczym wpisem (te które się włącza w opcjach bloxa), ale nie umiem. Potrafię jedynie wyśrodkować całą stronę (szeroka szpalta) wtedy się przesuwają, a to za dużo roboty z odkręcaniem pozostałych elementów. Musi być jakiś sposób, żeby je ruszyć, prawda? Dałabym Addthis pod pojedynczym wpisem, ale ten dodatek nie pojawia się na stronie głównej, a chciałabym mieć tam ten przycisk do facebooka, więc pozostaje ten z opcji bloxa. Chyba że Ty znasz jakieś rozwiązanie?

Przeszkadza mi to bardzo, bo w szablonie "muzycznym" tekst jest bardzo odsunięty od marginesu, a przyciski nie, psuje mi to "harmonię".

A zmieniłam też wygląd wyszukiwarki w tym szablonie. Tamte kolory mi nie odpowiadały i tekst za mały i za nisko. Ale to szczegół.
-
wredna_buka
2011/12/06 19:35:43
wstawiam pistacjowy! <3 śliczny
-
kate_mac
2011/12/08 23:28:35
@felicja
"W nim przynajmniej ten dodatek "awatary w komentarzach" ładnie wygląda."

A wiesz w czym rzecz? Chodzi o to, że tam kiedyś był obrazek, nie podobał mi się i nie bardzo pamiętam czy to był ten szary pytajnik czy maska wenecka... Teraz graficzki nie ma pod tym adresem do którego odwołanie zostało umieszczone w skrypcie. Firefox nic nie mówi o ilustracjach których nie ma już pod docelowym adresem (chyba, coś kojarzy mi się ikonka "złamanego" pliku, ale szczerze mówiąc nie wiem nawet czy to właściwe skojarzenie). IE natomiast wyświetla ten krzyżyk.

Chciałabym przesunąć przyciski facebooka i wykop pod pojedynczym wpisem (te które się włącza w opcjach bloxa), ale nie umiem.

Bo niestety nie mają własnego kontenera. To jest jeden z przykładów bloksowego bałaganiarstwa. Na stronie głównej facebook-like ma własną klasę ale na pojedynczej już nie. Pozostaje tylko manipulować zewnętrznym kontenerem jakim jest #SkomentujBox ale to oznacza przesunięcie absolutnie całej szerokiej szpalty na stronie z pojedynczym wpisem więc potem trzeba przywrócić odstęp elementom poprzez dodanie go w każdym pojedynczym elemencie. Po kolei: #BlogWpisPoprzedniNastepnyBox, .TytulKomentowanegoWpisu, .TrescKomentowanegoWpisu, .InfoKomentowanegoWpisu, #PolecWpisStrKom, .TagiKomentowanegoWpisu, .SkomentujDodajKomentarzLink, #SkomentujListaTrackback, #SkomentujListaKomentarzy, .SkomentujDodajKomentarzLinkPodLista

Musisz sprawdzić jak wszystkie te elementy opisane są w szablonie, jakie mają w poziomie odstępy. Do powyższej listy dodaj jeszcze swoje dodatki.

To bloksowe bałaganiarstwo jest mocno irytujące. Myślałam, że może ten nowy kod będzie bardziej konsekwentny ale tak nie jest, już teraz widać różnice pomiędzy szablonami podstawowymi z pierwszej paczki a tymi z drugiej. Albo nowo dodane elementy też nie są konsekwentnie prowadzone (np. link do więcej ma klasę w wielbłądzim, "starym" stylu zamiast pisanej z myślnikiem, link do wersji mobilnej nie ma żadnej tylko-swojej klasy tylko dwie, które dzieli z innymi elementami - to są tylko drobiazgi ale przeszkadzają bo albo trzeba kombinować albo pamiętać o nich).
-
felicja79
2011/12/09 12:10:30
Zrobiłam już to tak jak potrafiłam. To znaczy poprzesuwałam wszystkie elementy tylko po to, żeby przesunąć te dwa głupie przyciski. Teraz muszę jeszcze sprawdzić, czy czegoś nie pominęłam. Zrobiłam to zanim napisałaś komentarz, więc porównam to, co zrobiłam w arkuszu CSS z Twoją listą i uzupełnię braki.

A tak z ciekawości, zastanawiam się - kto te szablony robi? I czemu nie biorą pod uwagę tego, co zgłaszają użytkownicy?
-
kate_mac
2011/12/10 00:24:15
@felicja
Kto robił to nie mam pojęcia. Zapewne różne osoby. Ekipa się zmienia i chyba nikt nie pilnuje aby był porządek. Zależy zarówno adminom jak i użytkownikom na funkcjonalnościach, na sprawnym dodawaniu odpowiednich elementów. Gdzieś tam w pośpiechu pewnie gubi się ten porządek. Bo czasami biorą pod uwagę uwagi użytkowników. Jeżeli te uwagi są zgłaszane bo to, że my sobie tu psioczymy na porządek na nic wpływu nie ma.
Na chaotyczność starych kodów też miał wpływ czas. Niektóre elementy były od początków bloksów, inne zostały dodane a jeszcze inne zniknęły z blogów. Do tego dodaj, że zrobiony jest teraz nowy kod (który chociaż nie jest rewelacyjnie zwalający z nóg to jest jednak leszy od starego) i nie ma sensu robić porządków w starym, szczególnie jeżeli te porządki zmieniałyby wyświetlanie się szablonów. Raz tak zrobili, Poprawiali SEO, zmiany były całkiem istotne i poprawiałam wszystkie swoje szablony.
Szczerze mówiąc nie wiem jaki z tego morał ;) Może napisz do pomocy aby dodali kontener z klasą wykopywarce i fejsbuk-lajkowi na pojedynczej, może być ten sam jak na głównej. Może dadzą...
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...