Abbiamo Supremo Support Thread

[PeazzAndycresswell]

You should be able to upload the new header file. From what I see you have not made too many changes to the layout of the header and you might just need to update the new CSS to match the colors on links and stuff.

1) save all old files
2) upload tpl_header.php
3) copy the following part of the stylesheet.css and put it in your stylesheet.

#header-wrapper {width: 100%;}

#header-left {float: left; width: 33%; padding-top: 5px;}

#header-middle {float: left; width: 40%;}

#header-right {float: left; width: 27%; padding-top: 10px;}


#header-search {height: 55px; text-align: center;}

#header-tagline {padding-top: 10px;}

#tagline-one {float: left; width: 50%; color:#9dc236; font-size: .8em; text-align : center;}

#tagline-two {float: left; width: 50%; color:#0072bc; font-size: .8em; text-align : center;}
 
#header-right-nav {text-align: right; width: 100%;}

#header-right-nav ul {margin: 0;}

#header-right-nav li {display: inline; padding: 0 5px 0 5px; border-right: solid 1px #000;}

#header-right-nav li.last {border-right: none;}

#header-right-cart {padding-top: 10px;}

#header-right-cart-right {float: right; background: #D8E8F3; width: 180px; height: 42px; text-align: center; font-size: 13px; padding-top: 5px;}

#header-right-cart-left {float: right; width: 67px; height: 47px; background-image: url(../images/cart.png);}

#header-right-social {float: right; margin-top: 10px; width: 220px; height: 10px;}

4) Change this to match the colors on your site.
5) upload the cart.png image to your images folder

The drop down menu should not need to be changed, if you want the drop down contact you can just copy the contact part that has the table built in for styling.

Make sure you back up your old files just in case you made changes on them and need to reference them, or go back to them

thanks mate :) i had to change the padding on the search and also on my menu bar as i had mine modded but its working now thanks mate! css/html isnt that hard really!

ive had a look and cant manage to find the file, unless i do it all through define_main_page.php, but if i wanted to rearrange my index.php make the small box on right a lil smaller make the slide show a lil slimmer and get a new/blog on the front how would i do this? from what i see its all the define pages?

thanks mate :)

[phanmale]

I have released a much needed update for the template to completely reformat the header. Its pending with Zen Cart but you can download the new template HERE till its released

Changes
* Rewrote the header to fix all the formatting issues
* Changed the drop down contact form in a table to line up the forms better
* Adjusted some CSS for IE compatibility

If you are upgrading the only files I changed was tpl_header.php, tpl_search_header and tpl_drop_down.php

added some CSS code for the header as well in the stylesheet.css

Yikes!!

First of all, I'd like to say what a brill template, was just getting my site ready to go live and then I changed the files as mentioned above (no other changes) and my header went to a block on the left!

What do I need to do to get it to how it was originally laid out please? (gone back to old tpl_header for the time being)..

[phanmale]

Yikes!!

First of all, I'd like to say what a brill template, was just getting my site ready to go live and then I changed the files as mentioned above (no other changes) and my header went to a block on the left!

What do I need to do to get it to how it was originally laid out please? (gone back to old tpl_header for the time being)..

erm... scrap that, I don't know what I did, but reuploaded the file and it seems to be ok again now, bar the search box is a bit wide and covers my taglines?

[brandonturpin]

erm... scrap that, I don't know what I did, but reuploaded the file and it seems to be ok again now, bar the search box is a bit wide and covers my taglines?

You can edit the side of the search bar in includes/templates/abbiamo_supremo/sideboxes/tpl_search_header.php

The bottom section has the style which includes the width.

[phanmale]

Sorry Brandon, I meant the search box height was wrong I think?

I managed to move it up slightly, but now the search button to its right is misaligned I'll take another look tomorrow :)

[phanmale]

I'm still not quite sure "why", but in the stylesheet I have changed #header-search {height: 55px; text-align: center; to 70px and in tpl_search_header.php I have put back the edit from the old to the new, ie:

$content .= zen_draw_input_field('keyword', '', 'size="8" maxlength="30" padding-top: -10px; style="width: 200px; border-radius: 3px; padding: 8px; font-size:13px;" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"').zen_image_submit(BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON,'class="input" style="position:relative;left: 0px; top: 25px"');}

