Wordpress and Webdesign Forum go41 » WordPress Code Snippets

Stupid Sidebar query (Arthemia) please help Joern!

(9 posts) (2 voices)

Tags:

Grrrr, sidebars.

Hi Joern, just stuck at the moment on getting a page to run full width with no sidebar. I've followed the advice that you had about creating forum pages and made a new template like this (ignore the backticks obv!):

<?php
/*
Template Name: pagenosidebar
*/
?>

<?php get_header(); ?>

	<div id="content">
<div id="content" style="width: 900px;">	

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<div class="post" id="post_<?php the_ID(); ?>">

	<span class="breadcrumbs"><a href="<?php echo get_option('home'); ?>/">Home</a> &raquo; <?php the_title(); ?></span>

	<h2 class="title"><?php the_title(); ?></h2>

		<div class="entry clearfloat">
		<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

		<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>
		</div>

	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

	</div>

	<?php endwhile; endif; ?>

	</div>

<?php get_footer(); ?>

This is the result (password is joern) - http://www.iamstaggered.com/shop/personalised-cards

You can see that the iframe is still limited by width - any chance you can tell me how to run it across the whole page, I would be so grateful.

Best wishes,

drwhom.

Posted 2 years ago #

Joern
Moderator

the iframe you load in there is set to width 550:

iframe scrolling="auto" height="800" frameborder="0" width="550"

if you can edit this set to 900px or 100%

the whole thing you load is 640px wide

thanks for asking here in my 'sleeping' forum ;-)

Posted 2 years ago #
drwhom
Member

Legend - that seems to be working well - it's only a very minor issue but do you know what causes the slight bump on the white boxes at the top?

E.G. just under "About" there's a ridge, where it looks like there's another white box behind the wide white box.

Also there's a massive chunk of white space under the iframe - do you know what controls that?

Once again, sir, you are a legend of the support scene! Thank-you.

Posted 2 years ago #
Joern
Moderator

The iframe is set to height=800, it needs only 624px
and set the width not! to 1200, 900px is more than enough and is just the size of anything fitting in your content with 900px

the bump: that's your <div id="content"> set to 590px in style.css

below is again <div id="content" style="width: 900px;"> set to 900px

id=content is only allowed once..

better use for upper one: <div id="content" class="nosidebar">

and in style.css add

#content .nosidebar {
width:900px;
}

and delete the inner id-content div

Posted 2 years ago #

drwhom
Member

Right - nearly there! The only thing is that now the iframe is much wider than the page, which seems to be back to 590px?

This is the code I've got - in pagenosidebar.php

<?php
/*
Template Name: pagenosidebar
*/
?>

<?php get_header(); ?>

	<div id="content" class="nosidebar">	

	<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

	<div class="post" id="post_<?php the_ID(); ?>">

	<span class="breadcrumbs"><a href="<?php echo get_option('home'); ?>/">Home</a> &raquo; <?php the_title(); ?></span>

	<h2 class="title"><?php the_title(); ?></h2>

		<div class="entry clearfloat">
		<?php the_content('<p class="serif">Read the rest of this page &raquo;</p>'); ?>

		<?php wp_link_pages(array('before' => '<p><strong>Pages:</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>

		</div>

	<?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>

	</div>

	<?php endwhile; endif; ?>

	</div>

<?php get_footer(); ?>

And I've updated my style.css so it now has:

/* Content Page*/

#content {
	width:590px;
	background:#fff;
	padding:10px;
	font-size:1.05em;
	line-height:1.75em;
	float:left;
	min-height:400px;
	}

#content .breadcrumbs, #content .breadcrumbs a {
	font-weight:bold;
	color:#333;
	}

#content h2.title {
	font:2.2em Georgia;
	font-weight:bold;
	letter-spacing:-0.05em;
	border-bottom:1px solid #ddd;
	border-top:3px solid #ddd;
	padding:5px 0px;
	}

#content .nosidebar {
width:900px;
}

.post {
	font-size:1.05em;
	line-height:1.75em;
	}

Can you spot what's causing the problem? Thanks as ever for your help!

Posted 2 years ago #

Joern
Moderator

somehow it doesn't take #content .nosidebar

try:
div#content .nosidebar

or

#content div.nosidebar

Posted 2 years ago #
drwhom
Member

Hmmm, nope, neither of those worked. Any other thoughts?

Posted 2 years ago #
Joern
Moderator

you could use a div inside <div id="content"> as before, just not id=content again but now id=contentwide
backdraw: the bump..

or replace <div id="content"> with a new <div id="contentwide"> and style this to the new width
backdraw: you have to style also #content .breadcrumbs, #content .breadcrumbs a and #content h2.title new because the is no content anymore.
That's actually easy, copy the items in style.css starting with #content and add again starting with #contentwide

for the new #contentwide you just change width

Did you see this: http://themes.go41.de/?wptheme=arthemix_dev

I found a timthumb.php beta version working with (some) external images, here flickr and I put in an auto insert of first picture inside the post...

timthumb beta: http://www.binarymoon.co.uk/2009/07/timthumb-beta-test/

Posted 2 years ago #
drwhom
Member

No way - I switched it to
<div id="content" style="width: 900px;">

And it worked a charm - no bump either! Weird!

The dev theme looks good - been considering adding in a slideshow for the front page - that's tomorrow's headache though!

Thanks Joern, once more I salute you!

Posted 2 years ago #

RSS feed for this topic

Jump to Latest Reply

Reply

You must log in to post.