Define Main Page Problems

[becky80]

I am having problems with my define main page. My website is http://www.eaglemountainsupplies.com

I can't seem to figure out how to get the text to look less squished together. It seems to be all running together on the main home page of the site. If anyone can point me in the right direction. I would really appreciate it.

Thank you
Becky

[niccol]

In your stylesheet.css file for your template find the following block of code:

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, LEGEND, ADDRESS, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 3px;
}

The margins that are set for h1, h2, h3, h4, h5, h6 do not work too well for h1 and h2.

You can change all of this but a quick fix might be to add a line-height:1em; to the h1 and h2 rules:

h1 {
	font-size: 1.5em;
        line-height:1em;
	}

h2 {
	font-size: 1.4em;
        line-height:1em;
	}

[becky80]

In your stylesheet.css file for your template find the following block of code:

h1 {
	font-size: 1.5em;
	}

h2 {
	font-size: 1.4em;
	}

h3 {
	font-size: 1.3em;
	}

h4, h5, h6, LABEL, LEGEND, ADDRESS, .larger{
	font-size: 1.1em;
	}

.biggerText {
	font-size: 1.2em;
	}

h1, h2, h3, h4, h5, h6 {
    margin: 0.3em 3px;
}

The margins that are set for h1, h2, h3, h4, h5, h6 do not work too well for h1 and h2.

You can change all of this but a quick fix might be to add a line-height:1em; to the h1 and h2 rules:

h1 {
	font-size: 1.5em;
        line-height:1em;
	}

h2 {
	font-size: 1.4em;
        line-height:1em;
	}

Okay I tried this and I added some more wording and now it just doesn't look good at all. I don't know what I am doing wrong. I changed the font type to arial and it still is aweful. Any other suggestions?

[niccol]

OK.

This is what i think you have in your define pages editor:

<h1><font size="4" face="arial,helvetica,sans-serif">Welcome to Eagle Mountain Supplies, Your Outdoor Supplies Store. </font></h1><h1><font face="arial,helvetica,sans-serif"><font size="3"></font></font></h1><h1><font face="arial,helvetica,sans-serif"><font size="3">Here you will find quality outdoor goods at decent prices. We have many different items to appeal to the camper, hunter, backpacker and outdoorsman or woman in you. </font> </font></h1><p><font size="4" face="arial,helvetica,sans-serif">We also have information reguarding the MAD DOG BRUSH FIGHTER UNIT. This unit has proven worthy of recognition, due to the ability to knock down fires very quickly and with little effort. </font></p><p /><p><font face="arial,helvetica,sans-serif"></font></p>

You are going about this in the wrong way! Sorry, I don't know how to say that with more subtlety but I do not mean it harshly.

You will find it easier, in general and particularly for zen cart, if you work out how the css file works. The main stylesheet, which is called stylesheet.css, and is in your template, will determine how the text is displayed.

When you add things like the <font> tags there are two problems with this. Firstly, it confuses the issue. Secondly, using <font> tags is depreciated, which means that it is being phased out.

So, all your styling should be done from the stylesheet.css file.


Let's just have a look at the first sentance which reads:

<h1><font size="4" face="arial,helvetica,sans-serif">Welcome to Eagle Mountain Supplies, Your Outdoor Supplies Store. </font></h1>

You want to change that to:

<h1>Welcome to Eagle Mountain Supplies, Your Outdoor Supplies Store. </h1>

Now, we are going to apply the styling for this sentence by editing the rules for <h1> tags in the stylesheet.

So, find your stylesheet.css file. It will be in:

includes/templates/YOURTEMPLATE/stylesheet.css

If you do not have a includes/templates/YOURTEMPLATE folder (the YOURTEMLATE is the name of your own template which I do not know so I am writing YOURTEMPLATE) then we need to explain how to make one for you.

Once you have found that file you are going to edit it. Find the part of the file where it says:

h1 {
	font-size: 1.5em;
	}

You can define exactly how all the h1 tags on your site are going to be displayed.

As an example try :

h1 {

	font-size: 1.5em;
color:red;
font-family:arial,helvetica,sans-serif;
font-weight:bold;
line-height:1.5em;
	}

Once you have edited the file you need to upload the new version to the server.

You can play around with the numbers and font types and see the effects on the page.

Get that far and I'll give you more advice.

Don't worry it will all seem obvious really soon

[niccol]

If you want the quick fix without having to think about all of this add the following to the bottom of your stylesheet:

#indexDefault{line-height:1.8em;}

Screenshot attached.

[becky80]

Thank you so much. I am going to try it right now.

[becky80]

So I was wrong to try to use the define pages editor on zen cart admin panel, right? Anyways, I located the css stylesheet file and did the recommended changes , but I think I and getting messed up when I go to upload it to my server. You will have to forgive me, as this is the very first time i have had to deal with all of this and i am learning as I go.

[becky80]

So I was wrong to try to use the define pages editor on zen cart admin panel, right? Anyways, I located the css stylesheet file and did the recommended changes , but I think I and getting messed up when I go to upload it to my server. You will have to forgive me, as this is the very first time i have had to deal with all of this and i am learning as I go.

WOOHOO!! I uploaded the css stylesheet file and by golly it is working better!! Nick, you are a life saver. I really do appreciate you help with this. I just wanted to let you know that!! You see I have a full time job and I also am a wife and mother of 3 and I am currently working without pay until The State of Pennsylvania gets a budget signed. So I am trying to get this website up and running as a source of income.

So Thank You once again for taking the time to explain things to me. Granted it isn't completely the right way, but at least it is a step in the right direction.

Becky

[niccol]

Well done

I've sent you a PM about a few things.