/*your custom style goes in this file*/
/*if you're overriding style blocks from genstyle.css, you only need to include the attributes you're overriding, not the whole block*/
/* indexpage defined to replace bgcolor="#FFFFFF" sytle="text-align:left" "border="0" cellspacing="0" cellpadding="0" in index.php */
.indexpage {
background-color : #666666;
margin-top: 0px;
text-align:left; /* added to replace style="text-align:left" in 6.2.0 */
border: 0px;
border-collapse: collapse;
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 790px; /* total width of all the columns */
}
/* footer added to replace footer fonts and links */
.footer {
font-size: 12px;
color: #000000;
background-color : #FFFFFF;
}
a.footer:link {color: #333399;}
a.footer:visited {color: #333399;}
a.footer:hover {
color: #339999;
}
/* menuback: left nav menu background color with no right and bottom border */
.menuback {
background-color: #990000;
border-right: 0px;
border-bottom: 0px;
width: 170px;
margin-left: 10px;
vertical-align: top;
}
/*First attempt to customise ... loaded Template3 ... but does not appear as at the Demo site, which i was referred to in making the selection.
Mine is all pushed over to the LH side of my wide screen ... I did some research and added
body {
background-color : #FAF4E6;
text-align : center;
margin : auto;
}
to mytngstyle.css ... and the Home page is centered ... but NOT the rest of the pages.??? Well some of the text is but it centers the text as in a Wordprocessor ... centre justified if u like.
So what i would like to see is that the entire LAYOUT is centered on my wide screen .... as if i had a std width screen .... because everything shoved over to the left really does detract from a professional look*/
/*Answer - In the markup, we’ll need a container to hold everything. In this container will sit the entire layout that we’d like to center on the page. We’ll suspiciously name this container: “container”:
...entire layout goes here...
*/
/*Using CSS, the following two rules force whatever is contained within #container to be centered:*/
body {
background-color : #FAF4E6;
text-align: center;
margin : auto;
}
#container {
margin: 0 auto;
width: xxxpx;
}
/*We’re aligning everything within body to be centered, while giving the #container a specific width (whatever you’d like). The margin: 0 auto; is the second piece which makes it all work. We’re specifying 0 pixels on top and bottom, with auto margins on the left and right.
That’s it. The only problem we’ll run into now is that, because we haven’t specfied otherwise, everything on the page will be centered. We’ll want to override that from the container level down with the addition of the following rule:*/
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}
/*With that single declaration, everything within #container will be left-aligned, yet leaving our centered layout unhindered. The same principle could be applied not only in centering entire layouts, but other block-level elements and page components.*/