Dzisiaj będzie o cytatach!
Ta mała cholera zazwyczaj jest stworzona w taki sposób, że zajmuje tak z 60% postu. A co jeśli chcemy, żeby było 100%? A właśnie po to piszę ten post. Nie pamiętam już kiedy pierwszy raz dokonałam tej zmiany, ale jest prosta, krótka i działająca w 100%. Efekt można powiedzieć składa się tylko z dwóch elementów.
Na początek dodajmy jednak troszkę koloru naszemu cytatowi
Klikamy szablon > dostosuj > zaawansowane > Dodaj arkusz CSS
blockquote {border: 1px dotted #ddd; background:#fbfbfb;padding:6px;}
Border, czyli obramowanie całego cytatu; background, czyli cytat tło będzie wypełnione kolorem; padding użyty został po to, aby tekst nie "przyklejał" się do boków "cytatu".
Jak widzicie przestrzeń, którą zajmuje ten element, jest skupiona głównie po środku posta. A to dlatego, że bezpośrednio dla cytatów mamy ustawiony margines z lewej i z prawej strony.
Aby ustawić go na długość całego pola tekstowego możemy wykorzystać dwa sposoby:
- używając tylko marginesów;
- używając pojedynczego marginesu i ustawiając jego szerokość;
Pierwsza opcja z wykorzystaniem marginesów
blockquote {margin-left:0px;background:#f5f5f5;padding:5px;margin-right:0px;}Po użyciu powyższych kodów "zlikwidujemy" jakiekolwiek marginesy, które wcześniej doczepiły się do cytatu. Całość boxu powinna się dopasować do długości posta czy ustalonemu mu paddingowi. Jednym słowem, jego długość nie będzie się różniła od długości tekstu na blogu.
Druga opcja z wykorzystaniem width & margin
Ten pomysł może czasami przysporzyć problemów. Jednak w większości przypadków działa idealnie. Chodzi w nim o to, że usuwamy margines tylko z jednej strony, a margines z drugiej "likwidujemy" za pomocą długości, która go po prostu "przykrywa.blockquote {margin-left:00px;background:#f5f5f5;padding:5px;width:97.5%;}Problemy w tym przypadku sprawia nieco width. Nie możemy od tak ustalić sobie 100%, bo przez użyty padding niestety box cytatu nie będzie równy polu tekstowemu. Najlepiej ustalać 98/97%, jednak w niektórych przypadkach zdarza się, że długość powinna być ustawiona nawet na 94%.
Oczywiście zamiast wartości w procentach możecie bez problemu ustalić wartość w pikselach, jednak wtedy wraz ze zmianą szerokości elementów nasz cytat będzie wymagał lekkiej korekty.
Całe rozumowanie może bez problemu powtórzyć dla kolumny bocznej, jeśli zażyczymy sobie tam wstawić cytat, używając selektora .sidebar blockquote. W tym przypadku efektem można się jeszcze ciekawiej bawić, łączyć go z obrazkiem, dodawać scrollowanie, wstawiać linki i wiele innych!
O tak, jak się ma duzo czasu i dobry projekt, to faktycznie robota z szablonem leci. U mnie na ogół rozciaga się aż w końcu cały szablon mi się przykrzy i zabieram się za nowy. Teraz mam własnie nowy, prosty, wydaje mi się, że zrobiłam w nim wszystko, co chciałam (w końcu). Prosty i to w nim lubię. I jak zwykle Twoje instrukcje sporo mi pomogły :)
OdpowiedzUsuńCo do Twojego szablonu - równie prosty, ale jaki fajny :) I widzę drewno się nie nudzi ;p
Mnie się podoba Jack Frost <3
Hm,
to na pewno spacja? A nie Enter? Tak, odnoszę sie do instrukcji z menu. I to jedno mi sie rzuciło w oczy. Czyżbym mylila się całe życie? :o
Oj tak, z marginesami jest mnóstwo zabawy. Wczoraj bawiłam się u siebie, bo chciałam dwukolumnowy, z czeko lewa kolumna miała być przesunięta maksymalnie w lewo. I zabawa. Z czego dwa razy przywracałam szablon Biały Prosty, bo się pieprzyło ustawienie i nagle posty wskakiwały na kolumnę o.0 Jedno wielkie, wtf! Ale w końcu się udało. I tak, strzelanie na oko z wymiarami jest niezłą zabawą :D
A co do dopasowania bloga pod konkretne tło - nigdy więcej! Wystarczy inny monitor, z inna rozdzielczością i nasz blog leży ;/ Jesli nie jest dobrze zakleszczony z tłem. Przekonałam sie o tym przy tle, na którym było tło pod prawą kolumnę i obraz maksymalnie z prawej. Włączam blog na uczelni, gdzie są szersze monitory i szczekę musiałam zbierać z ziemi. Przy okazji marginesów - pomocne jest również padding ;)
Cytat sama również modyfikowałam, ponieważ używam go jako komentarza do całego postu np. po instrukcji pare słów od ałtorki :D I również miałam problem, bo pole z tekstem jest malusie. Ale ja chyba sie pobawiłam z marginesem.
Co do propozycji, kiedyś bawiłam się z efektem np. po najechaniu na zdjęcie przyciemnia się i wyskakuje tekst. Ale jakoś po dłuższej zabawie znudziło mi się. Przy obecnym szablonie również bawiłam się, aby komentarze, etykiety i data były w jednej linii. A ostatnio zastanawiałam się nad wyglądem mobilnym bloga. Albo nad zawartością stron, które powinny byc spójne. Nie wiem, co by jeszcze mogło być, bo sporo instrukcji na Twoim blogu juz było ;)
Tytuł posta jest poprawne ;). (postu - od: post religijny)
OdpowiedzUsuń