Increase centerbox width

14 Dec 2010, 09:42

#1

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Increase centerbox width

Sorry, posted with digital stop and received no responce

I want to increase the centerbox width, it seems to be too small, truncated or aligned left.

www.americanpridefasteners.com

Thank you

14 Dec 2010, 11:40

#2

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: Increase centerbox width

It looks like you've turned off the left sidebox column, so the center content moves to the left.

Try adding this to your stylesheet:

#navColumnCenter {margin-left:7em;}

14 Dec 2010, 11:59

#3

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Increase centerbox width

I want to increase the centerbox width, it seems to be too small, truncated or aligned left

Or you can increase its' width in your stylesheet.css file

Find and adjust as desired

#mainWrapper {
	background-color: #ffffff;
	margin:0 auto;
	width: 960px;
	}

14 Dec 2010, 12:57

#4

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

Thank you, I have tried both these methods, the first made no change, the second adjusts the with of the template.
I need the CENTERBOX width changed.

14 Dec 2010, 13:22

#5

stevesh

Black Belt

Join Date:: Feb 2005
Posts:: 19,793
Plugin Contributions:: 2

Re: Increase centerbox width

My suggestion works fine for me on your site in Web Developer when I add it to the bottom of stylesheet.css.

14 Dec 2010, 15:25

#6

kobra

Black Belt

Join Date:: Aug 2005
Posts:: 31,500
Plugin Contributions:: 4

Re: Increase centerbox width

the second adjusts the with of the template.
I need the CENTERBOX width changed.

There is no direct setting for the "center box"

This is contained within the mainwrapper div and is the result what it is set to minus the left & or right column width

So if you increase the mainwrapper width the center benefits from the additional px and becomes wider

14 Dec 2010, 16:09

#7

picaflor_azul

Totally Zenned

Join Date:: Jul 2009
Posts:: 6,940
Plugin Contributions:: 24

Re: Increase centerbox width

You can add:

#navColumnCenter{width:80%;margin-left:15px;}

to the bottom of your stylesheet.css.

Also, your background looks strange. I would recommend taking out the :

 no-repeat  top left #000

from the body selector.

Thanks,

Anne

15 Dec 2010, 00:34

#8

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

Thank you!

15 Dec 2010, 00:57

#9

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

Gonna ask a stupid question, I cant get an image behind the text in the centerbox. As a back ground.

Any thoughts?

15 Dec 2010, 01:18

#10

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Increase centerbox width

What element are you applying the background-image to in your stylesheet?

15 Dec 2010, 09:25

#11

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

Sorry I dont understand your question.

15 Dec 2010, 09:47

#12

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Increase centerbox width

You want an image to be a background. How exactly are you trying to make that happen? It shouldn't be difficult at all, just one line in the stylesheet.

15 Dec 2010, 10:04

#13

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

center_bg.jpg

I should just reference this then put image in images folder?

15 Dec 2010, 16:09

#14

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Increase centerbox width

Yes, in very general terms. You didn't say exactly what you tried. Be sure to put template images like this in /includes/templates/your_template/images/.

Use it like
.xxxx {
background-image: url(../images/center_bg.jpg);
}

15 Dec 2010, 19:50

#15

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

I have it ready, where on the css page do I put it and what do I call the .xxxx?

.xxxx {
background-image: url(../images/center_bg.jpg);
}

Thanks for all your help

15 Dec 2010, 19:57

#16

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Increase centerbox width

That depends on the element you want the background for.

It's usually safe to put added style rules at the bottom of your stylesheet. They may also work correctly when put near or integrated with existing related rules.

You might try
#indexCategoriesMainContent {}

15 Dec 2010, 20:17

#17

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

I am placing it on the template css page yes?

#indexCategoriesMainContent {background-image: url(../images/center_bg.jpg);
}

15 Dec 2010, 20:17

#18

pageblair

Zen Follower

Join Date:: Feb 2010
Posts:: 223
Plugin Contributions:: 0

Re: Increase centerbox width

This does not work at the bottom of the page

15 Dec 2010, 20:39

#19

gjh42

Black Belt

Join Date:: Jul 2005
Posts:: 21,876
Plugin Contributions:: 6

Re: Increase centerbox width

You have a stray } near the bottom of your stylesheet. CSS is picky about errors, and will ignore anything after such a thing.

#indexCategoriesMainContent {background-image: url(../images/center_bg.jpg);
}
#navColumnCenter{width:80%;margin-left:15px;}
}

.xxxx {
background-image: url(../images/center_bg.jpg);
}

The new rule in the location shown works on your site. Remove the red }.