WordPress.org

Forums

Kebo Twitter Feed
[resolved] Kebo widget background colour (14 posts)

  1. c.devlin
    Member
    Posted 1 year ago #

    Just wondering if you can help me with changing the background color and font colour of the Kebo widget.

    http://wordpress.org/plugins/kebo-twitter-feed/

  2. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  3. c.devlin
    Member
    Posted 1 year ago #

    Thanks so much Peter,

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

    http://www.agreenhouse.net.au

    Catherine

  4. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  5. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  6. c.devlin
    Member
    Posted 1 year ago #

    Hi Peter,

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

  7. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  8. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  9. c.devlin
    Member
    Posted 1 year ago #

    You are awesome = thanks Peter!

  10. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

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

  11. c.devlin
    Member
    Posted 1 year ago #

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

  12. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

    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;
    }
  13. c.devlin
    Member
    Posted 1 year ago #

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

  14. Peter Booker
    Member
    Plugin Author

    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Kebo Twitter Feed
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic