full width background in iblogpro footer/morefoot area

[aeverse 0]

I've got a background in my Morefoot area that needs to extend the full width of the window (as I've been able to do in the header area with other elements). I just can't figure out how to get it to extend. (Well, I could get it to extend to the right if I made the Morefoot div a specific width, but then that caused scroll bars... obviously not what I want.) I've tried this so far to no avail:

	#footer-bg .background{
	background-image: url(../images/fbox-bg.png), url(../images/morefoot-bg-fullwidth.png) repeat-x left top;
	display:block;
	}
	#morefoot {
	margin-top: 3px;
	padding-top:15px;
	}
	#morefoot .background{
	background-image: url(../images/morefoot-bg-fullwidth.png) repeat-x left bottom;
	height: 428px;
	display:block;
	}
	

Here is the site under development

[kgstew 2]

Hi Amanda, The footer section is contained inside of the wrapper div which mean it will not be able to go to full width while still inside the wrapper. In order to get a full width image in the footer you will need to edit the footer in the page template to be outside of the wrapper div. You will need to edit the footer.php file to more the footer section outside of the wrapper div. Cheers, -Kyle

[aeverse 0]

Hi Kyle, Thanks for explaining that. Would it break anything if I moved morefoot outside the wrapper div? The gradient background is actually in back of that... Amanda

[aeverse 0]

Ok.. so I've moved all of the footer elements below the wrapper div and nothing seems to have broken... but my css for the full width gradient doesn't render...

</div>
	<!--/wrapper -->
	<?php get_template_part ('library/_morefoot'); ?>
	<div  id="footer">
		<div class="effect">
			<div class="content">
				<?php if(pagelines('twitfooter') && pagelines('twittername') && VPRO):?>
					<div id="footer_topline"><?php get_template_part ('library/_twittermessages'); ?></div>
				<?php endif;?>
	            <div id="fcolumns_container" class="fix">
					<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Columns') ) : ?>
						<div class="fcol">
							<div class="fcol_pad">
								<?php if(pagelines('footer_logo') && VPRO):?>
									/" title="<?php _e('Home',TDOMAIN);?>">
										" alt="<?php bloginfo('name');?>" />
									
								<?php else:?>
									<h3 class="footer-site-title">/" title="<?php _e('Home',TDOMAIN);?>"><?php bloginfo('name');?></h3>
								<?php endif;?>
							</div>
						</div>
					<?php endif; ?>
				<div class="clear"></div>
			</div>
		</div>
	</div>
		<div class="clear"></div>
		<?php if(pagelines('no_credit') || !VDEV):?>
			<div id="cred" class="pagelines">
			</div>
	        </div>
		<?php endif;?>
	 	<hr class="hidden" />
	  </div></div><!--/page -->
	<!-- Footer Scripts Go Here -->
	<?php if (pagelines('footerscripts')) echo pagelines('footerscripts');?>
	<!-- End Footer scripts -->
	<?php wp_footer(); ?>
	</body>
	</html>[/code]

[Kate 3]

Hey Amanda, No, it shouldn't "break" anything. Let us know if you have any more questions about the process.

[aeverse 0]

Well... it didn't break, but it isn't rendering the full width gradient background... something must be wrong with the my css. Can you look at my first post in this thread and give me any insight? Thanks! Amanda

[Guest Guest]

I took a look at the iBlog CSS and it doesn't look like footer-bg is defined anywhere. All I see in theme.css pertaining to the footer is #footer, #footer .content #fcolumns_container and .fcol and .fcol_pad. Perhaps #footer or #footer .content is what you're looking for instead of #footer-bg?

[cmunns 16]

You need to use a different design framework to get the CSS selectors you need. Try the Full-width Framework

[aeverse 0]

Unless I'm missing something, iBlogPro's admin panel doesn't offer choices regarding the framework....

[cmunns 16]

Oh sorry about that. Well what you can do is assign a background to the #page selector and use position: bottom center so it sticks to the bottom of the page. Just make sure that the color on both the body and #page selectors is transparent. Make sense?