Archived

This topic is now archived and is closed to further replies.

  • 0

Full width pages with posts

Question

Posted · Report post

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

Share this post


Link to post
Share on other sites

25 answers to this question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

Will this work with iBlogPro 4?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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;
	}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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; } `

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

@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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

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

Share this post


Link to post
Share on other sites

Posted · Report post

It works and is really good. ;) But I have two another problems. 1/ Look at http://www.blogoapple.pl/specyfikacje/macbook-air/ There width: auto; for content sucks. What to do if I need more flexible content (without gole between content and sidebar)? 2/ It sucks in really high resolution (like on iMac 27" ;)). I tried to fix it with max-width for content, but sidebar is still at right side of page. How to attach it to right side of div id="nav", not page? Thanks in advance.

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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; `

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites