Printable View
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.
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
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!!!
--------------------------------------------------------------------------------
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
I received this advice on another thread which fixed up my issue
#logoWrapper{background-image:url(../images/header_bg.jpg);background-repeat:repeat-x;background-color:#fff;height:106px;line-height:106px;}
and change it to this:
#logoWrapper{background-image:url(../images/header_bg.jpg);background-repeat:repeat-x;background-color:#fff;height:106px;line-height:106px;width:850px;margin:auto;}
With the logo I think there is a float: left tag in there somewhere which influences the behaviour of the logo.
Tried that, no luck
Hi and thanks for a great template. I have two questions though please.
1.) The header background image is full page size, I want it to be 90% and centered, where and how?
2.) The description of ZJ Silver states multiple product images in a carousel, how do I go about doing this?
Sorry if my questions are stupid, but I'm pretty new to this stuff.
Tnx!
HI.
I think you're having the problem I was. Post 185 should sort things out for you.
I specified 850px as my image size but I'm sure you could change it to 90% instead.
Just installed 1.3.8a and want to try ZJ Black 2 but I can't seem to find any info on installing this into my web host!? But I know it's here some where...can you direct me to the proper url or explain here?
ZJ - ZenCart jQuery Template Pack
Here is the link:
http://www.zen-cart.com/index.php?ma...oducts_id=1033
Do I have to install each template seperate or can I install the complete five pack? Then just pick and choose?
This is all new to me so be gentle ;)
Doug
Installed my new templates folder: zj_black_2 to Public_html, then tried install at: Public_html/includes/templates
zj_black_2 has the following 4 sub directories: templates, modules, languages, extra_configures. First three dir has five diffrent templates...do I need to install just the one I want to use? Funny I spent quite a bit of time and can't find anything that is helping on this install.
thanks for any help on this!
Doug