Create custom design Twitter widget

• Created : Jan, 16, 2020
• Last Updated: Apr, 13, 2024

Here’s an example of a customized Twitter widget.

Follow these steps to create your own Twitter Widget.

Easy Steps

Widget Settings

1. Create widget -> Twitter
2. What do you want to show? -> Your tweets
3. What do you want to show? -> Tweets from you and users that you are following
4. General -> Width -> Responsive/In Pixels -> Responsive
5. General -> Style -> Thumbnail
6. General -> Height -> Posts -> 2
7. General -> Scroll -> ON
8. General -> Scroll -> Vertical
9. General -> Scroll -> Scroll Bar -> OFF
10. General -> Scroll -> Autoscroll -> ON
11. General -> Scroll -> Autoscroll -> Normal
12. General -> Advanced Settings -> Custom CSS link -> Show custom css

    Note: Copy CSS from below, paste into your CSS file [your-file-name.css] , make changes as per your need and upload to your server or in Dropbox [ Check How to host CSS on Dropbox Click here], copy the complete CSS path [e.g. http//example.com/css/your-file.css] and paste in "Custom CSS Link" field in Feedwind setting.
    
    
    /* Copy CSS from here  */
    
    @-webkit-keyframes AnimationName {
      0% {
        background-position: 0% 50%
      }
    
      50% {
        background-position: 100% 50%
      }
    
      100% {
        background-position: 0% 50%
      }
    }
    
    @-moz-keyframes AnimationName {
      0% {
        background-position: 0% 50%
      }
    
      50% {
        background-position: 100% 50%
      }
    
      100% {
        background-position: 0% 50%
      }
    }
    
    @keyframes AnimationName {
      0% {
        background-position: 0% 50%
      }
    
      50% {
        background-position: 100% 50%
      }
    
      100% {
        background-position: 0% 50%
      }
    }
    
    
    
    header {
      background: linear-gradient(270deg, #11ca9a, #0da17b, #0773f0, #ec155f, #b2154b, #f02c2c, #f98600, #ce7815, #75bb15, #64a70a);
      background-size: 2000% 2000%;
    
      -webkit-animation: AnimationName 50s ease infinite;
      -moz-animation: AnimationName 50s ease infinite;
      animation: AnimationName 50s ease infinite;
    }
    
    header .fw-tw-feed-title-username {
      font-size: 14px;
      padding-left: 10px;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: 1px;
    }
    
    header .fw-tw-feed-header-title .fa-twitter.tw_twitter_icon_blue {
      color: #fff;
    
    }
    
    header .fw-tw-feed-header-title {
      padding: 20px;
      border-bottom: 0px solid #dbdee1;
    }
    
    #fw-tw-feed-items {
      background: linear-gradient(-45deg, #EE7752, #E73C7E, #23A6D5, #23D5AB);
      background-size: 400% 400%;
      -webkit-animation: Gradient 15s ease infinite;
      -moz-animation: Gradient 15s ease infinite;
      animation: Gradient 15s ease infinite;
    }
    
    @-webkit-keyframes Gradient {
      0% {
        background-position: 0% 50%
      }
    
      50% {
        background-position: 100% 50%
      }
    
      100% {
        background-position: 0% 50%
      }
    }
    
    @-moz-keyframes Gradient {
      0% {
        background-position: 0% 50%
      }
    
      50% {
        background-position: 100% 50%
      }
    
      100% {
        background-position: 0% 50%
      }
    }
    
    @keyframes Gradient {
      0% {
        background-position: 0% 50%
      }
    
      50% {
        background-position: 100% 50%
      }
    
      100% {
        background-position: 0% 50%
      }
    }
    
    a.fw-tw-links-in-tweets {
      color: #fff;
      display: inline-block;
      margin: 5px 0 0 0;
      padding: 0px 5px;
      text-decoration: underline;
    }
    
    .fw-tw-reply-text {
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.25);
      display: inline-block;
      margin: 5px 0 0 0;
      padding: 0px 5px;
    }
    
    #fw-tw-feed-items .fw-tw-feed-item-image-module {
      margin: 0 10px 0 0;
      padding: 0;
      float: left;
      border-radius: 50%;
      overflow: hidden;
      width: 100px;
      height: 100px;
    }
    /* CSS Ends Here  */
    

13. Feed Title -> Custom -> ON
14. Feed Title -> Font size -> 16
15. Feed Title -> Colors -> Background color -> #FFFFFF
16. Feed Title -> Colors -> Font color -> #FFFFFF
17. Feed Title -> Advanced Setting -> Twitter Icon -> Blue Twitter Icon
18. Tweets -> Font size & Color -> Tweets -> [14] [#FFFFFF]
19. Tweets -> Font size & Color -> Links in Tweets -> [#55a0ff]
20. Tweets -> Font size & Color -> Full Name -> [16] [#FFFFFF]
21. Tweets -> Font size & Color -> User name -> [14] [#FFFFFF]
22. Tweets -> Font size & Color -> Date/Time -> [12] [#FFFFFF]
23. Tweets -> Font size & Color -> Action Icons -> [16] [#FFFFFF]
24. Tweets -> Font size & Color -> Retweet Label -> [14] [#FFFFFF]
25. Tweets -> Font size & Color -> Background -> [#FFFFFF]

Rest keep as default

Related posts

How to Create a Vimeo Video Widget for Your Website – Easy Guide

Contents1 Step 1: Get the Vimeo Video Feed2 Step 2: Create a FeedWind Account3 Step 3: Make Your Vimeo...

Ultimate Bento Design in FeedWind Widgets

Contents1 Why Bento Design?2 Crafting Your Bento Design Style Widget with FeedWind: A Step-by-Step Guide3 Bento Design Style Widget...

Facebook posts: Enhance your brand’s online presence with custom overlay design

Stand Out with Custom Overlay Designs While images play a vital role in catching the eye, the design elements...