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

deco melodyjnie

Nie wiem czy to deco czy secesja a może jeszcze coś innego. Miało być lekko złociście jak u Klimta ale całość przyszarzała. Miało być geometrycznie, regularnie lecz z finezją. Miało być art-deco i secesja w jednym ale czy się udało? Sama nie wiem ale efekt mi się podoba. A skąd pomysł? Natrafiłam na wzorek, który użyłam w tle, był niebieski, zdecydowanie bardziej jaskrawy i jasny ale gołym okiem było widać jego potencjał. Przez długi czas nie mogłam dokończyć szablonu bo ornament umieszczony pod notką gdzieś mi się zapodział. Miałam go dużo wcześniej niż wzorek i pojawiło się odwieczne pytanie gdzie też go zapodziałam...


muzyczny 06 - zdjęcia deco
muzyczny 06 - zdjęcia deco


0Etheme - SpokojnySzablon jest na starym kodzie, bazą dla niego jest Spokojny. W css są opisy do najpopularniejszych czarodziejskich skryptów. Na blogu jest notka która opisuje specyfikę szablonu więc po szczegóły odsyłam tam. Maksymalna szerokość elementów w notce to 450px, odnosi się to zarówno do zdjęć jak do filmów. To nie jest zbyt dużo ale zawsze można większą wersję umieścić pod linkiem i wtedy nie ma żadnych ograniczeń co do wielkości. Wklejki pod wąską szpaltę nie powinny być szersze niż 190px a jeżeli chcesz aby elementy tam umieszczone wyglądały jak elementy wąskiej szpalty to możesz wykorzystać klasy tyt i boks. W takim wypadku szerokość elementów nie powinna być większa niż 150px.

 

niedziela, 10 października 2010, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
piottrek2
2010/10/13 15:39:24
da się zmienić te zdjęcia po boku by odpowiadały tematyce bloga?
-
miss.basia
2010/10/17 09:58:51
ja też się właśnie zastanawiałam nad tym , co kolega niżej.
-
kate_mac
2010/10/18 14:03:04
@piottrek2, miss.basia
technicznie się da i nie mam nic przeciwko zmianom w moich szablonach

obrazek jest przypisany jako tło przy dwóch selektorach:
#BlogWazkaSzpalta
#SkomentujWazkaSzpalta
pierwszy pojawia się na początku a drugi mniej więcej w połowie arkusza

ilustracja ma nazwę ws, w zależności od szablonu jest to dokładnie:
muzyczny 06 - zdjęcia deco - m_06_ws.jpg
muzyczny 05 - zdjęcia - m_05_ws.jpg
kulinarny 05 - zdjęcia - k_05_ws.jpg

jak wymieniać ilustracje umieszczone w szablonie opisywałam na przykładzie tytułu: Zmiana zdjęcia w tytule
-
2011/04/03 23:10:35
Wybacz, ale nie mam bladego pojęcia, w jaki sposób ustawić ikonę do Twojego bloga w bocznej szpalcie. Więc moje pytanie brzmi, jak mogę to zrobić, bo nie chciałabym, by był "nieoznaczony".
-
felicja79
2011/08/09 23:28:05

Dostosowuję ten szablon do swoich potrzeb. Przerabiam z muzycznego na książkowy.

Zrobiłam swoje blockquote. To znaczy zmieniłam obrazek i dodałam ramkę:

cowartoprzeczytac.blox.pl

Obrazek przerobiłam z dolnego ozdobnika, zmniejszyłam i obróciłam. Jestem ciekawa, czy Ci się podoba. A może byś coś zmieniła?

PS Widać zmagania z blockquote są mi pisane ;-)

-
kate_mac
2011/08/14 12:41:40
@paralysed
link jest "niewymagany"

@felicja79
Powodzenia w przerabianiu. Muzyczne ilustracje masz jeszcze przy komentarzach.
.Infoniepar {
PADDING: 0px 0px 30px 50px;
BACKGROUND: url(/resource/m_06_kom1.jpg) left 5px no-repeat;
}
.Infopar {
PADDING: 0px 0px 30px 50px;
BACKGROUND: url(/resource/m_06_kom2.jpg) left 5px no-repeat;
}

Pytanie:
Obrazek przerobiłam z dolnego ozdobnika, zmniejszyłam i obróciłam. Jestem ciekawa, czy Ci się podoba. A może byś coś zmieniła?
Jak najbardziej pasuje. Ale ja jednak użyłabym pliku typu gif albo png z przezroczystością tła. W miejscu gdzie zaczyna się blockquote tło jeszcze nie jest wystarczająco jasne aby dać mu białe.


Dla innych ciekawskich, planujących zmianę blockquote w tym szablonie: Ozdobnik spod notki w normalnej wielkości i ułożeniu też się nada.
blockquote {
BACKGROUND: url(/resource/m_06_div.gif) -100px top no-repeat;
border: #ddd 1px solid;
MARGIN: 0px;
PADDING: 0px 10px 10px 50px;
}
-
felicja79
2011/08/16 23:57:40

