I have a module on the homepage using Zentools2 for which I would sure appreciate some little snippets of CSS code. I also want to change some template padding or spacing I am thinking I am going to have to make these changes in my sites main custom.css file but am interested to know if there is a better way.

The site is at www.Veggievore.com

I am attaching an image which is marked in five places where I would like to make changes:

1) Reduce some height between the logo and the menu bar
2) Reduce some space that is above the Title of the first module
3) Reduce some space that is below the Starch-Smart System Seminars module
4) Increase the Size of the Font for the Title "Controlling Cravings"
5) Increase the font size for the body text.

Hi Sean,

For point one - can you try these lines

#header .zen-spotlight .moduletable {margin-bottom: 0px;}
#logowrap .zen-spotlight {padding-bottom: 0px;}

For point 2

The style applying is

.main-content-inner {padding-top: 40px;}

so its a case of reducing that value as required

For point 3.

#abovecontent .moduletable {
margin-bottom: 60px;
}

is the style you would need to target

It would depend I guess if you wanted to avoid targeting every page or just this page

For point 4.

Do you mean the bolded text as the title?

For point 5.

Are you looking to make a global change to the whole site?
or just the content area?

Cheers
Paul

For point 4.

I am wanting to target the Title text just within this module. Also, I would love to increase the size of the body font in this module as well.

For point 5.

I only want to target this Module. It is the home page.

Although I am considering increasing the font size of all body text on this site from within the template.

Hi Sean,

I don't see a title so I assumed you mean the strong

#zentools-491 strong {}

In the module itself it would be

#zentools-491 p {}

you may want to add this style together with a font size first as this will affect the strong style as well

Hello Paul,

I am seeing something very interesting for point #1 when I put in your code. Now when I do a refresh of the page it loads with no padding below the logo momentarily but then it jumps back to a height of 184 pixels which may actually just be the height of the line between the logo and the header. I would love to reduce that line height still. Here is the code I have in place right now:

For point one - can you try these lines:

#header .zen-spotlight .moduletable {margin-bottom: 0px;}
#logowrap .zen-spotlight {padding-bottom: 0px;}

Do you get better results if adjust the header by adding?

#header blockquote {
margin: 0;
padding: 0;
}

I did get somewhat better results with that new tweak! Thank You very much!

I would also like to decrease the font size for the blockquote just for that module. It is large now because I increased the Base Font Size to 14 in the template. I am really only wanting to reduce the font within that module. The module is ID# 491. It is a Zentools2 module.

I suspect there is some code like #zentools2104 to be added?

I also noticed there is a line I can change to reduce the height of the verticle to the right of the logo that I would like to have in there. :

element.style {
height: 140px;
}

What I am trying to do is make the logo and header not take up a lot of height.

Sean

Paul,

I think I got it pretty close to what I want with the following:

#header blockquote {
margin: 0;
padding: 0;
font-size: 1.2em;
}

Thank you for pointing me in the right direction. Your guidance was a big help. If you have a better idea you can also feel free to share it with me.

I had a feeling that the header took the height of the tallest element but I could be wrong

The css seems ok

Cheers
Paul