Support » Theme: Fruitful » Full Width Footer Background Color

  • Resolved beaulife

    (@beaulife)


    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 Fruitful Code

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

    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!

    I used your markup and need the footer text to be centered on the page and on one line. Can you please help?

    Home

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

    .site-footer {
    width: 960px;
    margin: 40px;
    float: none;
    text-align: center;
    }

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Full Width Footer Background Color’ is closed to new replies.