Help with layout please.

[peggy]

I wonder if anyone can show me how to get rid of the header which has now been pushed underneath because of the size of my image. I was just going to delete the whole line Define header etc but I wasn't sure if it would screw up the code?

I would also like to get rid of the colored bar at the top or at least reduce the size of it and add some text.

I also need to scrunch everything "up" so the background doesn't show between the various elements.

I am ok with html but css and php are new to me.

I am trying to get this "www.storerevolution .com / cart" to resemble this "storerevolution.com" can anyone help?

Sorry if there are too many questions but I thought it would be ok because they were all about the layout of the page?

Thanks in advance.

[rstevenson]

Hi Peggy,

Now let's see... where to start...

It's always a good idea to use a standards compliant browser as your development browser, even if you wish to use IE as your regular browser. Firefox is often the recommended one, since then I can recommend the Firebug plug-in and others that will make your development work much easier.

Using FF and FB you can easily identify what elements in the rendered page of your site are giving you problems, and can see what classes or ids to adjust in the stylesheet.

Yes, you will have to learn about CSS at least, though you can get by without any PHP knowledge. I do. Google up some links with "CSS tutorial" or get a good basic book. Play around with it in an HTML test page first to get the feel of it, then start working on your Zen site. Pay particular attention to margins, paddings and widths -- they will be very useful in working on your Zen template.

Which reminds me, see the tutorials/FAQ link at the top of these pages and pay close attention to the Template Customization/Building Overrides section.

I had a look at your links and I can say with confidence that you can do what you want. But I see the image at the top is not the same. So start by cutting and stretching the image so it's the size you want. Then you'll be able to put it into your Zen site and 'shrink' the header around it. That will get you started. The rest will follow fairly easily, though not entirely painlessly.

By the way, I checked out your Totally Shameless link too and I've applied to join the forum. But I noticed that your links on the right side of the home page disappear when I hover over them. In other words, the hover style in your stylesheet is applying the same colour on hover as the background colour. That's your first CSS project! Get to it!

Rob

[peggy]

Hi Peggy,

Now let's see... where to start...

It's always a good idea to use a standards compliant browser as your development browser, even if you wish to use IE as your regular browser. Firefox is often the recommended one, since then I can recommend the Firebug plug-in and others that will make your development work much easier.

Using FF and FB you can easily identify what elements in the rendered page of your site are giving you problems, and can see what classes or ids to adjust in the stylesheet.

Yes, you will have to learn about CSS at least, though you can get by without any PHP knowledge. I do. Google up some links with "CSS tutorial" or get a good basic book. Play around with it in an HTML test page first to get the feel of it, then start working on your Zen site. Pay particular attention to margins, paddings and widths -- they will be very useful in working on your Zen template.

Which reminds me, see the tutorials/FAQ link at the top of these pages and pay close attention to the Template Customization/Building Overrides section.

I had a look at your links and I can say with confidence that you can do what you want. But I see the image at the top is not the same. So start by cutting and stretching the image so it's the size you want. Then you'll be able to put it into your Zen site and 'shrink' the header around it. That will get you started. The rest will follow fairly easily, though not entirely painlessly.

By the way, I checked out your Totally Shameless link too and I've applied to join the forum. But I noticed that your links on the right side of the home page disappear when I hover over them. In other words, the hover style in your stylesheet is applying the same colour on hover as the background colour. That's your first CSS project! Get to it!

Rob

Hi Rob
Yes I have used firefox for a couple of years now and I also have the web developer plugin , I have played with it but I use htmlkit to edit in. I like it because I can see the changes without "saving".
I started learning css a couple of weeks ago and have built 3 or 4 pages with tutorials that is how I was able to add some css to the website i built "storerevolution .com but I know from a professional standpoint that it is shaky as I am just learning. However it has given me enough of an understanding about the concept of css even though I don't know what all the codes do!

I am not sure what you mean about the image at the top? Do you mean they are not the same as each other on the two sites? That is because I changes it and I think I like the zencart one better but i reserve the right to change my mind....lol

Not sure what you mean by this "Then you'll be able to put it into your Zen site and 'shrink' the header around it."

Thanks for joining the forum. The guy who was helping everyone with zencart has left. Maybe you can fill his shoes????....lol

[lastpirate007]

hi peggy

i can help u. but i cant understand ur problem. can u explain wat u want 2 change. give me ur problem 1,2,3..... like wise

[peggy]

hi peggy

i can help u. but i cant understand ur problem. can u explain wat u want 2 change. give me ur problem 1,2,3..... like wise

"storerevolution.com/images/screen.gif"

