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

efekt blockquote

Wielu poszukiwaczy szablonów zastanawia się gdzie można znaleźć szablony podobne do szablonu np. Jana Turnau (kiedyś także był on u Bartosza Węglarczyka - Endgame). Szczególną uwagę szukających przyciąga cudzysłów którym zaczynane są notki. Odpowiedzi na to nie mam ale mam proste rozwiązanie. W szablonie tym obrazek umieszczony jest jako element tła treści notki czyli:

.BlogWpisTresc {
Padding-left: 70px;
BACKGROUND: url(/resource/nazwa_grafiki.gif) no-repeat;
}

Problem pojawi się gdy będziesz chciał inaczej zacząć wpis. W tym momencie wstawianie zdjęć na początku notki jest mało estetyczne. Dodatkowo grafika pojawi się tylko na początku wpisu.

Inne rozwiązanie zastosowano w bloxowym szablonie Connections. Korzystając niego możesz bez żadnego wysiłku ze swej strony używać w tekście ślicznego graficznego znaku cytatu. Wystarczy, że użyjesz przycisku „Zwiększ wcięcie” zwieksz_wciecie i tekst zostanie nieco odsunięty od krawędzi a pod nim pojawi się grafika ze znakiem cytatu.

Jak to jest zrobione?

W szablonie Connections wykorzystano właściwość blockquote, która opisuje tekst po przesunięciu.

blockquote {
margin: 15px 30px 15px 45px;
padding: 0 0 0 45px;
background: url(/themes/2themeD/images/blockquote.gif) no-repeat left top;
font-style:italic;}

W przypadku pozostałych trzech nowych bloxowych szablonów blockquote wygląda nieco inaczej:

  • Almost Spring – tekst jest przesunięty a po lewej pojawia się pionowa beżowa belka na całej długości wciętego tekstu;
  • Kubrick – tekst jest przesunięty a po lewej pojawia się pionowa szara belka na całej długości wciętego tekstu;
  • Rin – tekst jest przesunięty.

Dzięki wpisaniu grafiki w blockquote możemy w każdej chwili podjąć decyzję o tym czy chcemy alby taki element pojawił się w notce czy nie. Najczęściej blockquote używane jest w przypadku cytatu. Po zakończeniu cytowania należy nacisnąć przycisk „Zmniejsz wcięcie” zmniejsz_wciecie i od tej pory tekst będzie wyglądał normalnie.

Moje szablony

Najsześciej w przypadku własnych szablonów uzywam lewej ramki, bardo rzadko zdarzają się ramki do okoła całego elementu blockquote. Najciekawsze są jednak te z cudzysłowami:

pilka
b cytat  

 

Źródła i dodatkowe informacje:

 

