Page Template - "1 Column" doesn't span entire page
|
I'm attempting to create a "template page" to allow only one column to span the entire page. If you'll notice, my default page has left & right columns.
To create the template, I opened the original template file in Artisteer...changed options for just 1 column...then exported as "(Template Name)-1column. Then added the required template html at the top.
It seems, however, that my 1 column remains the original width, rather than spanning the entire page, as I would wish. Here is the page...
http://arkansasrivervalley.com/events-month-view-new/
Any help would be appreciated! :)
|
| |
Garry
|
In your style sheet find out following styling rule, delete its width property and add clear:left
.art-contentLayout .art-content
{
border:0 none;
float:left;
margin:0;
overflow:hidden;
padding:0;
position:relative;
width:535px;
}
---------------------------
Change it to:
---------------------------
.art-contentLayout .art-content
{
border:0 none;
clear:left;
float:left;
margin:0;
overflow:hidden;
padding:0;
position:relative;
}
|
| |
Randy
|
Yer a gem, Garry! (where do i send the check!) :D
much thanx!
|
| |
Randy
|
oh oh...on my "regular" pages, it dumped my center column down below the sidebars.
|
| |
Bud
|
What you need to do is implement semantic body classes. If you're using WP2.8+ then it's real easy. Just change the body tag in the header.php to this...
<body <?php body_class(); ?>>
Now you can use the CSS above without affecting any other page because it will create a new class based on your page. You'll have to use Firefox with Firebug to examine the code to see what your page class is set to then you can modify your CSS.
My template page for a sitemap template is "sitemap-php" (yours will be different) so my CSS would look like this...
.sitemap-php .art-contentLayout .art-content {
border:0 none; clear:left; float:left; margin:0; overflow:hidden; padding:0; position:relative;
}
Now you CSS will only affect your desired page and leave everything else unaffected.
Just stick the CSS at the end of you style.css file.
Bud
budstechshed.com
|
| |
Randy
|
well, i'm still a little fuzzy about this. here's what i did
opened "header.php" in the wordpress editor & replaced line...
"<body>"
with the line...
"<body <?php body_class(); ?>>"
Then I opened the file "style.php" and added this code at the end...
.page1column-php .art-contentLayout .art-content {
border:0 none; clear:left; float:left; margin:0; overflow:hidden; padding:0; position:relative;
}
my new templage page is "page1column.php"
Do you see what I did wrong?
|
| |
Bud
|
Randy,
page-template-page1column-php is what's actually displayed when I inspect with Firebug, so you want to change what you have to...
.page-template-page1column-php .art-contentLayout .art-content {
border:0 none; clear:left; float:left; margin:0; overflow:hidden; padding:0; position:relative;
}
and see how that works.
Bud
budstechshed.com
|
| |
Bud
|
Forget one thing...
You have to make sure you specify a width so that you can override the default value. So put a width statement in the CSS somewhere that equals the total width that you want the to be, such as width:800px;
Bud
budstechshed.com
|
| |
Randy
|
that did it!
i nearly gave up on this, but it was getting interesting...so i thought i needed the lesson.
i used frontpage for a LONG time...then used dreamweaver a little, until i discovered wordpress. so, i never really used dreamweaver enough to fully learn "css" and "php". i think this tasked has helped me to understand it a bit more.
much thanx!
|
| |
Bud
|
Glad it worked. It's much better to target the CSS to a specific page or even DIV instead of shotgunning it and possible breaking your whole theme.
I don't know why Artisteer doesn't include semantic classes in their program. It's very easy to implement. There are also other mods to increase the CSS control. I've implemented Semantic classes the way they are done in the Sandbox and Thematic frameworks. It's teh only way to maximum control of your CSS without hacking around.
Bud
budstechshed.com
|
| |
Vernon
|
Quote Bud:
Forget one thing...
You have to make sure you specify a width so that you can override the default value. So put a width statement in the CSS somewhere that equals the total width that you want the to be, such as width:800px;
Bud
budstechshed.com
I think I almost have this working, but what width does the 800px mentioned above refer to? You stated "that you want the _____ to be" -- can you clarify the missing word?
Also, where do I define the width?
|
| |
Vernon
|
Well ... I got it to work. My case was slightly different from Randy's. I defined a theme with left & right columns, but I wanted a page template with the left column only.
I changed the float parameter from "left" to "right" and that worked.
Thanks guys!
|
| |
George
|
Hi I did everything asked of the above. Perhaps I may have missed something. It's a two col layout. I want the side bar on the front page but not in the single pages.
I have added this to the header: <body <?php body_class(); ?>>
I have this in this at this at the bottom of the css
.single-php .art-contentLayout .art-content {
border:0 none; clear:left; float:left; margin:0; overflow:hidden; padding:0; position:relative;
}
.page-php .art-contentLayout .art-content {
border:0 none; clear:left; float:left; margin:0; overflow:hidden; padding:0; position:relative;
}
For the two pages. single.php and page.php
My CSS has this in it:
/* begin LayoutCell */
.art-contentLayout .art-content
{
position: relative;
margin: 0;
padding: 0;
border: 0;
clear:left;
float: left;
overflow: hidden;
width: 599px;
}
.art-contentLayout .art-content-wide
{
position: relative;
margin: 0;
padding: 0;
border: 0;
clear: left;
float: right;
overflow: hidden;
width: 998px;
}
I have also used without the wide CSS and it either does it on all pages or it does it doesn't work.
Any help is greatly appreciated.
Thanks in advance,
George
|
| |
George
|
Sorry to be a NUDGE but did anyone have any advice on the above. Please
Thanks!
|
| |