[SandieParticipant]

Hi,

I am trying to add an image as the background for the bottom footer, but without any luck. I checked earlier forums threads and tried putting this code below in CSS Customizer. But then it turned all white.

/* for footer */
.x-colophon.bottom {
background:url(footer_sandra_mildon.png) top center no-repeat;
}

I have uploaded the image (footer_sandra_mildon.png) to the Media Library. Can you please have a look at it and see what went wrong?

I have attached the image I want to use as a background. I have also attached a picture of how I want the footer to look like eventually.

Thanks!

Best Regards
/Sandra

[ChristianModerator]

Hey Sandra,

Please use the full URL in the CSS and not the filename and extension only.

Thanks.

[SandieParticipant]

Hi,

Thanks, that worked great. But unfortunately the Bottom Footer Menu, Bottom Footer Social, and the Bottom Footer Content disappeared.

What can I do to get the background image placed on the back (behind) of the stuff that disappeared?

http://sandramildon.com

Thanks!

Best Regards
/Sandra

[FriechModerator]

Hi Sandra,

No it did not disappear, its just blended with your background-image. You can add this on your custom CSS to change its color.

.x-colophon.bottom .x-colophon-content,
.x-colophon.bottom .x-social-global a {
	color: chocolate;
}

Hope it helps, Cheers!

[SandieParticipant]

Hi,

Thank you, that helped a bit.

1. As of now when I make the screen smaller only parts of my logo name is visable. How can I make the full footer to be visable all the time on all devices? I have attached a picture showing what I mean named “Footer Not fully visable.jpg”.

2. I would like the Social Icons, the footer Menu, and the Footer Content to be similar as to the attached picture “Footer – how to.jpg”

3. On big screens the sides of the footer turns to white. I have attached a picture showing it, named “Footer – white on the sides.jpg”. Please tell me how to get it all in the same background color.

My site is: sandramildon.com
And you can find the footer I want it to look like on site: kriscarr.com

Thanks!

Best Regards
/Sandra

[LelyModerator]

Hello Sandra,

1.) The image is too large for footer on mobile display or smaller screen. We can add this custom CSS instead:
@media (max-width: 979px){

.x-colophon.bottom {
    background-size: contain;
}
.x-colophon.bottom .x-colophon-content {
    margin: 50px 0 0px;
}
}

2.) To make footer social icons bigger, please use this custom CSS:

.x-colophon.bottom .x-social-global a {
    font-size: 38px;
}

Please assign footer menu first. Also add this:

.x-colophon.bottom .x-nav {
    float: right;
    clear: both;
}

3.) Update this:

.x-colophon.bottom {
    background: url(http://www.sandramildon.com/wp-content/uploads/2016/09/Footer_Sandra_Mildon.png) top center no-repeat;
}

To this:

.x-colophon.bottom {
    background: url(http://www.sandramildon.com/wp-content/uploads/2016/09/Footer_Sandra_Mildon.png) top center no-repeat;
    background-color: #f0f1f1;
}

Hope this helps.

[SandieParticipant]

HI,

That helped a lot, thanks.

I still need some more work done. I have attached an image showing what I need help with.

Thanks!

Best Regards
/Sandra

[LelyModerator]

Hi Sandra,

1.) & 3.)Move the social buttons to top.
Copy the file wp-footer.php from wp-content\themes\x\framework\views\ethos to the same folder on your child theme here: wp-content\themes\x-child\framework\views\ethos.

Check this part of the code:

         <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

Update that part to this:

        <?php if ( x_get_option( 'x_footer_social_display' ) == '1' ) : ?>
          <?php x_social_global(); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_menu_display' ) == '1' ) : ?>
          <?php x_get_view( 'global', '_nav', 'footer' ); ?>
        <?php endif; ?>

        <?php if ( x_get_option( 'x_footer_content_display' ) == '1' ) : ?>
          <div class="x-colophon-content">
            <?php echo do_shortcode( x_get_option( 'x_footer_content' ) ); ?>
          </div>
        <?php endif; ?>

2.) Add this:

.x-colophon.bottom .x-nav li:after {
    content: "|";
    color: red; /*Update to your preferred color*/
    font-size: 20px;
}
.x-colophon.bottom .x-nav {
    float: right;
    clear: both;
}

Hope this helps.

[SandieParticipant]

Hi,

Thank you!

It looks great.

But I can’t seem to be able to “place” the “Footer Content” to the right. I got this in CSS:

.x-colophon-content {
float: right;

}

But it’s still not in position underneath the footer social and menu.

Please advise.

Thanks!

Best Regards
/Sandra

[Paul RModerator]

Hi Sandra,

You can try this code instead.

.x-colophon.bottom .x-container.max.width {
     position: relative;
}

.x-colophon.bottom .x-colophon-content {
     position: absolute;
     right: 0;
}

Hope that helps.

[Author]

Posts