niedziela, 28 października 2007, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Komentarze
2007/10/29 21:41:14
Kate, zauważyłam, że masz obrazek koło adresu bloga i tytułu. Czy trudno to się robi?
Ach, ciągle zapominam zapytać. Zrobiłaś szablony piłkarskie, ale gdzie je można oglądać? Powinnaś je wpisac do zakładek. Chyba, że nie są do udostępnienia.
-
kate_mac
2007/10/30 10:32:21
tą ikonkę robi się banalnie prosto
wyjaśnień w necie jest mnóstwo; problem polega na tym, że blox chyba nie ładuje plików ikon (.ico) więc grafika musi być png lub gif
co do szablonów - oba są oczywiście udostępnione; moje założenia zakładkowe jest dość rygorystyczne - in mniej zakładek tym bliżej ideału ;) - ale coś wymyślę żeby i tak je linkować;
w kategorii szablony będą pojawiały się już tylko moje szablony więc na tej stronie nie będzie problemu z dotarciem do nich; no i zawsze gdy piszę coś o nich (np teraz blockquote - obrazki piłek są linkami) wstawiam odpowiednie odnośniki
-
2007/10/30 14:01:01
Kate, dla Ciebie to banalnie proste, to wyobraź sobie moje umiejętności, jeśli to było dla mnie nie do przeskoczenia. Ja mam problem z nazewnictwem. Nie przyswajam fachowej nomenklatury, dlatego tak trudno zrozumieć mi objaśnienia. Dopiero w trakcie technicznych prób okazuje się, że nawet sobie radzę.
Zasypałam Cię dzis mailami. Ostatecznie zmieniłam pliki na gif. i jest lepszy obraz. Dzięki Tobie mam ikonki:) Jeszcze raz bardzo dziękuję:-)
Jeśli chodzi o Twoje szablony, to ja wiem, że one są gdzieś w sieci, tylko jak do nich trafić? Jeśli nie chcesz przedłużac wąskiej szpalty, to zrób tak jak ja, specjalny blog, gdzie tylko wystawiasz do pobrania szablony. Właśnie wydłużenie szpalty mnie zmusiło do utworzenia spacjalnego blogu.
-
2007/10/30 14:07:24
Cieszę sie,ze tutaj do Ciebie trafiłam. też czasami probuję " dłubać" przy css-ie i praktyczne porady bardziej wprawionych sa dla mnie niezwykle cenne.
-
kate_mac
2007/10/30 14:53:10
Witam Cię dzika_kobieto u mnie serdecznie. Też cieszę się, że do mnie trafiłaś. Jeżeli tylko będziesz miała jakieś pytania czy wątpliwości nie wahaj się tylko pisz. Nie obiecuję, że będę znała odpowiedź ale postaram się być razem z Tobą w tej niewiedzy. ;)
Co do praktyczności porad – na to właśnie stawiam w tym blogu. Wiem, że czasami moje podejście jest zbyt „łopatologiczne” ale trudno - drobiazgowa ze mnie osoba.
-
2007/10/30 15:10:03
Kate, chyba jednak coś zrobiłam źle. Faktem jest, że ikonki są, ale jeśli przeciągnę myszką ikonkę przy adresie w lewą stronę, to nie przechodzi moja tylko wraca bloxowa. U Ciebie jest inaczej, u innych też, więc ja chyba coś źle zrobiłam, ale co? MAsz jeszcze trochę cierpliwości?;)
-
kate_mac
2007/10/30 15:39:47
Irytku cierpliwość mam ale odpowiedzi nie
napisałam Ci dokładnie krok po kroczku jak to zrobiłam i powinnaś mieć tak samo jak ja - na dodatek nie rozumiem "o czym ty do mnie rozmawiasz" ;)
myszką? a którym przyciskiem?
przy adresie? a w której przeglądarce?
czy chodzi Ci o to żeby zrobić w Operze przycisk na pasku narzędzi który będzie prowadził ana twoją stronę? jeżeli tak to u mnie w Operze kicia na Zmaganiach pojawia się normalnie
-
2007/10/30 15:58:14
Kate, właśnie o tym mówię. Kicia tylko na Zmaganiach jest posłuszna, na innych blogach, ani na Szablonach ani na głownym blogu nie;) Zupełnie nie wiem dlaczego, przecież wszystko tak samo robiłam.
Jak
-
kate_mac
2007/10/30 16:12:34
koty mają to do siebie, że są niezależne
;)
załadowałaś właściwy plik osobno do zasobów każdego bloga?
jeżeli chcesz umieścić znaczek w zasobach jednego a korzystać we wszystkich to kod html będzie wyglądał inaczej - może to jest rozwiązanie którego szukasz
-
2007/10/30 20:49:10
chciałabym na moim blogu pozbyć się słowa: Archiwum. Jak to zrobić?
-
2007/10/30 22:49:19
Umieściłam pliki w zasobach każdego bloga. I w każdym kodzie HTML zmieniłam nazwę pliku. Niech już tak zostanie:)
Kate, co teraz masz na ikonce? Ładnie to wygląda, ale co przedstawia?
-
kate_mac
2007/10/31 08:56:01
» dzika_kobieto ku mojej ogromnej radości Twoje pierwsze pytanie jest proste
Aby napis „Archiwum” się nie wyświetlał (napis nie lista miesięcy) musisz napisać:
#ArchiwumTytul {display:none;}
#ArchiwumTytul jest już w twoim CSS więc tylko zmień właściwości, które tam masz napisane na display:none

