Help with layout please.

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.

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. :P 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. :lookaroun 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! :D

Rob

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. :P 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. :lookaroun 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! :D

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

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

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

"storerevolution.com/images/screen.gif"

Any help would be appreciated.

Thanks

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?

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/index.php?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="%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

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?

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

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.

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

:D

Hi peggy,
Looks like some good help here. I went ahead and checked your site, LOOKS GREAT.

4cws.com:

Hi peggy,
Looks like some good help here. I went ahead and checked your site, LOOKS GREAT.
Thanks!!!:D

gjh42:

Add to your stylesheet

.centerBoxContentsNew a {color: #112233;}

.

I have another question for you if I may?

I have noticed that the links in the main content throughout the whole of my site are all pale.

Is there some code I can add to the stylesheet to fix all the pages or do I have to track them all down and add the above code to each page id or class?

I am confused as to why the links are not uniform on each page?
Thanks

You can style generic links on your site; near the top of the stylesheet there will be a declaration like

a:link {
...
...
}

This sets the standard, and then various subtypes can have modifications to that.

gjh42:

You can style generic links on your site; near the top of the stylesheet there will be a declaration like

a:link {
...
...
}

This sets the standard, and then various subtypes can have modifications to that.
But I don't want to do that as that will change the links that are white in my menu's which I want to keep white!

I want the links on the dark backgrounds light/white and the links on the light backgrounds dark/brown and I have no idea how to achieve this?

You are going to have to set one basic link style and then an alternate style for the other variety. Whichever is more common probably should be the basic.
The sidebox links may be a bit simpler to specify as different from the basic style.

gjh42:

You are going to have to set one basic link style and then an alternate style for the other variety. Whichever is more common probably should be the basic.
The sidebox links may be a bit simpler to specify as different from the basic style.
Yes I kinda thought that was the obvious solution. Thing is I dont know ow do do that as I am new to CSS and anything I have tried hasn't worked. Do you think you could help me out an tell me how to go about it? As in, "what code goes where"?

Start off with the basic link colors:```
a:link, #navEZPagesTOC ul li a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

a:visited {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #fbce50;
}

a:active {
color: #0000FF;
}

#ffffff is white, #000000 is black, #ff0000 is red, #00ff00 is green and #0000ff is blue.

Search through your stylesheet for 
color:
and you will find all places where text color is defined. Many of them you will not want to change, but check out any you are not sure of and see what they control.
Some elements that are now the default white will not be specified in the stylesheet, so you will need to add them. Find things like ```
.sideBoxContent a {
	background-color: #c69c42;
	padding: 0.4em;
	}
```and add
color: #ffffff;
if you want to make sure they are white.
(Or try .leftBoxContent a and .rightBoxContent a.)

After each change, go back and see what is different in your site.

gjh42:

Start off with the basic link colors:```
a:link, #navEZPagesTOC ul li a {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

a:visited {
color: #ffffff;
text-decoration: underline;
font-weight: bold;
}

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #fbce50;
}

a:active {
color: #0000FF;
}

> #ffffff is white, #000000 is black, #ff0000 is red, #00ff00 is green and #0000ff is blue.
> 
> Search through your stylesheet for 
> color:
> and you will find all places where text color is defined. Many of them you will not want to change, but check out any you are not sure of and see what they control.
> Some elements that are now the default white will not be specified in the stylesheet, so you will need to add them. Find things like ```
.sideBoxContent a {
	background-color: #c69c42;
	padding: 0.4em;
	}
```and add
> color: #ffffff;
> if you want to make sure they are white.
> (Or try .leftBoxContent a and .rightBoxContent a.)
> 
> After each change, go back and see what is different in your site.

Well I don't understand what you mean. I already know how to change the colours of the text... it is the LINKS I am talking about and that css styling for the links you quoted control the whole page right??? Which is fine for where the links which are white are on a dark background but the MIDDLE content is on a light background and ALL the links links are affected so you cant see the light links on the light background!!
Am I making myself any clearer?

The top set of declarations controls the basic link colors; the other elements I mentioned are for specific groups of links. Any declaration which has an "a" in the selector refers to a link, or to a sub-element inside a link.

So

.leftBoxContent a {color: #008822;}

makes link text in left box contents dark green, and

.leftBoxContent a:hover {color: #55ff55;}

makes link text in left box contents light green when hovering the mouse over it. Search through the color definitions and find the places where link colors are set, and change them if necessary.