I am looking for some advice as to how best I should handle this issue I have.
The current site I am building has 3 page templates to it, General Page, Blog and Gallery page.
I have used a basic body class as
body {
font-family: garamond;
margin: 0 auto;
width: 960px;
}
With the aim to vertically center the content, which works fine for blog and general pages. But my Gallery page, which works off the wp-gallery code needs to inject float: left; images into the full width of the site, greater than 960px which obviously conflicts with the existing body class.
How best do I create the custom css for the gallery page to operate differently from the other templates?
I have tried adding the margin: 0 auto; to the footer/header/section but doesnt work for some reason? only the body accepts the margin hack.
You should rather add a main page container and do the adjustments there, it is better practice doing it this way.
remember that margin:0 auto only actually works when it and it’s parent have a set width, otherwise it doesn’t always know what the central point is!
The container sounds like a good idea, in terms of loading it, it would start in the header and finish in the footer? so both these elements and the main content would appear in it. But this doesnt solve my problem of the custom page template having no width at all (but still having a centered header/footer)
body {
font-family: garamond;
margin: 0 auto;
width: 960px;
}
A couple of things here: rather than put a width and margins on the <body> element, create a wrapping div and place those styles on that. This will save you a lot of problems with some browsers.
Also, always specify fallback fonts for those who don’t have the desired font. If nothing else, at least have
font-family: garamond, serif;
As for the photo issu, if the pics will be too big for the container, maybe consider using a different kind of gallery, such as slimbox2. These galleries show the image over the top of the page, so it doesn’t matter what the width of the image is.