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

Zmiana wyglądu: kolor linków (na przykładzie szablonu dashed)

Niektóre zmiany są trudne do przeprowadzenia. Ciężko jest zmienić klimat szablonu na którego charakter składają się głównie grafiki w tle, jest on dosłownie zszyty na wymiar i tyle (chociaż CSS 3 daje aktualnie dodatkowe możliwości, które eliminują konieczność wykorzystania precyzyjnie zaprojektowanych ilustracji do tła). Są jednak szablony nieco luźniejsze. Owszem mają grafiki ale są one powtarzalne. Owszem mają ozdoby ale są one tworem kodu i w każdej chwil można wykorzystać je do nieco innych celów albo nieznacznie zmienić.

szablon dashed zmiana kolorów

Jednym z takich szablonów jest dashed. Największą jego ozdobą jest kolor więc bardzo łatwo zmienić taki wyróżnik. Co lepsze przypisany jest on tylko linkom (wszystkim za wyjątkiem tytułu bloga i notek) więc ewentualną zmianę przeprowadza się w jednym miejscu. Banalnie proste, nieprawdaż?

Instrukcja najprostsza.

1. Przechodzimy do edycji kodu szablonu (WYGLĄD->EDYCJA CSS)

2. Odszukujemy w szablonie kolor, który chcemy zmienić, np. kolor linków

3. Otwieramy przeglądarkową wyszukiwarkę (Ctrl+F) i wpisujemy tam wybrany kolor.

4. Numer zmienianego koloru zastępujemy w arkuszu numerem nowego wybranego koloru.

5. Upewniamy się, że kolor, którego chcemy się pozbyć nie pojawia się ponownie w szablonie, korzystając z wyszukiwarki przeglądarki.

Klikamy zapisz i gotowe

W dalszej części wpisu dokładny opis całego procesu dla tych co miewają wątpliwości. A na koniec prezent: kolorowy dashed czyli gotowe kody ze zmienionymi kolorami. Wystarczy zastąpić nimi kod pobranego szablonu i gotowe.

Kolorowy Dashed

Od kilku miesięcy intensywnie poprawiam starsze notki. Wbrew mojemu przekonaniu o chaotyczności moich zapisków w miarę poprawiania kolejnych notek wyłania się całkiem sensowny zbiór tematów. Nie są może one ułożone we właściwej kolejności i przed poprawkami notki nie zawierają wszystkich informacji ale systematycznie nadrabiam te zaległości.

Jedną z poprawianych ostatnio notek była ta o wyglądzie linków. Podzieliłam ją na dwie części: właściwą notkę, którą wzbogaciłam o przykłady i dokładniejsze wyjaśnienia a także dodatkową stronę zawierającą wypis selektorów opisujących linki w szablonach na starym kodzie. Pisząc o linkach przypomniałam sobie o szablonie dashed i o fakcie, że intensywny kolor przypisany jest tam tylko przy linkach.

Szablon: typu dashed

Szablon dashed składa się głównie z różnych odcieni szarości, także tytuły notek i bloga są w odpowiednich odcieniach. Jedyny kolor z innej bajki wprowadzony jest poprzez linki. W związku z tym, że jest to tylko jeden kolor nie było potrzeby określania kolorów linów w innych miejscach (poza wspomnianymi tytułami).

Kolory