» Irytku poradziłaś sobie sama świetnie (Twoje wiadomości odebrałam dopiero dzisiaj ;))
1. nazwa pliku (wraz z rozszerzeniem) musi być dokładnie taka sama jak nazwa w kodzie ale nie ma nic wspólnego z nazwą bloga
2. nie powinnaś w paincie bo paint nie obsługuje przezroczystości; jeżeli zapiszesz ten plik w paincie to doda on do niego tło
3. bez względu na to czy to 32 czy 16 nic nie powinno zostać obcięte
4. teraz moją ikoną są dwie litery: „K” i „M” napisane czcionką Hannibal Lecter; zastanawiam się jednak czy nie wrócić do starego bo tamten był przynajmniej wyraźny a ten jest tylko ładny ;)
-
2007/10/31 09:27:34
Udało się:) ale kiedy to zrobiłam, nazwa miesiąca przemieściła się do góry a obrazek znalazł sie poniżej...hmmm...i co z tym zrobic, by napis Pażdziernik znowu znalazł sie pod obrazkiem ? :(
-
2007/10/31 09:28:16
podam na wszelki wypadek adres mojego bloga dzikakobieta1.blox.pl/hml
-
2007/10/31 11:11:19
Kate, czy to wina poczty, czy Ty do niej rzadko zaglądasz?;) Dobrze, że powiedziłaś mi o braku zależnośći tytułu pliku z tytułem bloga. U mnie są identyczne;)
Twoją filiżankę tez widać, właśnie kiedy się przeciągnie myszką ikonkę w lewo:) Zauważyłam też, że masz komentarze autora wyszczególnione. Próbowałam jakiś czas temu, ale poległam. Nie udało mi się. Trudniejsze wydawałoby się, zwijane archiwum zainstalowałam, a komentarzy nie. Próbowałam na moim głównym blogu. Z całej operacji wyszła tylko czerwona kreseczka przy moim loginie;)
-
kate_mac
2007/10/31 11:52:00
Irytku - dotarło ale odpowiem później zajrzyj na ZMAGANIA

Dzika_Kobieto
w tytule archiwum miałaś podane przesunięcie i teraz gdy tego tytułu nie ma nie ma i przesunięcia
z tego co zauważyłam było tam napisane
FONT-SIZE: 13px;
padding-top: 405px;
padding-bottom: 14px;
te właściwości muszą pozostać w CSS ale skoro nie wyświetlasz tytułu musisz je przenieść gdzie indziej
najlepiej do wąskiej szpalty tam gdzie masz opisany obrazek dziewczyny
czyli powinno to wyglądać tak:
#BlogWazkaSzpalta {BACKGROUND-IMAGE: url(/resource/samotnosc.jpg);
background-repeat: no-repeat;
WIDTH: 380px;
FONT-SIZE: 13px;
padding-top: 405px;}
wtedy nic na pewno nie zasłoni Ci tej grafiki
mam nadzieję że to rozwiąże problem; jeżeli nie to wróć do poprzedniego opisu wąskiej szpalty i napisz mi tu że to nie działa a ja pomyślę nad innym rozwiązaniem - ale to powinno zadziałać
-
2007/10/31 12:05:11
Dziękuję, zadziałało :))
:)
-
2007/10/31 13:07:25
proszę bardzo
-
2007/11/01 09:02:12
Chciałabym Cię jeszcze zapytać jak wymienic grafikę , którą mam w szablonie jesli w plikach nie mam jej wgranej?
Kiedys wgrywałam do plików to co chciałam podmienic nastepnie podstawiałam w css-ie ale teraz nie mam w plikach tej grafiki z szablonu, nie wiem czy mój sposób zadziała?
-
kate_mac
2007/11/01 12:45:23
Wydaje mi się że odpowiedz brzmi tak choć nie jestem pewna o co się pytasz ;)
wyjaśnię ogólnie

aby umieścić grafikę w szablonie najpierw ładujesz ją do zasobów a potem w odpowiednim miejscu w CSS piszesz:
BACKGROUND-IMAGE: url(/resource/nazwa_pliku.rozszerzenie);

dokładnie tak samo jak to miało miejsce w przypadku pliku z kobietą - tam było
BACKGROUND-IMAGE: url(/resource/samotnosc.jpg);
-
2007/11/01 17:42:37
Jeszcze raz dziekuję, zaraz poprobuję na moim probnym szablonie :)
-
Gość: , *.sinusnet.pl
2013/04/16 10:42:47
Ciekawie rozwiązanie dziekuje
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...