Zen Cart Logo
Forums / Basic Configuration / main page font size

main page font size

Locked

Views: 3,894

Results 1 to 13 of 13
This thread is locked. New replies are disabled.
8 Aug 2008, 10:09 PM
#1
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

main page font size

Hi, hope you can help....
I'm new to this and have been struggling by myself to get a website up and running.

I would like to change the font size of the text on my main page to a larger font and can't remember how I did it....i've had some time off recently.

The text is written in define_pages_editor and linked to an ez-page. not sure if this is the right way to do it but it seems to work.

the url is https://www.snow-kit.com/shop

9 Aug 2008, 11:53 AM
#2
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: main page font size

If you want to increase the size of all the fonts, you can change the font-size in the body element in your stylesheet

If you just want to change the font in the center column, find .centerColumn in your stylesheet and change the font-size part.

You may have to separate it from the other elements, if you don't want other changes.

If you search the stylesheet for 'font-size' you'll see all the places it's set now.

9 Aug 2008, 1:50 PM
#3
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

Re: main page font size

Stevesh, many thanks. I have made the changes and now most of the pages are ok but my contact page seems to exceed the width of the page on the right hand side of the centerColumn and the text seems to be a different size to the main pages.

Any idea how I can control this?

https://www.snow-kit.com/shop

9 Aug 2008, 3:15 PM
#4
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: main page font size

Not sure about the different font size, but you can make the text box smaller here in your stylesheet:

TEXTAREA {
/
float: left;*/
margin: auto;
display: block;
width: 664px;
}
*

9 Aug 2008, 3:22 PM
#5
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

Re: main page font size

Yes, I've already tried that but it doesn't seem to control the contact us page. The text is written in define_pages but all I have written here is our URL.

Is the width of that page driven by the width of the comment field? if it is, can I change this somewhere?

http://snow-kit.com/shop/index.php?main_page=contact_us

9 Aug 2008, 3:27 PM
#6
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

Re: main page font size

Bingo, I've just tried it again and it worked.... I must have not updated the css properly.

Just one issue left - where do I reduce the text size in these forms?

9 Aug 2008, 4:26 PM
#7
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: main page font size

Look for 'label' in the stylesheet - double check, as it may change other stuff you don't want changed.

9 Aug 2008, 10:06 PM
#8
jenn8five avatar

jenn8five

New Zenner

Join Date:
Aug 2008
Posts:
54
Plugin Contributions:
0

Re: main page font size

i just added an "about us" page thru one of the FAQ contributions. however, text is not showing up. do i need to turn that on somewhere or something? where can i find this information?

10 Aug 2008, 10:19 AM
#9
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

Re: main page font size

stevesh, many thanks for the tip but I still can't seem to find a label that controls this. it seems that various elements seem to pick up this font size i.e. the tables in contact us and discount coupons and also the "filter results by" text in the all products section. Any other ideas?

10 Aug 2008, 1:16 PM
#10
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: main page font size

OK, try adding a font-size part to:

LABEL.inputLabel {
width: 11em;
float: left;
}

That will take care of the 'Full Name' and 'Email Address' parts, anyway.

Switching to 'teach a man to fish' mode, if you have or can install Firefox, and then the Web Developer plug-in, if you hit Ctrl - Shift -Y, when you put your mouse pointer over an element you'll see the class or id for that element in the box at the top of the browser. Clicking will open the appropriate section of the stylesheet. Incredibly handy tool.

Also, while I'm here, I don't know if your partnership program is available to schools in the US, but the word 'scheme' has a pretty much totally negative connotation here.

10 Aug 2008, 3:40 PM
#11
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

Re: main page font size

ok, thanks for that. I have managed to change the "name" and "email address" font size. I have also downloaded the developers plug-in which is really useful - thanks.

Obviously I don't understand how the stylesheet works. Its confusing as some elements seem to have the same controls but when you make a change different things seem to happen e.g. using the developers plug-in I have identified the controls for the "snow-kit.com" and telephone number on the Contact Us page. When you make these changes the font size in the .sideBoxContent changes as well. This seems to be controlled by:

h4, h5, h6, label, h4.optionName, legend, address, .sideBoxContent, .larger (line 51)
{
font-size: 1.3em;
}

but why are they different sizes even though the stylesheet calls 1.3em?

10 Aug 2008, 4:32 PM
#12
stevesh avatar

stevesh

Black Belt

Join Date:
Feb 2005
Location:
Lansing, Michigan USA
Posts:
19,793
Plugin Contributions:
2

Re: main page font size

Using the em for font size rather than,say, pt causes the font you're setting to be a percentage of the font size of the parent element.

So, the font size of the parent element (body, for example) is considered 1em, and if you set a font relative to that to 1.3em, it'll be 30% bigger.

It's done so websites scale properly in different browsers, screen resolution, etc.

There are some really good, and understandable, CSS tutorials on the Web. Knowing a little about it makes it a lot easier to template Zencart.

h4, h5, h6, label, h4.optionName, legend, address, .sideBoxContent, .larger (line 51)
{
font-size: 1.3em;
}

Most importantly, you can split these types of elements, so that legend, for example would be on its own. So,

**h4, h5, h6, label, h4.optionName, address, .sideBoxContent, .larger (line 51)
{
font-size: 1.3em;
}

legend {
font-size:1.Xem;
}**

That might fix what you're dealing with.

11 Aug 2008, 9:36 PM
#13
snow_man avatar

snow_man

New Zenner

Join Date:
Apr 2008
Posts:
33
Plugin Contributions:
0

Re: main page font size

Excellent Stevesh - that seems to have solved some of it - I'll work through all the issues in the same way.

Many thanks