Docs

[xoa]

Hello there,

I used this method to put my custom image in the social icon section.

.x-colophon.bottom .x-social-global a.pinterest {
  content: url(http://www.soelvahof.com/wp-content/uploads/2017/02/roterhahn_small.gif);
}

The problems I have is, how to center the image vertically and how to change the mouse-hover text?

[Lely]

Hi There,

Please use this custom CSS instead:

.x-colophon.bottom .x-social-global a.pinterest i {
    position: relative;
}
.x-colophon.bottom .x-social-global a.pinterest i:before {
    content: ' ';
    width: 17px !important;
    height: 17px !important;
    background: url(http://www.soelvahof.com/wp-content/uploads/2017/02/roterhahn_small.gif) center no-repeat;
    position: absolute;
    top: -17px;
    left: -10px;
    border-radius: 4px;
}

To change the hover title, please add the following code on Appearance > Customize > Custom > Edit Global JS:

(function($){
$('.pinterest').attr('title','new title');
  
})(jQuery);

Replace new title accordingly.

Hope this helps.

[xoa]

Thank you!
Now by changing some parameters I got the right position, bu still have the transparent square with the hover effect at the wrong position.

The code I use:

.x-colophon.bottom .x-social-global a.pinterest i {
    position: relative;
}
.x-colophon.bottom .x-social-global a.pinterest i:before {
    content: ' ';
    width: 154px !important;
    height: 154px !important;
    background: url(http://www.soelvahof.com/wp-content/uploads/2017/02/roterhahn_small.gif) center no-repeat;
    position: absolute;
    top: -30px;
    left: -50px;
    border-radius: 4px;
}

Or you think there is a easier way to put custom logos (kind of partners) into the colophon section?

[Christopher]

Hi there,

Please update your code to :

.x-colophon.bottom .x-social-global a.pinterest i:before {

    content: url(http://www.soelvahof.com/wp-content/uploads/2017/02/roterhahn_small.gif);

    border-radius: 4px;
}

footer .x-social-global {
    width: 14%;
    clear: both;
    display: block;
    text-align: center !important;
    margin: 0 auto !important;
    overflow: hidden;
}
.x-colophon.bottom .x-social-global a {

    float: left;
}

Hope it helps.

[xoa]

Thank you Christopher!
But still not happy with it. The distance between both blocks is too little, plus as soon as the layout gets a bit smaller, one box snaps under the other, even if there would be way enough space.

Where to put the jQuery code to change the hover Title? In the Customizer it won’t work.

[Paul R]

Hi,

To fix the icons, you can add this under Custom > Edit Global CSS in the Customizer.

body footer.x-colophon.bottom .x-social-global a {
    margin: 0 10px;
    float:none;
    display:inline-block;
    vertical-align:top;
}

body footer.x-colophon.bottom .x-social-global {
    width: 100%;
    text-align:center;
}

You need to add the jquery code in Custom > Edit Global Javascript in the customizer

(function($){
$('footer.x-colophon.bottom .x-social-global a.pinterest').attr('title','new title');
  
})(jQuery);

Hope that helps

[Author]

Posts