Dziękuję, usunęłam muzyczne elementy z komentarzy. Nie miałam pojęcia o ich istnieniu.

Wciąż męczę się z blockquote. Tymczasowo zrobiłam białe tło i zmniejszyłam blok, tzn. dodałam marginesy po obu stronach. Próbowałam zrobić ozobnik z przezroczystym tłem. Nawet udało mi się go zapisać na komputerze, zmniejszyć i obrócić. Niestety wciąż nie umiem go obniżyć. Uparł się i nie chce się przesunąć w dół. A ja bym chciała, żeby wyglądał mniej więcej tak jak ten na bialym tle, tylko był przezroczysty.

Jak stracę cierpliwość to ustawię według kodu, który podałaś powyżej :-).

Najgorzej, że jak zmieni się jedną rzecz w szablonie, to potem zaraz kolejne się nasuwają, jak efekt domina. Może lepiej nic nie zmieniać? ;-)

-
kate_mac
2011/08/23 15:14:39
@felicja
Korzystając z chwilki czau odpowiem choć nie wiem na ile komentarzy mi ta chwilka starczy.

określając tło elementu korzystam z grupowego opisu elementów tła; wpisuję tylko background i lecę po kolei z wartościami; numer koloru wpisuje się zawsze jako pierwszy potem jest background-image który wpisuję jako skrócony adres url (pełny też zadziała); następnie określam albo powtarzanie (repeat) elementu albo położenie tego tła (co jest istotne jeżeli element się nie powtarza); piszę albo bo nie pamiętam właściwej kolejności ale w obu mi działa - to możesz sobie dokładniej sprawdzić w specyfikacjach jeżeli będzie Cię to interesowało;

W każdym bądź razie dla Ciebie, do przesuwania, interesujące będą właśnie te dwie rzeczy: położenie i powtarzanie. Powtarzać obrazku w blockuote raczej nie chcesz więc wpisujesz no-repeat. I teraz najistotniejsze czyli położenie. Tutaj kolejność jest ważna. Najpierw wpisujesz odległość w poziomie czyli od lewej krawędzi elementu. Pamiętaj, że tło wyświetlać się będzie tylko pod elementem blockquote a więc jeżeli dasz ujemną wartość to część obrazowego tła Ci się schowa. Druga wartość to odległość od górnej krawędzi. Możesz sobie wpisywać np.
left top - czyli przy lewym górnym rogu
right bottom - przy prawym dolnym
left center - po lewej ale na środku
left 5px - przy lewej krawędzi ale 5 pikseli odstępu od góry elementu
-100px top - sto pikseli przesunięte poza lewą krawędź ale od góry normalnie

Czyli kolejność tych dwóch parametrów jest określona a jeżeli chcesz zmienić odległość od górnej krawędzi (czyli obniżyć) to wpisujesz left i liczbę pikseli o jaką chcesz aby tło było obniżone.
-
felicja79
2011/08/23 23:04:59

Aha, teraz w końcu rozumiem, jutro tylko muszę to przećwiczyć.

Ta pudełkowa budowa strony jest dla mnie jak czarna magia. Czytałam na "html dla zielonych", ale brakuje mi wyobraźni przestrzennej. Próbowałam metodą prób i błędów wpisywać różne wartości i w różnej kolejności, ale obrazek najczęściej znikał. Teraz zostawiłam chyba left top. Jutro z tym powalczę. Teraz przynajmniej wiem po kolei do czego odnoszą się te parametry. Dzięki! :-)

-
kate_mac
2011/09/06 16:09:43
@felicja
ja nie mogąc sobie czegoś wyobrazić czuję się strasznie zagubiona...
niedawno odkryłyśmy z moją przyjaciółką, że poruszając się po mieście (czy dowolnym innym terenie) wyobrażam sobie jego mapę, patrzę na ulicę jakby z góry i w ten sposób orientuję się w którą stronę powinnam iść; w samochodzie mam nieco większy problem bo nieznaczne zakręty burzą odrobinę moje wyczucie położenia ale jeżeli jest dzień to mniej więcej zwracam uwagę gdzie jest wschód a gdzie zachód (bardzo orientacyjnie, po poprze dnia i słońcu)
myślałam, że to naturalne, że to tak właśnie ludzie trafiają do celu: wyobrażając sobie dwuwymiarową mapę - moja najlepsza A. wyprowadziła mnie z tego naiwnego przekonania ;-)
odkąd dowiedziałam się, że kod css zależy od kodu html też zawsze w wyobraźni widzę dwuwymiarowe pudełka
-
felicja79
2011/09/09 22:02:44
Też bym chciała widzieć w głowie taką dwuwymiarową mapę :-) Ja nawet jak mam papierową w ręku to muszę nią obracać na wszystkie strony, żeby kierunki się zgadzały z tym na co patrzę, nie potrafię odwrócić jej w głowie ;-)

