Kebo widget background colour

Hi c.devlin,

I certainly can, if you have access to your theme’s CSS file you could add these rules (but changing the colors):

This will change the background color of the entire Widget with the Twitter Feed in:

kebo_twitter_feed_widget {
    background: #7a7a7a;
}

This will change the background color of the list of Tweets.

html body kebo_twitter_feed_widget ul.kebo-tweets {
    background: #7a7a7a;
}

This will change the color of the Tweet text.

.kebo-tweets .ktweet .ktext {
    color: #7a7a7a;
}

If these are not what you had in mind, let me know and it would be useful if I could see the site so I can understand what you are trying to achieve. I am sure we can get it looking right.

Thanks so much Peter,

Have tried adding this to custom css without joy unfortunately. Here is the link:

https://www.agreenhouse.net.au

Catherine

Hi Catherine,

I see now. What color would you like the Tweet text to be? and when you say background color, do you want to change the green bubble around the entire widget, if so to what color?

I think the text CSS I suggested above would work, but through terrible luck I chose a color almost identical to the current color (grey). You could try this to make it white:

.kebo-tweets .ktweet .ktext {
    color: #ffffff;
}

Another quick tip: If you go back to the Admin -> Appearance -> Widgets screen. The Kebo Twitter Widget has a ‘Theme’ option, if you change that from Light to Dark, it will make the intent buttons (favorite, retweet, etc) lighter and easier to see.

Hi Peter,

I did change the colour to white. But this didn’t work unfortunately

Hi Catherine,

I see your custom CSS on the page now, it is currently:

#widget .ktweet .ktext {
   background color: #fff;
}
kebo_twitter_feed_widget {
   background: #fff;
}

If you change it to this, it will control both the text color and the background color of the Twitter Widget.

.kebo-tweets .ktweet .ktext {
    color: #fff;
}
kebo_twitter_feed_widget {
    background: #46C5CF;
    border-color: #46C5CF;
}

A mistake above, the correct CSS should be:

.kebo-tweets .ktweet .ktext {
    color: #fff;
}
.kebo_twitter_feed_widget {
    background: #46C5CF;
    border-color: #46C5CF;
}

Missed a fullstop before the class name.

You are awesome = thanks Peter!

My pleasure Catherine, I am glad you got it under control!

Sorry, being really annoying now but is there a different code for the widget title?

Not annoying at all. Certainly, we can change the title color by using this:

This uses the same green as the background of the other widgets.

.kebo_twitter_feed_widget .widget-title {
   color: rgb(51, 93, 101);
}

I also noticed that with a white background, the default link color (white) now causes problems. To change that we can do:

This uses the orange color for the links, and adds an underline while hovering over them.

.kebo_twitter_feed_widget .kebo-tweets a {
    color: rgb(209, 89, 33);
}
.kebo_twitter_feed_widget .kebo-tweets a:hover {
    text-decoration: underline;
}

Thanks so much Peter. What fantastic support!!!!!!!

My pleasure Catherine, don’t hesitate to ask if you ever have problems/questions!