and it *seems* to be ok in IE, Chrome and Firefox.
Perhaps you could explain what I have done to make the significant change? (it looks right to me, anyhow!)

[brandonturpin]

I'm still not quite sure "why", but in the stylesheet I have changed #header-search {height: 55px; text-align: center; to 70px and in tpl_search_header.php I have put back the edit from the old to the new, ie:

$content .= zen_draw_input_field('keyword', '', 'size="8" maxlength="30" padding-top: -10px; style="width: 200px; border-radius: 3px; padding: 8px; font-size:13px;" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"').zen_image_submit(BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON,'class="input" style="position:relative;left: 0px; top: 25px"');}

and it *seems* to be ok in IE, Chrome and Firefox.
Perhaps you could explain what I have done to make the significant change? (it looks right to me, anyhow!)

On the updated version #header-search {height: 55px; text-align: center;} is there in cause someone removes the header search it does not push everything up.

There are 2 parts that effect the position and padding of the header search that were updated, On the bottom of tpl_search_header.php

    $content .= zen_draw_input_field('keyword', '', 'size="8" maxlength="30"; style="width: 200px; border-radius: 3px; padding: 8px; font-size:13px;" value="' . HEADER_SEARCH_DEFAULT_TEXT . '" onfocus="if (this.value == \'' . HEADER_SEARCH_DEFAULT_TEXT . '\') this.value = \'\';" onblur="if (this.value == \'\') this.value = \'' . HEADER_SEARCH_DEFAULT_TEXT . '\';"').zen_image_submit(BUTTON_IMAGE_SEARCH,HEADER_SEARCH_BUTTON,'class="input" style="position:relative;left: 10px; top: 15px"');}

The part that effects the placement of the search bar is

style="width: 200px; border-radius: 3px; padding: 8px; font-size:13px;"

padding makes the space around the words larger and makes the box smaller or bigger
width is the width
font size is the size of the text

At the very end the part that says

'class="input" style="position:relative;left: 10px; top: 15px"'

is the position of the button. On the stock it lines it up perfectly but the top: 15px is how far from the top it is. so if you need it higher you will lower this number, higher will make the button scoot down further.

The Left: 10px is the position how close to the search bar. If you want less space between the 2 you decrees the number, increasing will give it more space.

Also on the stylesheet I changed what used to be

FORM, SELECT, INPUT {
	display: inline;
	padding: 5px;
	margin: 0.1em;
	margin: 7px 0; 
        border-radius: 3px;      
	}

to

FORM, SELECT, INPUT {
	display: inline;
	}

the old code gives it additional margin that will push it down and to the right.

that might be what you still have left that is making it not align

[mydogisfat]

Hi Brandon!
Thank you for the new changes to the header and css files. My site is looking fine now (although I did make the changes that phanmale stated above with the changing the header to 70 px for the search box to lay out correctly on my site) and after some tweaks I will offer this to my client to go live.

I do want to tell you that my blinders were on and I did not view the site with the compatibility view in IE thus I was fighting a losing battle. Now that I have compatibility view on, all is well! I guess I should put a banner on the front page instructing people to view in 'compatibility view' if the layout looks incorrect.

Love your work and also the attention to give to all of us! Thanks!

[mydogisfat]

Hi Brandon!
Thank you for the new changes to the header and css files. My site is looking fine now (although I did make the changes that phanmale stated above with the changing the header to 70 px for the search box to lay out correctly on my site) and after some tweaks I will offer this to my client to go live.

I do want to tell you that my blinders were on and I did not view the site with the compatibility view in IE thus I was fighting a losing battle. Now that I have compatibility view on, all is well! I guess I should put a banner on the front page instructing people to view in 'compatibility view' if the layout looks incorrect.

Love your work and also the attention to give to all of us! Thanks!

Where is my coffee??? It appears I turned OFF the compatibility mode to view correctly. Need to make a Starbucks run...

[phanmale]

That's very helpful, thank you soooo much in taking the time to explain, it's very much appreciated