A zapomnialam napisać o blockquote.

Dzieki Tobie udało mi się w końcu obnizyć ten ozdobnik z przezroczystym tłem, ale wtedy okazało się, że jest on bardzo słabo widoczny. Zmniejszyłam go, żeby ładnie prezentował się w pionie i nie przeslaniał tekstu, ale to sprawiło, że stał się mały i prawie go nie widać. Wróciłam więc do opcji ozdobnika na białym tle i dodałam też białe tło dla blockquote. W sumie wyglada nienajgorzej, bo dzięki temu cytaty są bardzo wyróżnione, a to mi się podoba.

Nie wpadłabym na to, że "left+liczba pikseli" może powodować obniżenie czegoś w pionie ;-) Zapamiętam i może kiedyś jeszcze mi się przyda.

-
kate_mac
2011/09/10 17:24:50
@felicja

blockquote na cowartoprzeczytac.blox.pl wygląda bardzo fajnie, idealnie pasuje do szablonu i profilu bloga

Każda właściwość (cecha) css ma swoje własne wartości. Tutaj rozmawiałyśmy o tle (background) a w zasadzie głownie jego pozycji (background-position). Przydać to się może przy każdym określaniu tła.
-
felicja79
2011/09/10 20:43:14
Dzięki :-) Jak kiedyś pojmę, jak określać te wszystkie pozycje w CSS, to zacznę robić swoje szablony ;-)
-
kate_mac
2011/09/20 18:33:46
@felicja79
Byłoby wspaniale. Jeśli mogę to poradzę Ci coś co doradziła mi Irytek, nie czekaj aż zacznie Ci si wydawać, że rozumiesz ju z jak działają szablony. Po prostu zacznij działać. Jesteś na bardzo dobrej drodze, ciekawią Cię te rzeczy i starasz się załapać jak to działa ale nie ma co czekać aż zrozumiesz całość bo uda Ci się to dopiero jak zaczniesz próbować z całymi szablonami. Ja bardzo długo po tym jak już robiłam szablony nie miałam pojęcia dlaczego akurat działają tak jak trzeba.
-
felicja79
2012/09/18 19:31:59
W końcu poszerzyłam ten szablon! Ale było z tym roboty! Przez te grafiki. A dopasowanie do siebie elementów (tła jasnego i ciemnego), żeby były równiutkie - magia :-).

Przy okazji dodałam pasek z górnym menu i mały obrazek. Zerknij i oceń:
cowartoprzeczytac.blox.pl

Chyba jeszcze będę majstrować przy tym szablonie. Najważniejsze, że w końcu ma szerokość 900px :-). Teraz to już z górki :-).
-
kate_mac
2012/09/19 11:00:38
@felicja79
Gratulacje, bardzo ładnie to zrobiłaś. Uprościłaś całość, wszystko dalej jest przejrzyste ale szersze. Ja bym może jeszcze bardzo nieznacznie i delikatnie ozdobiła górne menu. Może ledwo widoczna faktura w tle albo jakiś kompatybilny wzorek w hover. Coś bardzo nieznacznego i ledwo widocznego bo tak jak jest jest bardzo dobrze i lepiej tego nie psuć :D

A tak w ogóle możliwości CSS3 zapewniają znacznie łatwiejsze zrobienie niemal identycznego szablonu. W przyszłości wszystkie te 'graficzne' szablony pozmieniam ale po kolei więc te będą dość późno. Zamiast tych wszystkich trudnych do dopasowania szczegółów graficznych będzie wzorek w tle i różne cienie, gradienty i transparentność zapewnią całą tą 'ładność'.
-
felicja79
2012/09/19 11:29:01
No właśnie, u góry brakuje mi tego lekkiego zdobienia, które było dzięki grafice. Ale gdy ją powiększyłam, to nie wiem czemu, nie pasowała do tej grafiki środkowej (wzorki się nie zgadzały). To samo z dolną grafiką, więc je wyrzuciłam. Spróbuję jeszcze jakoś je dopasować albo zrobić podobny efekt za pomocą CSS-u. Tylko nie wiem jeszcze jak ;-).

A o ozdobieniu menu, nie pomyślałam, bardzo dobry pomysł. Choć z realizacją pewnie będzie dużo kombinowania. Dziś w ogóle przerobię górne menu na trzy rożne elementy (są obecnie dwa: pasek niebieski z obrazkiem, menu). Zrobię pasek w CSS, menu tak jak jest i dodam trzeci element - mały obrazek, który teraz jest częścią paska zamienię na obrazek-link. Chodzi mi głównie o to, żeby zamienić ten mały obrazek na link. Przy okazji może "machnę" na pasku jakąś ozdobę :-).

Trudne to wszystko.
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...