Hello, Everyone! Today's featured software is: the Twitter Profile Widget. This post details how to customize it so that it color-coordinates with your blogsite/website and fits properly within the borders of the space you place it in. I decided to share this information after seeing so many Twitter widgets that don't fit the site their on and do not match the site's color palette. I hope this post is very helpful to each of you that have not customized your Twitter Profile Widget, yet and want to do so.
I think it's helpful to include 'live' examples of the widget to demonstrate what I'm stating. Therefore two Twitter Profile Widgets for @Chaella should be visible below, with two very different color palettes and sizes.
The first widget is the exact same code for the widget I've placed in the sidebar of CFST. The backgrounds for it are '#transparent', the text colors are #aaaaaa and the link color is #039faf. The second widget's shell background color is #e6c45c, its shell text color is #cf38cf, its Tweets background color is #000000, its Tweets text color is #ffffff and the Tweets links are #4aed05.
As you may know:
- with the Twitter Profile Widget you can display your most recent Twitter updates on any webpage.
- in 'Settings' you'll see a space to enter your Twitter Username (if it wasn't already there)
- in 'Preferences' you'll see 'Poll for new results?'. Click the square for 'yes' if you want this function
- Also, you'll see 'Include scrollbar?'. Click the square for 'yes' if you want a scrollbar
- Underneath 'Behavior' you'll see 'Timed Interval' or 'Load all tweets'. If you select 'Load all tweets' You'll see 'Number of Tweets' below. Use the up and down arrows to select the number of Tweets you want. If you select 'Timed Interval' you'll see 'Loop results?' and 'Tweet Interval?' Click 'yes' if you want the results to loop. Use the up and down arrows to select the Tweet interval you want.
- You'll see 'Number of Tweets'. Use the up and down arrows to select the number of Tweets you want to display on your widget.
- You'll see 'Show Avatars?' Click the box if you want a tiny thumbnail of your Twitter profile image to be visible with each Tweet.
- You'll see 'Show Timestamps? ' Click the box if you want the hours/minutes denoting the timeframe of the Tweets to show.
- You'll see 'Show hashtags?' Click the box if you want the hashtags of/in Tweets to be visible.
- Next, you'll see 'Appearance' and 'Widget Colors' and:
- shell background (the background color of the area that contains the name & username associated with your account, above the Tweets section and the area below your Tweets section that has the Twitter logo and 'Join the conversation'). Enter a 6-digit/character hex code after the # symbol if you know the 6-digit/character hex code for a color you want to use. Also, you can simply select a color by clicking on the square of color nearby.
Then, do the same for:
- 'tweet background ' (the background color of the tweets section),
- 'links',
- 'shell text' (the lines of text that are the name and username of your Twitter account),
- 'tweet text' (the text of the Tweet that is not the link(s) )
- Lastly, you'll see 'Dimensions' and 'Widget Dimension'. If you know the dimensions of the area you plan to place your widget into, such as a sidebar, then you can enter those dimensions in the boxes provided or you can select 'Auto Width'. 'Auto Width' will automatically size the widget to fit within the space it's placed in. The second widget, above, has 'Auto Width' as it's width. The first widget has 280 as its width. The first widget's height is 100 and the second widget's height is 300.
It's good to coordinate the colors of your widget to match (or compliment) the colors of you blogsite/website. Your Twitter links should match your site's link color. Your Twitter background should match (or compliment) your site's background. If you select different colors for your shell background and your Tweet background, do make them complimentary to each other and to your site's colors.
The simplest way (that I know of at this time) to get a perfect match to your site's background color, if you are new to matching web colors or just want to save a few minutes of time, is to make the shell background and the Tweet background transparent. Since hex codes are six characters/digits in length and 'transparent' is not, the 'transparent' code is entered once you've pasted the Twitter Profile Widget code into your site's code section.
In the Twitter Profile Widget page, clicking on 'Test Settings' displays all the choices you've made for the widget except the size. Once you've viewed your changes, click 'Finish & Grab Code'. After you've copied the code and pasted it you can look at the code and see the following:
- type: 'profile' means you have the code for the Twitter Profile Widget.
- 'rpp' indicates the number of Tweets you chose to display
- 'interval' indicates the Tweet Interval you chose
- 'width' indicates the width you chose
- 'height' indicates the height you chose
- 'shell: { background :' indicates the color you chose for your widget's shell background
- Underneath that first 'background' is the color you chose for the shell's text
- 'tweets: {background ' is the color you chose for the background of the Tweet area
- Underneath that second 'background' is the color you chose for the Tweets' text
- Underneath that color is 'links' and your choice here is the color of the links in the Tweets
- In the 'features: { ' section each one that states 'true' means your widget has it or does it. Each one (scrollbar, loop, live, hashtags, timestamp, avatars) that states 'false' means your widget doesn't have it or doesn't do it.
Your widget will look really nice if you make the two 'background' areas the same color, make the two 'text' choices the same color and make the link color the same as the link color of you site's predominant link color.
Now, here are the parts of the code you can edit without going back to the Twitter Profile Widget page to do so:
- rpp (enter a different number)
- interval (enter '2' as in 2000 up to '20' as in 20000)
- width (enter a different number, usually a 3-digit number as in width: 150, or width: 'auto')
- height (enter a different number, usually a 3-digit number as in height: 300)
- background (as in background: '#111111', or background: '#transparent') Again the six-digit/character code with the # symbol in front of it is a hex code for a color of your choice. Note: '#transparent' is what you'd enter if you want transparent backgrounds
- color (enter a different hex code for the color of your widget's shell text and its Tweet text)
- links (enter a different hex code for your link colors)
- features ('false' can be changed to 'true' and 'true' can be changed to 'false')
That's it! As you see, several of the features and functions of the Twitter Profile Widget can be changed off-site. Particularly, you can change your Twitter Profile Widget code and make it match you site's colors and make it fit within the boundaries you place it in, as well. It's a wonderful widget and it was created/designed to be customizeable so that it's attractive on any site. Make it so!
