Create custom design Twitter widget

  • Created : Jan, 16, 2020
  • Last Updated: Jun, 9, 2022


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]
  26. Rest keep as default


Related posts

Create widget in Overlay style with linear gradient background

Create widget in Overlay style with linear gradient background

Create widget in Overlay style

Create widget in Overlay style

Facebook widget

Example Facebook page widget in large image style

Easily create a Facebook widget with a large image style and customize it as your need.

Start your free trial. FeedWind is the easiest way to add dynamic content on your website.
Create Now