Tag: css

Kategorie
Snippet WordPress

WordPress: jak zmienić tło w co drugim wpisie

Na polskim forum WordPressa użytkownik kujdak zadał pytanie

Mam skórkę Twenty Eleven ten. chciałem wyróżnić posty – co drugi o np. szarym tle. porsze o pomoc jak to zrobic?

Odpowiedź dotyczy dowolne skórki i jest przewrotna. Wystarczy dodać odpowiednią klasę i ją wyróżnić.

A więc jak dodać klasę?

add_filter( 'post_class', 'iworks_even_odd_post_class_filter' );
 
$post_count = 1;
 
function iworks_even_odd_post_class_filter( $class )
{
    global $post_count;
    $class[] = $post_count++ % 2? 'odd':'even';
    return $class;
}

Oraz dodać odpowiedni wygląd w pliku style.css:

.hentry.odd
{
    background-color:red;
}
Kategorie
Bez kategorii WordPress

Testy motywu – skąd treść?

Tworząc nowy motyw do wordpressa na pewnym etapie prac zabieramy się do testowania naszej pracy. Ale żeby ją przetestować najlepiej korzystać z instancji, która … o zgrozo … zawiera dane.

Oczywiście można skorzystać z kopii już istniejącego serwisu i często tak robię, ale to nie rozwiązuje wszystkich testów, które należy przeprowadzić, szczególnie jeżeli korzystam z zestawu klas, które resetują ustawienia css’ów.

Podstawowym zestawem danych z których korzystam, jest ten udostępniany przez autorów wordpressa. Zestaw jest cyklicznie uzupełniany, co widać po wersjach plików. Ostatni, który można zaciągnąć ma datę 2011-01-15.xml.

Czasem korzystam z wtyczki WP dummy content, która z kolei pozwala na wygenerowanie treści: wpisów, stron, kategorii i jeszcze paru rzeczy, którymi można testować temat.

Innym zestawem danych jest Test Post Pack, ale ten zestaw jest moim zdaniem zdecydowanie słabszy od xml’a udostępnianego przez zespół tworzący wordpress’a.

Import danych z plików XML wykonujemy z „Narzędzia->Import”, wybierając „WordPress”. Należy mieć też zainstalowaną wtyczkę WordPress Importer.

A czego Ty używasz do testowania swoich motywów?

Kategorie
WordPress Wtyczka

Interaktywna mapa Polski

Drobna wtyczka, która powstała na zamówienie mojej Lepszej Połowy, a które służy do wyboru województwa z poziomu interaktywnej mapy. Wykorzystałem mapę stworzoną i udostępnioną na stronie: winston_wolf.

Instalacja wtyczki jest prosta:

  1. Ładujemy wtyczkę do folderu z … wtyczkami.
  2. Aktywujemy ją.
  3. Ustawiamy odnośniki do województw „Ustawienia”->”Interaktywna Mapa Polski”
  4. Umieszczamy shortcode [mapa-polski] we wpisie lub na stronie.
  5. Umieszczamy widget w sidebarze.

Mapa nie wymaga flasha czy innych dodatkowych wtyczek, wykorzystuje javascript i arkusze stylów.

Wtyczka dostępna jest w repozytorium wordpress.org: Interactive Polish Map.

Kategorie
Bez kategorii

CSS Sprites

Polecam omówienie techniki, którą powinien znać KAŻDY szanujący się webowiec.
Learning CSS Sprites

Kategorie
Bez kategorii

różnice w CSS dla Internet Explorer 6, 7 i 8

Świetne zestawienie:

CSS Differences in Internet Explorer 6, 7 and 8

Pokazane punkt po punkcie jakie selektory działają w której z wersji przeglądarki.

Ogólna konkluzja jest taka, że wersja 6 była/jest po prostu strasznie fatalna. Bardziej nawet niż myślałem.

Kategorie
Bez kategorii

Znikło coś, czyli paskudny błąd IE7

Sytuacja jest prosta. W pewnym miejscu serwisu przestała się pokazywać zawartość jednego z boksów. Widać było sam kontener, prawidłowo wypełniony tłem i prawidłowo rozciągnięty w pionie przez swoją zawartość.

Jedno ale. Zawartości nie widać.

Przykładowy listing:

  • <div class=”a”>
  • <div id=”dyn”></div>
  • </div>
  • <div class=”a”>
  • <div class=”b”>treść</div>
  • </div>

Wszystkie divy są float’owane do lewej, wszystkie też mają ustawiony clear po lewej stronie. Całość znajduje się w jakimś divie o ustalonej szerokości, a div.a mają taką samą szerokość jak parent oraz padding:0;margin:0.

Kluczem całego błędu okazało się być to, że div#dyn ma dynamicznie generowaną zawartość. (kalendarzyk).

Co było błędem?

Zmieniająca się wysokość pierwszego div.a powodowała przesunięcie drugiego div.a, jednocześnie div.b pozostał na swoim miejscu. Jego top … się nie zmienił, mimo position:static. Po prostu pozostaje, tam gdzie stał, wyłażąc w lewo poza lewy margines rodzica.

Jak naprawić?

Drugi div.a musi być ustawiony na float:none – wtedy problem nie występuje.

Kategorie
Bez kategorii

Jak stworzyć stronę do wydruku

