[Salman AParticipant]

Hi Guys,

I need a footer Section like this website:
http://www.yassinebentaieb.com

http://awesomescreenshot.com/0ca3k0ps04

I tried using the shortcode to add the pill button but it doesn’t work however the transition effect is not the same either.

Secondly The footer Icons are not looking nice because of dark grey color which stays even after hover. I’d like to use the same icons on the footer as example shown above.

How can I do both of these changes?

[Paul RModerator]

Hi Salman,

To be able to copy the pill button.

Add a unique class to the button
eg. custom-pill

http://screencast.com/t/9F3gxjMoc

Then add the code below in custom > css in the customizer.

.x-btn.x-btn-pill.custom-pill {
     background-color:#224256;
     box-shadow: none;
    border-color: #224256;
    border-style: solid;
    border-width: 2px;
    color:#fff;
}

.x-btn.x-btn-pill.custom-pill:hover {
     box-shadow: none;
     border-color: #224256;
    border-style: solid;
    border-width: 2px;
    background-color:#fff;
    color:#224256;
}

With regards to social icons in the footer, You can create your own icons using an image editor like photoshop.
Then override the default using css code below.

.x-colophon.bottom .x-social-global a i:before {
    content:""; /* remove default icons */
}

/* icon for facebook */
.x-colophon.bottom .x-social-global .facebook i {
    background:url(facebook.png) top left no-repeat;
}

/* icon for twitter */
.x-colophon.bottom .x-social-global .twitter i {
    background:url(twitter.png) top left no-repeat;
}

You may add the other social icons by following the pattern.

Hope that helps.

[Author]

Posts