Create custom design Twitter widget

  • Created : Jan, 16, 2020
  • Last Updated: Mar, 2, 2020


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

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