Menu serwera

serendipity – livesearch plugin, fajny bajer

a tak zasiadłem wczora z wieczora i pokombinowałem nieco (ale niestety tylko nieco :/) przy blogu. tłumacząc sobie radośnie różne wtyczki, w oczy rzuciła mi się jedna, umieszczona w standardowej instalacji serendipity: livesearch się nazywająca. stworzeniem ciekawym będąc, sprawdziełem co takiego ta wtyczka daje.

a dodaje fajny bajer w formularzu szybkiego wyszukiwania na stronie i do tego jest toto stylowalne :). dwa razy nie trzeba było mi powtarzać, popatrzyłem co i jak i mam fajnie zrobione wyszukiwanie, a co!

ok, co robi plugin? plugin dorzuca malutki javascripcik, który "na żywo" (podczas pytania) odpytuje bazę danych na okoliczność występowania wklepanej już sekwencji znaków. cały rzeczony "bajer" polega na tym, że wyniki są na bieżąco wyświetlane w takim fajniutkim otwierającym się "okienku". słodkie ale też i przydatne. okienko w każdej chwili można ubić wciskając w formularzu esc. proste ale fajne nad wyraz.

na pierwszy rzut oka nie wygląda to zachęcająco – layer jest nakładany poprawnie (oczywiście nie w ie, znaczy działa ale wygląda niezbyt ciekawie) ale bez tła, strona "pod spodem" jest widoczna, wyniki wyszukiwania nakłądają się na content strony… jednym słowem – nieciekawie. pogrzebałem więc w źródle skryptu i odetchnąłem z ulgą bo twórcy dali nam do dyspozycji dwie definicje stylów, którymi możemy się posłużyć.

pierwsza to:

serendipity_livesearch_result

to małe coś odpowiedzialne jest za ostylowanie containera, w którym wyświetlane są wyniki wyszukiwania. wyniki wyświetlane są w postaci linków do wpisów więc zabawa wyglądem linków to rzecz jak najbardziej możliwa i wskazana. a więc ostylujmy nieco to okienko:

.serendipity_livesearch_result {
background: white;
background-image: url({TEMPLATE_PATH}img/search.png);
background-repeat: no-repeat;
background-position: right bottom;
padding-left: 10px;
padding-right: 5px;
padding-top: 5px;
padding-bottom: 5px;
}

jak widać ustawiłem białe tło i wrzuciłem prawy dolny róg obrazek search.png, który siedzi sobie w katalogu img mojego schematu. reszta to już standardowe ustawienie paddingu. riddle kod wyśmieje ale działa jak należy :)

dobra, coś trzeba zrobić z cieniem bo to nie może tak wyglądać. za to odpowiedzialna jest definicja:

LSShadow

no to zróbmy w takim razie coś takiego:

#LSShadow {
background: grey;
}

i już mamy tło jak należy. trudne? nic a nic. a efekt chyba sympatyczny, nie? anyay, zbieram takie drobiazgi za jakiś czas uaktualnię swój schemacik, który leży sobie i czeka na pobranie w dziale themes kategorii serendipity.

Brak komentarzy.

Dodaj komentarz

Przeczytaj poprzedni wpis:
dwanaście godzin przed monitorem

wkur****ą mnie takie sytuacje - zbieram się do wyjścia a tu telefonik i miły żeński głosik radośnie mnie informuje, że...

Zamknij