Abbiamo Supremo Support Thread

brandonturpin:

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 :)

brandonturpin:

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! :shocking:

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).. :dontgetit

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! :shocking:

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).. :dontgetit

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?

phanmale:

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.

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 :)

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!) :unsure:

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!) :unsure:

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

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...

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

SPH:

Well, testing templates seems to be what I'm best at. I've looked at probably all free templates and tested many.

Thanks. As for the captcha, I see there are several choices. Don't even know if mine is the best, but it has been working and the "pic" isn't too hard for customers to read. It's also been updated for 1.5, which I suppose is good news for it. Yes, anyone using this captcha apparently will have to also have it working with the header Contact Us. It sent me to the regular Contact Us page with an error warning that the validation code was not entered properly.

sph

was there ever a solution to this? Im becoming brain dead... :(

Ok, I'm learning! :smartalec: (I think!)

Couldn't understand why my drop down links weren't headed for the right places when I edited the names..

Eventually worked out that there are some errors in the coding that don't tally with each other, hence the links were looking for something that wasn't there?

In tpl_drop_down.php, this link was calling for URL12

DROP_DOWN;?></a><!-- Begin 2 columns Item -->
when the DROP_DOWN was calling for URL1. Changed that, worked!

So... I then worked out the same thing worked for DROP_DOWN_CATEGORY_ONE in which it was calling URLs 13,14,15,16 and 17 yet header.php yells URLs 2, 3, 4, 5 and 6. I changed these to marry up and yayy!! my links are working!! (even if they only go to the home page while I'm adding stock!) :D

hey mate,

when you edited my footer we turned off ez pages right? im editing the footer and changing it around to be more compact atm, and ive noticed when linking my site map, that the site map is not showing my ez pages any idea why this is matE?

PeazzAndycresswell:

hey mate,

when you edited my footer we turned off ez pages right? im editing the footer and changing it around to be more compact atm, and ive noticed when linking my site map, that the site map is not showing my ez pages any idea why this is matE?

We removed the EZ pages all together. The only way to add more to the footer is manually add it in the code.

thats ok mate ive dont want them back in the footer, just in my site map :)

PeazzAndycresswell:

thats ok mate ive dont want them back in the footer, just in my site map :)

Looks like you've completely changed templates, to one of the 12leaves pure templates? Anyway, for a novice you're really doing good work and coming along fast.

I ran your site through the validator and you are receiving errors:

http://validator.w3.org/

Some errors, especially the social stuff - facebook like, google+ - cannot be corrected, insofar as I've tried. But other errors should be cleaned-up if you can.

Especially note that you are apparently still carrying some footer social code from Abbiamo template. You should probably take out all code that your site isn't using.

You can also validate your css:

http://jigsaw.w3.org/css-validator/

Also, keep an eye on your page speed/performance, as I understand google is now giving weight to that as page speed affects customer experience and satisfaction, although your page speed is pretty good.

http://gtmetrix.com/reports/www.consolecodeslab.com/FPRvi2hR

Ok be sure to check your messages as I found the issue that was causing all the issues on your site.

Thanks!
Brandon Turpin

mydogisfat:

My site is ready to go except for my messing with something in the stylesheet that changed the look in IE. Brandon is so kind to take a look see and find where the explorer issues are located in my file. Everything looks so darn great in Chrome, Firefox, etc that I don't really want to chance any more changes without his expert opinion!

Thanks, Andy, for your suggestions though!

www.gefw.co (please view in chrome or firefox or on your ipad!)
Paula

SPH:

Looks like you've completely changed templates, to one of the 12leaves pure templates? Anyway, for a novice you're really doing good work and coming along fast.

I ran your site through the validator and you are receiving errors:

http://validator.w3.org/

Some errors, especially the social stuff - facebook like, google+ - cannot be corrected, insofar as I've tried. But other errors should be cleaned-up if you can.

Especially note that you are apparently still carrying some footer social code from Abbiamo template. You should probably take out all code that your site isn't using.

You can also validate your css:

http://jigsaw.w3.org/css-validator/

Also, keep an eye on your page speed/performance, as I understand google is now giving weight to that as page speed affects customer experience and satisfaction, although your page speed is pretty good.

http://gtmetrix.com/reports/www.consolecodeslab.com/FPRvi2hR

My next step before releasing any other templates is to clean the ones that I have, I started the process when I fixed a lot of the Abbiamo Supremo template. Then was going to fix the validation errors but had quite a few projects come up this week and those always come over the free templates. But I am hopeing to have fix all the small things on all the templates and validation errors this week. Thanks for letting me know, they might be free but I want to make them as strong as possible!

Submitted another update for the template

cleaned up the code and css
validated the code and removed all fixable errors (facebook widget is the only code that gives a validation error)

Should be updated soon - Available today on my site - Other templates to receive updates this week as well

Hello,

I was wondering if there was a way to make the thumbnails next to the products in the listings larger - where might I go to find out where this takes place? I notice that I can right click and view image on the thumbnails, and the image itself is still large, so I'm hoping there's a dynamic resizing going on that I can change the values in so that they're a bit bigger. They're just not showing the detail we need as it stands.