WordPress.org

Forums

Fruitful
[resolved] Full Width Footer Background Color (5 posts)

  1. beaulife
    Member
    Posted 1 year 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.

  2. Fruitful Code
    Member
    Theme Author

    Posted 12 months ago #

    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;
    }
  3. emilyhein727
    Member
    Posted 12 months 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!

  4. Buffalo66
    Member
    Posted 10 months ago #

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

    http://farklemount.com

  5. Buffalo66
    Member
    Posted 10 months ago #

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

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.