Church Theme - Top Bar Social Media Buttons / Gallery

Support
#1

Hi Folks,

I want to change the social media buttons in the top bar, it defaults to a sort of shade of the top bar colour for the background of each button, I want to change this to a totally separate colour so how can I do this?

I also want to add another custom button for TripAdvisor, can you point me in the direction of what files I need to edit to do this I am fine with coding PHP etc.

Finally, I want to add a gallery section to the site that will fit with the overall design of the demo, any recommendations of how to do this or are there any extensions or plugins that come bundled with the theme that will allow me to do this?

Thanks in advance,

Stephen

#2

Hello Stephen,

Thank you for the very detailed post information. The Church theme is using the Renew stack. You can change the background color of the top bar by going to X > Theme Options > Renew > Top bar. There is a color picker provided for you to select the color. If you want to add separate background colors for each icon, you will need to use a custom CSS to make that change. By default, the background color has been set with this CSS code built-in to the Renew stack styles.

.x-social-global a{
    display:inline-block;
    text-align:center;
    color:#fff;
    background-color:rgba(255,255,255,0.2);
    border-radius:100em
}
.x-social-global a:hover.facebook{
    background-color:#3b5998
}
.x-social-global a:hover.twitter{
    background-color:#00abf0
}
.x-social-global a:hover.google-plus{
    background-color:#d84b35
}
.x-social-global a:hover.linkedin{
    background-color:#1a81ad
}
.x-social-global a:hover.xing{
    background-color:#006567
}
.x-social-global a:hover.foursquare{
    background-color:#0f6bb6
}
.x-social-global a:hover.youtube{
    background-color:#cc181e
}
.x-social-global a:hover.vimeo{
    background-color:#44bbff
}
.x-social-global a:hover.instagram{
    background-color:#3f729b
}
.x-social-global a:hover.pinterest{
    background-color:#cd1f28
}
.x-social-global a:hover.dribbble{
    background-color:#ea4b8b
}
.x-social-global a:hover.flickr{
    background-color:#ff0084
}
.x-social-global a:hover.behance{
    background-color:#1769ff
}
.x-social-global a:hover.tumblr{
    background-color:#36465d
}
.x-social-global a:hover.whatsapp{
    background-color:#25d366
}
.x-social-global a:hover.soundcloud{
    background-color:#ff5500
}
.x-social-global a:hover.rss{
    background-color:#fe6e00
}

Feel free to modify any parts of the code above and change the background color. You need to add your modified CSS code into X > Theme Options > CSS .

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Feel free to make adjustment as you need. Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

To add the trip advisor icon, kindly check out this thread:

You may check out the Slider Revolution or the Envira Gallery plugin which comes bundled with the theme.

Hope this helps.

#3

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.