Header tagline

[finlander]

On a fresh install of 1.3.9g, with the template widened to 100%, the Header tagline Sales Message Goes Here stays to the rightish on the page. I'm guessing this is because it's being centered between the logo.gif (over on the left) and the right edge of the template? Or is it set to stay put regardless of the width of the template? I looked for a positioning element in the stylesheet and in header.php but didn't see anything.

I would like to modify the tagline, center it on the page, maybe change color, etc. Is this an easy thing to do? No help on these particular issues in Tutorial
https://www.zen-cart.com/tutorials/i...hp?article=127

thank you!

(oh, by the way, the Tutorial for widening the template for version 1.3.x says to change 100% to a pixel value. Shouldn't those instructions be the other way around, i.e., change 750px to 100%?) https://www.zen-cart.com/tutorials/index.php?article=46

[finlander]

Well, I did find tagline attributes on about line 423 in the stylesheet, and it appears that the text is set to wrap (rather than ignore) on the logo that is to the left of it, so center aligning puts the tagline somewhat rightish of page center. Maybe use some non-breaking spaces in front of the text, w/ left-alignment, to get it about center on the page? Or, remove the picture element on the logo that forces text to wrap on it? Pretty minor stuff, I know, but Zen Cart is pretty cool and I'm enjoying getting familiar with the files that make things happen! Thanks again.

[HeyIts007]

Finlander any luck with this yet ? I'm having same problem with centering of the tagline text. i.e. its slightly right of centre at present.

[HeyIts007]

I think the solution might lie in the two files.

header.php
tpl_header.php

I noticed the you can add extra text in the TAGLINE heading entry in header.php and it gradually centres the text in the browser. If you can work out how to pad extra spaces in PHP and add them to the tpl_header.php tagline reference, you might get the tagline to centre. The output possibly to change is;

<div id="tagline"><?php echo HEADER_SALES_TEXT;?> </div>

I think we need to be able to add padded spaces to the end of this text.

I'm still looking into this, but found something interesting here. It talks about how the web browser treats blank space and how you can use a different method to output padded spaces in the browser either in PHP or via css. I'm thinking PHP just for that one line that displays the tagline might be the way.

You best use template overrides though, by copying the default tpl_header.php to your custom template area. i.e. copy

From

/includes/templates/template_default/common/tpl_header.php

To

/includes/templates/mytemplate/common/tpl_header.php

mytemplate is whatever name your template folder is.

Talk about How do you echo a long space

http://bytes.com/topic/php/answers/6...cho-long-space

I have to get some sleep, so I will hand the batton over to you to investigate. I assume you're in Finland, so your day is my night here in Australia. Will discuss tomorrow.

007

[HeyIts007]

I've been experimenting with this;

<div id="tagline"><?php echo HEADER_SALES_TEXT;?> <?php echo '...';?> </div>

At present still blank spaces are truncated by the web browser, so I'm using ... for now.

[HeyIts007]

YAY, I think I've got it working. I Googled: printing &nbsp php

Try this below for your tpl_header.php template override;

<div id="tagline"><?php echo HEADER_SALES_TEXT;?> <?php print "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;";?> </div>

Use as many ;&nbsp as you need to centre your Tagline.

ref; Learning PHP - Part 1: A Gentle Introduction

http://www.communitymx.com/content/a...ge=2&cid=D5084

[HeyIts007]

Oh well, it looks like we have found two solutions. Your's looks a bit more elegant, as it conforms to css standard, without changing the PHP code, but I am at least using the template override method.

Will look at your approach tomorrow. Time to sleep !

[finlander]

Hi 007,

Looks as though are digging into things!

I think you are right that adding padding to the end of the text would accomplish the look that you want, by pushing the visible text to the left, but that may not be the best way to handle it.

The text is currently right of center because it's centering between the logo and the right side of the template, rather than simply centering between the two sides of the template. Adding spaces to the end of the text would force the visible text to the left, but if the tagline is two lines or more, then text wrapping would defeat that method. BTW, though, if you wanted to use this method, wouldn't non-breaking space characters be far easier than coding for it? Just use '&nbsp;' (w/o quotes) and the browsers will respect however many you want to use.

The method that I finally came up with is to left-align the text, which shoves it up next to the right edge of the logo, and then add a padding statement for the logo's right edge to push the text back to the right until it is close to the spot you want.

I am currently using these values in my code. I added in the logo definition in the css just under another piece of existing code that sets floating for the logo.

#tagline {
color: #000000;
font-size: 1.5em;
text-align: left;
vertical-align: middle;
padding-top: .6em;
}


#logo {
padding-right: 2em;
}

And this is what renders:
vintage-adventures.com

good luck w/ things!