Full width pages with posts

[gavinblue 0]

I have my blog setup with a front page with summaries of the latest posts, and have another page for one of the categories which is a personal project, I can't seem to be able to setup the project page full width with s title box at the top of the page. Any ideas www.gavinblue.com/blog

[cmunns 16]

For a full width on that page add this code to your custom css code area: ` .category-gratis #sidebar {display:none;} .category-gratis #left-col {width:960px;} ` As far as adding a title that would require adding a conditional statement to the php code, what is your level of programming knowledge?

[gavinblue 0]

Thanks for the response. My level of coding is non-existant. G

[gavinblue 0]

Hi, I tried the code and it works for the page but when I click on the articles to display the full article, it reverts to standard display (non full width) G

[cmunns 16]

That is because we set the CSS to act only on that one page. You could copy those rules we set earlier and replace the .category-gratis with .single, but that will make every single post page full width. (the text inside the post still might have to be extended as well) For your reference see if this video helps: FireBug Tutorial

[gavinblue 0]

Thanks for the firebug link. The posts look good full width. Can the project(gratis) page be a highlight page with category posts below? Thanks G

[cmunns 16]

At the beginning of your _posts.php file you can add

 <?php if (in_category('gratis')) : ?>
	 require(PRO.'/template_highlight.php');
	 <?php endif; ?>

[gavinblue 0]

Will this work with iBlogPro 4?

[sproject 0]

Well I have problem with iBlog2 width of main content and sidebar. I want to make width of sidebar exactly 210 px and width of content the rest of place. (I modifified theme to autowidth for different resolution, so this is done). I had tried this code, but it didn't work. I use Firebug, but I don't see anything important to change, so I need your help.

#page #wrapper #container #left-col {
		width: auto;
		float: left;
		margin-right: 250px;
	}
	
	#sidebar {
		margin-top: 15px;
		padding-bottom: 10px;
		float: right;
		width: 210px;
		color: #666666;
		line-height: 150%;
		position: relative;
	}

[cmunns 16]

@gavin - if it worked in iblogpro3, yes @sproject - can you provide a link?

[gavinblue 0]

I get a text at the top of my page " require(PRO.'/template_highlight.php'); " And the blog posts don't go full width G

[sproject 0]

@cmunns, sure. http://www.blogoapple.pl/ That's it. I hope that you can help me.

[cmunns 16]

@sproject: you can set the sidebar position to absolute instead of relative then add "right:0px;" also, in order to work you'll have to erase the inline styling on the sidebar that says position:relative. @gavinblue: Can you show me what that portion of code, there is a tag missing somewhere?

[gavinblue 0]

Have a look at http://gavinblue.com/blog/ Thanks G

[cmunns 16]

I can't tell unless I see the actual template file. Can you show me the actual code?

[sproject 0]

I did what you said, but it doesn't work properly. Now it looks better, than before, but still wrong. After I put the code, I have something like that:

	#page #wrapper #container #left-col {
			width: auto;
			float: left;
			margin-right: 230px;
		}
	
	#sidebar {
		margin-top: 15px;
		padding-bottom: 10px;
		float: right;
		width: 210px;
		color: #666666;
		line-height: 150%;
		position: absolute;
		right: 0px;
	}
	
	#wrapper {width: 95%;margin: 0px auto;/*position: relative;*/}

In last copied line I removed commented property like you said. Any idea what to do now?

[cmunns 16]

It should work, it looks like you have some inline styling attached that is overwriting the position rule. Check the html/php for any inline styling of the sidebar div. Probably in sidebar.php

[sproject 0]

I tried to find inline in *.css;*.php and it's result: style.css (2 hits) Line 730: .piped li { float: left; display: inline; } Line 755: .fix{display:inline-block;} Removing first one, second one or both display: inline(-block) didn't help me.

[cmunns 16]

You need to look in the actual sidebar.php for the styling, but if you can't find it then change your sidebar position to include the important tag like this ` #sidebar{ position:absolute !important; `

[maherie 0]

Not to jump on the band wagon. But I need advice on this too. I'm trying to move the sidebar from the blog page on my website, to below into the bottom right footer box. I'd just like a full width minimalistic look to display photos. http://paulmaher.com.au/blog-2/ Any help would be great.

[cmunns 16]

It's not possible to display a widget inside of a widget, but you could replace the bottom three footer areas with the widgets you currently have in the sidebar and then get rid of it altogether?

[maherie 0]

That would work, maybe put the sidebar in a whole row above the bottom footers as I need the bottom footer boxes displayed. So the question remains, how do I do it?

[cmunns 16]

Add this to your custom css code area in the theme admin ` #sidebar { clear:left; float:none; width:960px; } ` If you only want this to happen on your blog pages then add .blog to the front like this ` .blog #sidebar { clear:left; float:none; width:960px; } `

[maherie 0]

Okay, perfect. But the page width of the posts page is not the 100% width I'm aiming for. Again thanks for the help.

[maherie 0]

I thought about what I posted and realised, css is the only play to determine the layout width, and bam! there is was. Ignore the above post and thanks for the help.