Widget Text box in Footer background color

[xxfreerider]

Dear support

I have a widget in my footer with contact information, but sue to background, I’d like to add a 50% white background color so you can read it more clearly. after looking into the knowledgeable I can only find where you can change the entire footer, which I don’t want. The Widget I have is a text box with “clickable” mail and phone, so I don’t want to make it a picture. Can you help me please?

The text box contains just the code :
555 5555

info@******.se

[jade]

Hey Eide,

Please add this code in X > Theme Options > CSS:

.x-colophon.top .x-column:first-child {
    background-color: rgba(255,255,255,0.8);
    padding: 20px;
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates.

Here are some related links for further reading:

• Intro to CSS - https://goo.gl/mFuWQT
• How to get CSS selectors - https://goo.gl/BmoH39
• Get Started With Viewing And Changing CSS - https://goo.gl/7xFhDa

Hope this helps.

[xxfreerider]

Thank you so much, it did what I wanted almost. Is there a possibility to just have the white background for the text-box of the Widget? Not including the header? Thanks

[nabeel]

Hey Eide,

To achieve this, please replace the previously given code with the following one:

.x-colophon.top .x-column:first-child {
    background: transparent;
    padding: 0;
}

.x-colophon.top .x-column:first-child .textwidget {
    background: #fff;
    padding: 0 15px;
}

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[xxfreerider]

Thank you so much, it was successful! Br

[paul.r]

You’re welcome!