Po stworzeniu fantastycznie wyglądającej strony warto zastanowić się jak nasza strona będzie wyglądała na wydruku. To ważne, bo ile razy zdarzyło się wam po prostu wydrukować stronę w celu dalszego jej wykorzystania, do przeczytania w podróży czy też do spokojnego zaznaczenia sobie co ciekawszych fragmentów?

Comparison of sans and sans-serif fonts.Obrazek z Wikipedia

Faktycznie w przypadku blogów można z tym troszkę dyskutować, ale tylko troszkę. W przypadku pozostałych stron nie da się z tym dyskutować, ponieważ jest to absolutna konieczność.

Stronę buduje wielu elementów z których wiele nie wnosi niczego o wydruku, ba nawet go psując, powodując że drukarka wypluwa o kartkę czy dwie z dużo, bo wydrukowało się kilka menu, jakieś nagłówki, jakieś nikomu na wydruku niepotrzebne stopki. W wersji pesymistycznej jest jeszcze gorzej: na pierwszej stronie mamy menu zajmujące 1/3 szerokości wydruku, a potem 20 kartek z wydrukiem wąskiej kolumny z treścią. Z drugiej strony nie ma na wydruku informacji, które mogą być przydatne, które umożliwią szybszy kontakt biznesowy czy też zapewnią nową wizytę w przypadku przekazania kartki dalej.

Sprawdź czy twoja strona dobrze wygląda na wydruku:

Kontynuuj czytanie „Jak stworzyć stronę do wydruku”
Kategorie
Bez kategorii

Lista ikonek – tworzymy podcień

Wcześniejszy wpis w którym opisane było tworzenie listy ikonek pod tytułem pozwolił na wytworzenie następującej listy ikonek.

ikony-bez-cienia.png

Ładnie toto wygląda, jest małe i wygodne. Ale może by tak dodać jeszcze cień pod każdą z graficzek?

ikony-z-cieniem.png

Sposoby na uzyskanie czegoś takiego są dwa. Jeden polega na takiej modyfikacji pierwotnego pliku, żeby cienie były w nim obecne. Drugi polega na dołożenia cienia pod każdy z elementów, co niestety wiążę się z dodatkową grafiką. Przedstawię ten drugi.

HTML się nie zmienił:
<ul>
<li class="d"><a href="#">d</a></li>
<li class="t"><a href="#">t</a></li>
<li class="w"><a href="#">w</a></li>
<li class="a"><a href="#">a</a></li>
<li class="b"><a href="#">b</a></li>
<li class="c"><a href="#">c</a></li>
</ul>

CSS wygląda tak

<style type="text/css">
li
{
background:red url(shadow.gif);
list-style:none;
margin:0;
float:left;
margin-right:3px;
padding-bottom:5px;
padding-right:4px
}
a
{
background-image:url(socicons.gif);
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t a{background-position:-16px}
li.w a{background-position:-32px}
li.a a{background-position:-48px}
li.b a{background-position:-64px}
li.c a{background-position:-80px}
</style>

Jeżeli porównasz do poprzedniego rozwiązania zauważysz że nie ma za dużych zmian.

Jak wytworzyć sam cień w Photoshopie?

  1. Utwórz obrazek o wymiarach 22×22.
  2. Wypełnij go tym tłem które potrzebujesz.
  3. Utwórz nową warstwę.
  4. Na nowej warstwie utwórz kwadrat leżący w górnym lewym rogu o wymiarach 16×16.
  5. Wypełnij go kolorem tła.
  6. Dodaj cień z ustawieniami
    1. Przezroczystość 50%.
    2. Kąt 135.
    3. odległość 3px.
  7. Zapisz jako obrazek na stronę www.
  8. Używaj.

Piliki użyte w przykładzie

Wszystkie użyte pliki możesz pobrać (zawiera plik psd): ikony-podcien.zip

Inne podejścia do tematu list

Kategorie
Bez kategorii

Lista ikonek pod artykułem

W 8 kroków do zmniejszenia ilości obrazków na stronie Łukasz Sobek rozprawia się z prezentacją odnośników do portali społecznościowych. Wywiązała się dość burzliwa dyskusja wraz z przykładami jak to zrobić: Semantyka HTML: lista nieuporządkowana i ten wpis prawie rozwiązuje zagadnienie.

Dlaczego prawie?

Są w nim dwa niedociągnięcia: nadmiarowy span oraz „display:none” którego należy unikać, ze względu na „nieczytanie” przez czytniki głosowe. Skoro nie widać, to nie trzeba czytać, prawda?

Jak to poprawić?

Usunąć tag „span”

Jest … niepotrzebny.

<ul>
<li class="d"><a href="#">del.icio.us</a></li>
<li class="t"><a href="#">technorati</a></li>
<li class="w"><a href="#">wykop</a></li>
</ul>

Schować tekst za pomocą tekst indent

<style type="text/css">
li{
background-image:url(socicons.gif);
list-style:none;
margin:0;
float:left;
margin-right:2px
}
a{
display:block;
width:16px;
height:16px;
text-indent:-99em
}
li.t{background-position:-16px}
li.w{background-position:-32px}
</style>

Inne uwagi

  • ograniczyć nadmiarowy css
  • ograniczyć nadmiarowe identyfikatory

I to by było na tyle.