Change Footer Color & Font Color

Support
#1

Hi!

I need to make some changes to the footer:

  1. I need to change the BG of the bottom part of the footer to #67156e while keeping the 4 Widget areas white.
  2. The text and links need to be #FFFFFF.
  3. The links need to change Color to #f0e8f0 and Underline when hover.
  4. The Social media Icons need to be #FFFFFF.
  5. Need to add a YELP social media icon.

Please see example below:

Please let me know if you have any questions or need additional information :smile:

#2

Hi Luis,

Thank you for reaching out to us. This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it.

To customize the bottom footer, please add the following code in the Theme Options > CSS:

.x-colophon.bottom {
    background: #67156e;
    color: #fff;
}
.x-colophon.bottom a {
    color: #fff;
}
.x-colophon.bottom a:hover {
    color: #f0e8f0;
    text-decoration: underline
}
.x-colophon.bottom .x-social-global a:hover {
    text-decoration: none;
}

To add a Yelp icon, you can follow this thread: https://theme.co/apex/forum/t/yelp-icon-in-social-global/49135/2

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Hope this helps!

#3

Thanks for the Information! :smile:

The CSS code does the trick. I don’t need to change the arrangement of the information. It looks fine like it is now.

One question, on the article that you sent:
https://theme.co/apex/forum/t/yelp-icon-in-social-global/49135/2

The Yelp code reads as follows:

$output .= '<a href="http://www.yelp.com/profile" class="yelp" title="Yelp" target="_blank"><i class="x-icon-yelp" data-x-icon-b="" aria-hidden="true"></i></a>';

Is this this weird symbol correct?

data-x-icon-b=""

Thanks in advance for your help!

#4

Hi Nabeel… Also, forgot to ask, is there a way to add the diagonal line “/” between the links on the footer in “Integrity” like it is done in “Ethos?”

Thanks again for your help! :smile:

#5

Hi Luis,

Change it with &#x plus the yelp symbol like below:

data-x-icon-b="&#xf1e9"

It can be achieve using the pseudo :after CSS syntax. Please check this guide:


Also, more changes is getting into custom development which is outside the scope of our development. Thank you for understanding.

#6

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