Saturday, December 8, 2012

Header stuff

I've been goofing around a bit with 1.5.2, setting up a new store where I will sell handicraft that I make.

I wasn't all too happy with the header so I made some changes, this is the header taken from the PS demo page
And this is my header


I'm not too good at logo designing so I just took a picture of wood grain and cut out a slice for a banner, and added the text with paint.net, I may have made some changes to the image, I don't remember.

The cart and possibly the search box either didn't show up clearly or was too distinct (again, I don't remember) so I added opacity, and made the text black in the CSS

filter:alpha(opacity=60);

-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;


color:black;
I also used opacity on the active language's flag (as opposed to the behaviour in 1.4 where the inactive language's flag(s) have opacity.)

To make the flags appear side by side, I changed modules/blocklanguages/blocklanguages.tpl
Basically, I removed the ul and li tags, this is my code after the change

<div id="languages_block_top_mod">

<div id="countries">
{foreach from=$languages key=k item=language name="languages"}
{if $language.iso_code != $lang_iso}
{assign var=indice_lang value=$language.id_lang}
{if isset($lang_rewrite_urls.$indice_lang)}
<a href="{$lang_rewrite_urls.$indice_lang|escape:htmlall}" title="{$language.name}">
{else}
<a href="{$link->getLanguageLink($language.id_lang)|escape:htmlall}" title="{$language.name}">
{/if}
{/if}
<img {if $language.iso_code == $lang_iso}class="opacity"{/if} src="{$img_lang_dir}{$language.id_lang}.jpg" alt="{$language.iso_code}" width="16" height="11" />
{if $language.iso_code != $lang_iso}
</a>
{/if}
{/foreach}
</div>
</div>


Then, for currencies, I changed modules/blockcurrencies/blockcurrencies.tpl
I removed

<form id="setCurrency" action="{$request_uri}" method="post">

<p>
<input type="hidden" name="id_currency" id="id_currency" value=""/>
<input type="hidden" name="SubmitCurrency" value="" />
{l s='Currency' mod='blockcurrencies'} : {$blockcurrencies_sign}
</p>
<ul id="first-currencies" class="currencies_ul">


and the closing form tag and the li tags.
This is how the code looks now

<div id="currencies_block_top"><b>

{foreach from=$currencies key=k item=f_currency}
{if $cookie->id_currency == $f_currency.id_currency}
<div id="selected">
{$f_currency.sign}
{else}
<div id="unselected">
<a href="javascript:setCurrency({$f_currency.id_currency});" title="{$f_currency.name}">{$f_currency.sign}</a>
{/if}
</div>










In the CSS, I changed #selected to

#selected {

background:white;
color:black;
filter:alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;

Then I moved around the blocks a bit with CSS, but no magic in that. :-)
Not too much explaining, just some pasted code... Sorry about that, I'll try to remember more exactly what I change in the future...

No comments:

Post a Comment