ZJ Silver Support Thread

[vertisol]

Ok, now I'm relatively new to Zen-cart but have been playing with it for most of the weekend. I have settled on the ZJ_Silver template but can't find a way to set the silver bar with the yourlogo.com image to the width of the rest of the website. It runs the entire width of the screen.

http://www.pretapawte.com.au/store

I'm imagining it's a setting in the .css somewhere.

Any help appreciated.

Tony

[JimmyJazz]

Ok, now I'm relatively new to Zen-cart but have been playing with it for most of the weekend. I have settled on the ZJ_Silver template but can't find a way to set the silver bar with the yourlogo.com image to the width of the rest of the website. It runs the entire width of the screen.

http://www.pretapawte.com.au/store

I'm imagining it's a setting in the .css somewhere.

Any help appreciated.

Tony

Actually, I'm seeing your logo rendered at the correct width of 800 pixels, but left-justified, whilst the remainder of your page is nicely centered. In your CSS, you have:

#logo { float: left; }

set. Kill that, and it should snap back into place.

-JimmyJazz

[JimmyJazz]

Oops. I initially wrote that your #logo needed its float:left; turned off, but I see now that I was incorrect. Your entire #logoWrapper is behaving as though it has float:left; enabled, though I don't see that explicitly set or inherited. I do see what appears to be a typo in your css where you've set the background image for your #logoWrapper. The IE developer tool is showing this under #logoWrapper:

background-image : url(../images/header_bg.jpg); TEXT-ALIGN: center

I'm not sure why the TEXT-ALIGN bit is in there. Are you missing a semi-colon or something?

-JimmyJazz

[vertisol]

Thanks for having a look. I threw in the TEXT-ALIGN last night in a last ditch effort to bring it back to the centre.

I'm going crazy trying to work it out. It appears that most other people using this template seem to have worked it out.

I'll have to have another play with it tonight.

[JimmyJazz]

Now that you've got it returned to default appearance, it's pretty obvious. The #mainWrapper and the #mainWrapperLower above and below the #logoWrapper both have an explicit width of 850 pixels. The #logoWrapper itself has no width set, and is therefore free to expand the full width of the page. In your stylesheet.css, give #logoWrapper a width of 850px, and edit your Pretapawte logo image from 800px wide to 850px, and you're good to go.

Incidentally, the 850 is kind of an odd number these days. Browser stats like they have at w3schools indicate that you can pretty much forego 800x600 users, as they now make up ~4% of visitors. The smallest screen you need to cater to now is 1024x768. Factoring for browser chrome leaves you with 978px or so, depending on the browser. Most folks are using a 960px width since it so nicely divides up into columns & such. As long as you're at an early stage of development, I'd probably go for that. Looking through my own css, the zj_black_2 template just uses percentages & ems for all the widths, which is safer yet. Apparently Mr. Dwyer learned such things as he progressed through the pack.

Oh, also -- I see that on that same CSS line:

#logoWrapper { background-image: url( blahblahblah); LINE-HEIGHT: 106px

you seem to have the same kind missing brace or something, such that the IE developer tool can't correctly parse it.

-jj

[vegascoug]

Is there a way to center the logo? I can't seem to figure that out, I can see the align tag for the TAGLINE but can't figure out how to center the logo.

Ideally I would like to have the logo.gif centered with the TAGLINE centered below it, any ideas/help???

Thanks!!!

[vegascoug]

--------------------------------------------------------------------------------

Not the best CSS guy out there, trying to figure out how to customize the ZenCart jQuery Silver template so my logo is CENTERED and the TAGLINE is centered below it.

http://blueberrysilver.com/store/

This is the tpl_header.php:

<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>

This is the CSS:

#mainWrapper{background-color:#fff;text-align:left;width:95%;vertical-align:top;border-top:1px solid #9a9a9a;border-left:1px solid #9a9a9a;border-right:1px solid #9a9a9a;}
#mainWrapperlower{background-color:#fff;text-align:left;width:95%;vertical-align:top;border-bottom:1px solid #9a9a9a;border-left:1px solid #9a9a9a;border-right:1px solid #9a9a9a;padding-top:10px;margin:auto;}
#headerWrapper,#contentMainWrapper,#logoWrapper,#cartBoxListWrapper,#ezPageBoxLi st,#cartBoxListWrapper ul,#ezPageBoxList ul,#mainWrapper,#popupAdditionalImage,#popupImage{margin:0;padding:0;}
#logoWrapper{background-image:url(../images/header_bg.jpg);background-repeat:repeat-x;background-color:#fff;height:106px;line-height:106px;}
#logo{line-height:106px;}
#navColumnOneWrapper,#navColumnTwoWrapper,#mainWrapper{margin:auto;}
#navColumnOneWrapper,#navColumnTwoWrapper{margin-top:1em;}
#navColumnOneWrapper{border-top:1px solid #9a9a9a;border-right:1px solid #9a9a9a;border-bottom:1px solid #9a9a9a;}
#navColumnTwoWrapper{border-top:1px solid #9a9a9a;border-left:1px solid #9a9a9a;border-bottom:1px solid #9a9a9a;}
#tagline{color:#000;font-size:2em;text-align:center;vertical-align:middle;}

I just want to center the image and then bump the tagline down centered below it.

Any suggestions/help would be greatly appreciated as always. I can't get the stupid thing to CENTER!

Mike