eksperymenty z internetem, blogami, bloxem, javascriptem, firefoxem czy różnymi użytecznymi programami czy narzędziami, tak okołoinformatycznie tudzież okołokomputerowo...
Blog > Komentarze do wpisu

blox i jednolity wygląd wpisów na stronach

Układ bloga na blox.pl jest taki, że ostylowania wyglądu wpisów na głównej stronie bloga używane są inne klasy niż na stronie pojedyńczego wpisu (tej z komentarzami). W związku z tym osoby, które zaczynają prace nad zmianami własnego bloxa mogą czasem zdziwić się odmiennym wyglądem bloga w tych przypadkach. Nawet dla osób obeznanych z CSS rozeznanie się w tym stanowić może w pierwszych momentach trudności.

Poniżej zrobiłem zestawienie jakie klasy są aktualnie wykorzystywane dla poszczególnych elementów wpisu, w zależności od nawigacji po blogu.

ELEMENT
STRONA GŁÓWNA
STRONA WPISU
(z komentarzami)




Blok całego wpisu
BlogWpisBox
BlogWpisBox
Data wpisu
BlogDataWpisu
---
Tytuł wpisu
BlogWpisItemTytul
TytulKomentowanegoWpisu
Wstęp do wpisu
BlogWpisTresc WstepKomentowanegoWpisu
Treść wpisu
BlogWpisTresc TrescKomentowanegoWpisu
Informacja pod tekstem
InfoPodTekstem
InfoKomentowanegoWpisu



Wąska szpalta
BlogWazkaSzpalta
SkomentujWazkaSzpalta

UWAGA: Jak widać w tabelce, definicja wąskiej szpalty też jest różna w zależności od nawigacji, o czym postanowiłem napisać mimo, że nie dotyczy to sekcji treści. Nazwa klasy dla wąskiej szpalty jest pisana przez z - to podobno od ważkiej w niej zawartości :D


Ja sam przy swoim szablonie trochę się z tym mocowałem, ale z czasem wpadłem na pomysł wykorzystania możliwości jakie oferuje CSS.
Mianowicie można zdefiniować parametry dla kilku analogicznie wykorzystywanych klas w jednym wpisie, używając składni w której poszczególne klasy oddzielone są przecinkami a po nich następuje wspólna definicja. Przykłady poniżej:
.BlogWpisItemTytul, .TytulKomentowanegoWpisu {
wspólne atrybuty dla tytułu wpisu
}
.BlogWpisTresc, .TrescKomentowanegoWpisu,
.WstepKomentowanegoWpisu {
wspólne atrybuty dla treści wpisu i wstępu
}

Analogicznie można postępować definiując elementy zawarte wewnątrz wpisu, takie jak hiperłącza czy listy:
.BlogWpisTresc a, .TrescKomentowanegoWpisu a, 
.WstepKomentowanegoWpisu a {
wspólne atrybuty dla hiperlinka
umieszczonego w treści wpisu / wstępie
}

Taki sposób zapisu znacznie upraszcza kontrolę nad wyglądem bloga, a przy okazji oszczędza trochę miejsca w arkuszu CSS (bo definicje nie są powielane).

PS.
To wpis przygotowany dość dawno temu i kiedyś musiałem go opublikować ;)

del.icio.us icon , , ,
technorati icon ,
wtorek, 10 lipca 2007, sgk

Polecane wpisy

  • usunięcie pomarańczowej "belki promocyjnej" bloxa

    Dziś rano na moich blogach zaskoczył mnie ( i nie tylko mnie ) taki widok: Nie mam pojęcia co to za pomysł, bo zapowiedzi administratorów nigdzie nie widziałem.

  • permalinki do komentarzy na blox.pl (user.js)

    W czasie gdy debergerac udoskonala swój skrypt do awatarów osób komentujących na blox.pl (ostatnio dodał awatary z blip.pl ) ja postanowiłem zająć się czymś, c

  • takie prace warto propagować

    Mimo, że kilka dni temu zrobiłem już o tym wzmiankę w minizapiskach , ale wciąż jestem pod wielkim wrażeniem graficznej doskonałości nowego projektu SenTineLa

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Jednolity wygląd wpisów z szablony katemac
Dość dawno temu bo już ponad rok temu Eskey wytłumaczył jak osiągnąć jednolity wygląd wpisów na stronie głównej bloga i na tej z pojedynczą notką. Trochę wody już od tego czasu upłynęło, kilka nowości się pojawiło niemniej wpis jest nadal aktualny. ... »
Wysłany 2008/08/28 20:49:03
Komentarze
rkdeey
2007/07/11 01:11:55
Ja wciąż walczę z jednym problemem - w komentarzach standardowo linki oznaczane są podkreśleniem i kolorem niebieskim (wyjątkiem są moje własne komentarze i linki, ale o tym wiesz dobrze :D). Problem tkwi w tym, że na granatowym tle niebieskie linki nie są dobrze widoczne, usiłuję dojść w którym miejscu w CSS znajduje się atrybut definiujący ten niebieski kolor linku. Mógłbyś coś podpowiedzieć? :)
-
stl
2007/07/11 09:59:14
Ja bym Ci proponował umieścić w arkuszu stylów po prostu osobną deklaracją dla elementu "a", czyli po prostu (może nie wytnie):

a {
color: #ffffff;
}
-
sgk
2007/07/11 10:06:36
@rkdeey
Podziałam coś i podeślę Ci poprawiony arkusz. Może uda mi się nawet dziś.
Sugestia SenTineLa też powinna wystarczyć. Dopisz ją jednak na początku arkusza.
-
s.z.y.m.o.n
2007/07/12 01:07:08
@rkdeey
Nie masz zadeklarowanego koloru dla linków w komentarzach (nie jest też dziedziczony) więc przeglądarka wyświetla je w domyślnym niebieskim kolorze.

Wrzuć do CSSa (przed deklaracją dla .KomentarzAutora a) coś w tym stylu:

.InfoKomentarzAuthor a{color: silver}

Kolor oczywiście ustaw wedle własnych upodobań.
-
rkdeey
2007/07/13 17:49:45
Dzięki za pomoc. Działa jak należy :)
-
konwis
2007/11/08 18:29:14
hej
a czy jest możliwość uzyskania identycznego wyglądu wąskiej szaplty - to znaczy, żeby pokazywały się tam wszystkie elementy strony standardowej - ostatnie wpisy, zakładki...?
z góry dzięki za odpowiedź
pzdr
-
sgk
2007/11/08 23:48:06
Standardowo takiej metody nie ma (tzn. sam Blox jej nie daje a CSSem nie da się tego zrobić).
Natomiast można to zrobić przygotowując "ręczne" wersje zakładek czy polecanych/ostatnich wpisów i wstawić je do pola na kod HTML (albo przez zewnętrzny plik ).
Tak jak zrobiłem to tutaj.
bloxowe porady

RSS


dodaj do netvibes

Add to Google


pobierz Spiceworks - darmowe oprogramowanie do zarządzania infrastrukturą IT