Any help would be appreciated.

Thanks

[gjh42]

It looks like you did delete the define statement for HEADER_SALES_TEXT. That doesn't work. You need to restore it. If you want no text there, copy this line, with just two single quotes in the second part as shown:

define ('HEADER_SALES_TEXT', '');


"reduce the size of this block..."
"change these links to Home and Login..."
This is the header navbar function at the top, and the categories-tabs menu at the bottom. You can move the navbar from the top to below the logo. Edit /includes/templates/your_template/common/tpl_header.php, and find the section beginning with <!--bof navigation display--> and ending with <!--eof navigation display-->. Move it to just below <!--eof branding display-->.
Turn off the categories-tabs menu in admin > Configuration > Layout Settings.

"...and add some text."
You may want to move the tagline section to above the logo, and define it, similar to the descriptions above.

"...close the gap."
This is not an element, it is just a margin above the categories sidebox. Edit your stylesheet. Find .leftBoxContainer and edit or add "margin-top: 0;" to get

.leftBoxContainer {margin-top: 0;}

"remove this link..."
Configuration > Layout Settings > Customer Greeting - Show on Index Page

There is not an easy way to put the login link in the shopping cart sidebox, but there is a mod for a login sidebox. You will already have a login link just above it, though - do you need another?

[lastpirate007]

3. How do I change the "Sales Message Goes Here" or "Tagline Here" text?
To change the “Sales Message Goes Here” or “Tagline Here” text to say what you want open the includes/languages/english/header.php file in your text editor. Find the following line of code:

define('HEADER_SALES_TEXT', 'Tagline Here');
By default the text “Sales Message Goes Here” is located in includes/languages/english/classic/header.php
define('HEADER_SALES_TEXT', 'Sales Message Goes Here');

refer: https://www.zen-cart.com/tutorials/i...hp?article=127
-------------------------------------------------------------------------
How do I change the Welcome Guest Message?

if you want to replace this message with one of your own, start your text editor and open the includes/languages/ENGLISH/index.php file and locate these lines of code
if (STORE_STATUS == '0') {
define('TEXT_GREETING_GUEST', 'Welcome <span class="greetUser">Guest!</span> Would you like to <a href="&#37;s">log yourself in</a>?');
} else {
define('TEXT_GREETING_GUEST', 'Welcome, please enjoy our online showcase.');
}
define('TEXT_GREETING_PERSONAL', 'Hello <span class="greetUser">%s</span>!');

or admin>layoutsetting>customer greeting =0

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

[peggy]

It looks like you did delete the define statement for HEADER_SALES_TEXT. That doesn't work. You need to restore it. If you want no text there, copy this line, with just two single quotes in the second part as shown:

define ('HEADER_SALES_TEXT', '');


"reduce the size of this block..."
"change these links to Home and Login..."
This is the header navbar function at the top, and the categories-tabs menu at the bottom. You can move the navbar from the top to below the logo. Edit /includes/templates/your_template/common/tpl_header.php, and find the section beginning with <!--bof navigation display--> and ending with <!--eof navigation display-->. Move it to just below <!--eof branding display-->.
Turn off the categories-tabs menu in admin > Configuration > Layout Settings.

"...and add some text."
You may want to move the tagline section to above the logo, and define it, similar to the descriptions above.

"...close the gap."
This is not an element, it is just a margin above the categories sidebox. Edit your stylesheet. Find .leftBoxContainer and edit or add "margin-top: 0;" to get

.leftBoxContainer {margin-top: 0;}

"remove this link..."
Configuration > Layout Settings > Customer Greeting - Show on Index Page

There is not an easy way to put the login link in the shopping cart sidebox, but there is a mod for a login sidebox. You will already have a login link just above it, though - do you need another?

Thank you so much. I got just about everything I wanted fixed.
There are a couple more thing I would like to do before I feel this page is complete and I hope you don't mind me asking a couple more questions?
I want to change the color of the link under my items in "new products for september and the powered by zencart links as they arent showing up. Any changes I have made in the stylesheet seems to result in some other font changing that I dont want to change or nothing appears to change at all?

Also, I would like to remove or disable the zencart banner at the very bottom of the page.

"storerevolution .com/cart"

Thanks again

[gjh42]

Add to your stylesheet

#siteinfoLegal.legalCopyright a {color: #112233;}

.centerBoxContentsNew a {color: #112233;}

Adjust to taste.

For banners: Configuration > Layout Settings > Banner Display Groups - Header Position 1, etc.

[peggy]

Gosh...thanks so much...
I could kiss ya!!!!!