Twitter CSS Modification

After I tried several Twitter plugins with a feed capability I decided to keep the PluginChief Twitter Badge Widget. The plugin’s widget gives few, but very simple controls over how the feed is displayed on the sidebar. There is the option of a widget title which is normally displayed before the content, an input for the desired username in order to pull the feed, the number of tweets displayed, a narrow or wide format selector -which actually switches classes in the plugin’s css for banner shaped widgets. Finally there is an option for an interactive follow button, which allows to follow the account by clicking on it and the option include count, to display the number of followers next to this button.

screen shot of Twitter Badge Widget UI

Although the widget features everything I need, it didn’t sit well on the sidebar of my theme. And by using wordpress.com twitter widget for a year I knew beforehand the desired look. Major issue in my case was the tweets not having any separating element between them. It looked like a block of text and if it wasn’t for the twitter logo, it would be hard to tell it’s nature.

screen shot of TBW feed without any modifications

screen shot of TwitterWidget feed from wordpress.com      <<– wordpress hosted blog                                                                  wordpress installation –>>

Separate the tweets
After inspecting the element I experimented with the plugin’s css file but didn’t achieve anything. The first solution was when I located in the style.css of the theme, the sidebar div tag. I wasn’t familiar with all the properties and did some research on w3schools.comThe property line-height sets the height of each line of text, hence creating the gap in-between. The value was set to 120%, which I increased by adding another 5%. Although this change affected every line of text in the sidebar, it still looked acceptable and gave some space to the cluttered lines of the widget.

Let me say before I continue that this issue was probably caused by the interaction of these two elements sourced by different developers. The second solution was actually even better once it was provided by the developer for this exact reason. In the readme.txt provided there were two lines of code that added the properties border-bottom: dotted; and border-bottom-width: thin; which tell the computer to add a thin dotted line at the bottom of every item in the list, in my case the tweets. I did a bit more research on these properties and experimented with different values. Even though I had about 10 to choose from, I wasn’t pleased with the result as I wanted separators between the items of the list; not at the bottom. For example you have 5 items with 4 four separators instead of 5 items with 5 separators.

One could argue I get obsessed with minor details, but isn’t this the advantage of having your own installation? I marked the lines as comments and started looking for other solutions. Since I mentioned lists, I should say that unordered list of any kind was the initial idea, but I still struggle to locate class .TBW_Tweets. This idea is sourced from my wordpress hosted blog.

After all the experimentation I noticed the links of every tweet don’t have colour, say blue, but only underline when you hover. A good reason is for the reader of this feed to distinguish all sorts of links a tweet carries; a #hashtag, a @username, a plain link and the time. I changed the colour of the time link to #1c9bdc, which I have decided to set as the “global” link colour of this blog. The time links are situated at the end of each tweet accurately serve as separators, while maintain minimal aesthetics, such as the theme. Great! For the time being…

TBW feed with coloured timestamps

Bring out the widget
Let me remind you that my goal was implementing all the bits I liked from my other blog without details I didn’t like. Using the element inspector of the browser I located the class .TBW_Status, which surrounded the feed. Then used the property background-color, which has been very common so far, and set the value to #f1f1f1 in order to match the background colour of the #page div tag of the theme’s css. I also copied a several properties from #wrapper of the same css file. More specifically, I copied border-radius along with its browser-specific properties -moz-border-radius-khtml-border-radius-webkit-border-radius, where I set them to 8px. The prefixes stand for Firefox, Konqueror and Safari respectively. This set of properties make the corners of a border curved to the desired value.

Twitter logo and interactive follow button
I increased the padding left-value (.TBW_Status) and set it to 10px to align the text further in the border and distance it from the twitter logo. The same applies to the padding right-value, as well as 5px for top and bottom values. I still haven’t manage to make a margin of 1 or 2 pixels between the twitter logo and the border. Finally, I added the opacity property to the .TBW_Picture class, which essentially is the twitter logo image. I set this at 0.7 to match other opaque buttons on the sidebar (the social buttons on the top of the sidebar are set to 0.5, but since this icon has smaller resolution, a 0.5 value would render it more opaque, hence the slight difference in values).

TBW feed, icon set to 0.7 opacity

The interactive follow button was aligned left  by default in order to leave space to the right for the include count option I talked in the beginning of this post. Because I am not using this feature, the button would aesthetically look better if centre aligned below the background border. I used the properties margin-left at 40px to align it and margin-right at 10px in order to keep it safe from overflowing, as I experienced once.

 TBW feed, follow button centre aligned

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s