Hello I would like to center my theme I customized my theme but I just cant get it exactly in the middle where I want it any help would be appreciated thank you.
my site is
http://thexinfo.com
can you elaborate / show requirements with an image ...
well I really new to this but what I did was change the theme from 960px thing to 98% width so it was wider but ever seance then its been slightly to the right and not centered I mean its not off by much but I would like to fix it.
Your #container width is set to 98%. But let's suppose it was 100%. This means the width of the container would stretch to the full extent of your monitor - you wouldn't even see the background. The problem here is the paddings and margins that are applied to the body and container. These extend the width of the page - which was already 100%, the maximum - creating the illusion of the container being pushed to the right side.
In your case, 98% stretches to 98% of the monitor's width and you see part of the background. That alone should work fine. However, with the extra paddings and stuff, the page stretches a little bit further and doesn't centre properly. To fix it use any value below 98%.
in your theme's global.css, you can remove padding for #container AND use margin: 0 auto for it ..
omg thank you so much I got it to the way that I wanted it right in the center thank you two very much
(2011-12-26, 12:26 PM)ranjani Wrote: [ -> ]in your theme's global.css, you can remove padding for #container AND use margin: 0 auto for it ..
Bad advice. Removing the padding will make the #content div touch the edges and it looks bad. Adding
margin: 0 auto; will zero out the existent top and bottom margins which thexinfo might have wanted to keep.
I stand by the solution I provided. And while I'm at it I might as well fix up the CSS a bit. My solution works, but the theme's CSS is still pretty poor. I would recommend replacing the body element and the #container div with:
body {
background: #3d3d3d url(images/dark-pattern-033.gif);
color: #51a1b3;
font-family: Verdana, Arial, Sans-Serif;
font-size: 15px;
line-height: 1.4;
text-align: center;
margin: 40px auto;
}
#container {
background: #4D4D4D;
color: #6f797d;
font-family: Copperplate / Copperplate Gothic Light, sans-serif;
border: 1px solid #262626;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
border-radius: 10px 10px 10px 10px;
text-shadow: 1x #3a3a3a;
width: 90%;
padding: 20px;
text-align: left;
margin: 20px auto;
}
This will fix the issue, the code is much nicer and it makes more sense. I set the container width to 90%, but feel free to use whatever you want. Personally, I think it looks fine.