Full Width Footer Background Color

Resolved beaulife
(@beaulife)

12 years ago

Hi,

I would like to have a full width footer background with color exactly like your featured theme example http://www.svenskatakgruppen.se/.

I had copied the CSS codes below into styles.css of http://goo.gl/r5ZLLx but not working.

.footer-wrap {
background-color: #003768;
color: #fff;
line-height: 1.2;
}

Would you mind share with us on the CSS amendment to make this?

Thank you.

Viewing 4 replies - 1 through 4 (of 4 total)

Theme Author

(@fruitfulcode)

beaulife,

It’s not possible via theme options. If you want receive full-width footer, you need to edit theme source file footer.php

Replace it on this part of code

<?php
/**
 * The template for displaying the footer.
 *
 * Contains the closing of the id=main div and all content after
 *
 * @package WordPress
 * @subpackage Fruitful theme
 * @since Fruitful theme 1.0
 */
?>
		</div>
		</div><!-- #main .site-main -->
		<div id="footer-wrapper">
				<footer id="colophon" class="site-footer" role="contentinfo">
					<div class="site-info">
						<?php fruitful_get_footer_text(); ?>
					</div><!-- .site-info -->
					<?php if (!fruitful_is_social_header()) {
							   fruitful_get_socials_icon();
						  }
					?>
				</footer><!-- #colophon .site-footer -->
			</div>

			<div id="back-top">
				<a rel="nofollow" href="#top" title="Back to top">&uarr;</a>
			</div>
		<!--WordPress Development by Fruitful Code-->
<?php wp_footer(); ?>
</body>
</html>

Add this lines to css

#footer-wrapper {
background: lightgray;
height: 100px;
width: 100%;
}

.site-footer {
width: 960px;
margin: 0 auto;
float: none;
}

emilyhein727

(@emilyhein727)

12 years ago

I would like to do the same thing, however I do not fully understand the solution above. What do you mean by “you need to edit theme source file footer.php… Replace it on this part of code”

Thank you!