Kiwi App Theme Retweeter Text Position Hack

fetchit-21

Kiwi is a twitter client for Mac that offers all the benefits of the Twitter for Mac and more. Check it out.

Anyway, one of kiwi’s most amazing features is templates. You can change standard css, html and images to make the client look exactly how you like. Change the design of the timeline or use one of the free kiwi themes that other people have created.

I was immediately drawn to the Twitlike theme which mimics the existing Twitter for Mac design. After installing it to kiwi there were a couple of things I wanted to change. The first being, if the tweet was actually a retweet, Kiwi inserts the retweet information before the actual tweet text, and I didn’t want it to show above the text, I wanted the retweet information to show below out of the way.

Luckily using a bit of css magic I worked out how to move the retweet information. First I added a border to all <div> tags so I could see what made up the html of the tweets text. Bingo; the retweet information is in it’s own div.

Here is part of my html template:

	<div class="text">
		<div class="recipient">
			%recipient%
		</div>
		<div class="tweet-text">
			%text%
		</div>
	</div>

So the css selector I needed to grab all text was .tweet .text and the selector for the retweet information was .tweet .text div

 
/* the retweet info */
.tweet .tweet-text div {
	overflow: hidden;
	height: 13px;
	position: absolute;
	left: 0;
	bottom: -20px;
}
 
/* the tweet text */
.tweet .text {
    -webkit-user-select: text;
	margin-top: 3px;
	margin-bottom: 5px;
	position: relative;
}
 
/* the tweet text if this is a retweet */
.tweet.retweet .text {
	margin-bottom: 20px;
}

As you can see above. If it’s a retweet I add a larger margin bottom to the text so there is space to show the retweeter information. I then position absolute the retweeter information, give it a fixed height and overflow hidden incase it’s massive.

Kiwi are kind enough to add a .retweet class where applicable, so I can only apply these styles where required. Bingo:

kiki app screen shot

I noticed that someone else asked this question on the kiwi discussion forums and the official kiwi reply was that it was a know request to have a separate template elements for the retweet information. Let’s hope that a new version on Kiwi brings that to us.