Edycja domyślnej skórki Shoper – cz. IV

Czwarta odsłona mini poradnika dla spragnionych zmian w skórce sklepu shoper to moja mała pomoc dla Tych, którzy zmiany w skórce nie zamierzają ograniczać jedynie do edycji arkusza CSS.

Ponieważ te parę podpowiedzi jakie tu znajdziecie będą ingerowały w układ kodu HTML oraz elementów szablonów Smarty przypominam o konieczności pracy na kopii skórki bazowej.

Dla swojego własnego dobra ZAWSZE twórzcie kopię i na niej próbujcie nowe zmiany.

Dzisiaj zajmę się zmianą standardowego przywiązania wyszukiwarki do sekcji modułów. Dajmy jej troszkę swobody 🙂

Zacznę może od w miarę prostych zmian, czyli takich które nie powinny wywoływać zbyt wielu trudności nawet dla początkujących.

Zakładam więc, iż chcę umieścić wyszukiwarkę w nagłówku strony, np po prawej stronie od logo sklepu. Co potrzebuję by zacząć pracę.

Na początek znajdźmy potrzebne pliki, otwieramy arkusz main.css, stronę główną index.html(katalog html/) oraz moduł wyszukiwarki search.tpl (katalog html/box).

W pliku głównym systemu shoper (index.tpl) lokalizujemy blok o id=”top” w którym znajdziemy plik logo. Powinno tu wyglądać mniej więcej tak:

<div id=”top”>
<h1><a href=”{$mainUrl}” title=”logo” id=”logo”><img id=”logo” src=”{$skinyDir}/{$smarty.const.CONF_SKIN_DEFAULT}/logo.jpg” alt=”{$page_title|default:$smarty.const.ADM_TITLE}” /></a></h1>
</div>

Następnie z pliku search.tpl l kopiujemy zawartość od <form> aż do </form> (razem ze znacznikami form).

Kolejny krok to wklejenie skopiowanego kodu do pliku index.tpl zaraz po </h1>

co powinno nam dać coś takiego:

<div id=”top”>
<h1><a href=”{$mainUrl}” title=”logo” id=”logo”><img id=”logo” src=”{$skinyDir}/{$smarty.const.CONF_SKIN_DEFAULT}/logo.jpg” alt=”{$page_title|default:$smarty.const.ADM_TITLE}” /></a></h1>

<form class=”search” method=”get” action=”{$link->getIndexLink()}”>
<fieldset>
{literal}
<label for=”inputSearch”><span class=”none”></span>
<input type=”text” id=”inputSearch” class=”input” name=”prod_name” value=”szukaj w sklepie…” onfocus=”if(this.value==this.defaultValue){this.value=”}” onblur=”if(this.value==”){this.value=this.defaultValue;}”/>
</label>
{/literal}
<p class=”buttons”>
<input type=”submit” value=”{$smarty.const.SEARCH}” class=”button” />
<input type=”hidden” value=”ok” name=”search”/>
</p>
<p class=”zaa”>
<a href=”{$link->getFormAdvancedSearchLink()}” title=”{$smarty.const.SEARCH_ADVENCED}” >&raquo; {$smarty.const.SEARCH_ADVENCED}</a>
</p>
</fieldset>
</form>

</div>

Teraz pozostaje nadać tylko kilka właściwości w pliku main.css.

Pierwsze lokalizujemy sekcje odpowiadającą za style bloku „top” czyli:

#top h1 {margin:0;padding:0 0 0 0px;} – w niektórych wersjach oprogramowania możecie się spotkać z znacznikiem h2 zamiast h1 więc trzeba go poprawić.

dopisujemy do niego atrybut „float:left” oraz usuwamy parę niepotrzebnych zer by osiągnąć #top h1 {margin:0;padding:0;float:left}.

Następnie lokalizujemy style  wyszukiwarki:

.search {padding:18px 10px 1px 14px} i dopisujemy jej „float:right” oraz ustalamy jej szerokość by otrzymać np .search {padding:18px 10px 1px 14px;float:right;width:25px;}.

Teraz wystarczy wyłączyć moduł wyszukiwarki by nie pojawiał się niepotrzebnie w kolumnach z modułami i wszystko powinno hulać.

Posta pisałem „na szybkiego” więc mam nadzieję, że nie wystąpią wam nieprzewidziane problemy. Style wyszukiwarki można swobodnie zmieniać tak jak to przedstawiałem już we wcześniejszych postach.

Jeżeli ktoś napotka problemy to proszę dać znać postaram się pomóc.

Pozdrawiam

Grzegorz Rusin