Proponowane przeze mnie kolory wybrałam korzystając z dwóch generatorów, które dobierają inne kolory zachowując odpowiednią jasność i nasycenie. Wpisałam tam oryginalne kolory linków z szablonów dashed: niebieski (#5769aa), zielony (#669900), czerwony (#FF0022) i wybrałam nowe, które wydawały się najodpowiedniejsze.

  • Color Schemer
  • Color Wizard

Polecam też wybranie koloru pasującego do ilustracji przy wykorzystaniu Color Palette Generatora. Wpisując adres ilustracji możemy wygenerować paletę kolorów związanych  ilustracją. Należy wziąć jednak poprawkę na fakt iż blok koloru (jak przykładowo tło) będzie się wydawał ciemniejszy i bardziej intensywny niż ten sam kolor użyty jako kolor tekstu. Dlatego polecam mimo wszystko skorzystać też z któregoś z dwóch powyższych generatorów aby przyciemnić nieco kolor dla linku.

paleta dla szablonu dashed

Dla ciemniejszego szarego tła szablonu 04 dashed, niebieskiego polecam kolory nieco przyszarzone. Moim zamiarem był dość jednolity pod względem natężenia projekt stąd też moja skłonność ku niezbyt nasyconym odcieniom:

  • ciepły fioletowy #aa5592
  • wypłowiały pomidorowy #dc5524
  • niezbyt intensywna zieleń #57aa6e

Zielona wersja (05) szablonu dashed ma cieplejszy odcień szarości w tle i brązowawy kolor tekstu dlatego najbardziej odpowiednie w tym przypadku będą odcienie nieco cieplejsze, o intensywnym natężeniu koloru ale zmniejszonej jasności:

  • brązowy w ciemnym rdzawym odcieniu #993300
  • niebieski (bardziej cyjanowy niż indygo, o pełnym nasyceniu ale połowie jasności) #006699

6 szablon dashed, czerwony jest najbardziej intensywnym i jaskrawym z szablonów dashed. Tło jest jasne a czerwień intensywnie malinowa. Polecam więc najczystsze wersje kolorów, pełne nasycenie i co najwyżej drobne przyciemnienie.

  • czysta czerwień o lekko różowawym zabarwieniu #ff3d57
  • niebieski w lekko cyjanowym odcieniu #00a2ff
  • oliwkowa zieleń powstała z przyciemnienia żółtego koloru #ad9600

Wykonanie: zmiana koloru linków

Po załadowaniu szablonu na własny blog upewniamy się, że właściwy kod jest we właściwym miejscu (najbezpieczniej nie zmieniać nowo-skopiowanego szablonu tylko wylogować się z bloksowego konta i zalogować na nowo). W przypadku dashed szablonem podstawowym powinien być Spokojny (0Etheme) a w polu na kod css powinien znajdować się odpowiedni arkusz (dla pewności możesz porównać oryginalny z tym znajdującym się w twoim polu edycji):

arkuszZmiany przeprowadzać będziemy w polu edycji arkusza (WYGLĄD->EDYCJA CSS)

W pierwszej kolejności odszukujemy kolor, który będziemy zmieniać (niebieski #5769aa, zielony #669900, czerwony #FF0022).

Uruchamiamy przeglądarkową wyszukiwarkę (Ctrl+F) i wpisujemy tam zmieniany kolor. Później sprawdzimy czy nie pojawia się on gdzieś jeszcze (w zależności od przeglądarki, już po wpisaniu numeru dowiemy się ile razy pojawia się on na stronie).

arkusz szukacz chrome

Jeżeli masz już wybrany nowy kolor to zabieramy się za zmianę. Kolor szablonowego linku zastąp własnym. W zasadzie w szablonie dashed pojawia się on tylko jeden raz, przy ogólnym opisie linku. Pozostałe cztery razy to opis zwiniętego menu archiwum. Polecam każdą zmianę przeprowadzać dokładnie i kompletnie więc nawet jeżeli nie korzystasz z tego skryptu to zmień wszystkie kolory. Nieważne, że nie zauważysz różnicy. Nie kosztuje to specjalnego wysiłku a zapobiegnie konfuzji w przyszłości.

a {
 color: #57aa6e;
 text-decoration: none;
}
a {
 color: #993300;
 text-decoration: none;
}
a {
 color: #ad9600;
 text-decoration: none;
}

Zasada zrób raz a dobrze oszczędza wiele czasu i kłopotów. Teraz zajmie to kilka sekund a jeżeli to pominiesz to w razie skorzystania z zwiniętego archiwum zapewne kilkanaście razy więcej.

Po kliknięciu zapisz zmiana zostanie przeprowadzona i po sprawie. Najprostsza z możliwych zmian przeprowadzona.

Gotowce

Przygotowałam gotowe arkusze z wspomnianymi kolorami. Jeżeli ktoś chciałby skorzystać a nie wie jak to proszę, oto instrukcja:

  1. należy skopiować oryginalny szablon w celu załadowania odpowiednich plików graficznych do zasobów bloga (tylko raz więc jeżeli już kiedyś korzystano to nie trzeba)
  2. 0Etheme - Spokojnyupewnić się, że jako szablon podstawowy wybrany jest ten, którego ja używam w serii dashed czyli 0Etheme - Spokojny (jeżeli nie to zmienić szablon na ten właśnie)
  3. zastąpić zawartość pola edycji CSS udostępnionym tu kodem (poniżej odpowiednie wersje kolorystyczne)

dashed fioletowy #aa5592 Dashed fioletowy #aa5592

oryginalny szablon: 04 szablon dashed, niebieski
kod ze zmienionym na fioletowym kolorem

dashed pomidorowy #dc5524 Dashed pomidorowy #dc5524

oryginalny szablon: 04 szablon dashed, niebieski
kod ze zmienionym na pomidorowy kolorem

dashed zielony #57aa6e Dashed zielony #d57aa6e

oryginalny szablon: 04 szablon dashed, niebieski
kod ze zmienionym na zielony kolorem

dashed brazowy #993300 Dashed brązowy #993300

oryginalny szablon: 05 szablon dashed, zielony
kod ze zmienionym na brązowy kolorem

dashed granatowy #006699 Dashed granatowy #006699

oryginalny szablon: 05 szablon dashed, zielony
kod ze zmienionym na granatowy kolorem

dashed rozowy #ff3d57 Dashed różowy #ff3d57

oryginalny szablon: 06 szablon dashed, czerwony
kod ze zmienionym na różowy kolorem

dashed cyjanowy #00a2ff Dashed cyjanowy #00a2ff

oryginalny szablon: 06 szablon dashed, czerwony
kod ze zmienionym na cyjanowy kolorem

dashed oliwkowy #ad9600 Dashed oliwkowy #ad9600

oryginalny szablon: 06 szablon dashed, czerwony
kod ze zmienionym na oliwkowy kolorem


Notki na powiązane tematy:

niedziela, 12 lutego 2012, kate_mac

Społecznościowo


Polecane wpisy

TrackBack
TrackBack w tym blogu jest moderowany. TrackBack URL do wpisu:
Follow Me on Pinterest
Related Posts Plugin for WordPress, Blogger...