Adium - Xtras - View Xtra: Model Portfolio

	Model Portfolio
	Submitted By Carl (armaniboi)

Description

This is my first Adium Xtra.

I'm more of a designer than a web developer but know enough to get by. I was inspired when I saw the Pushpin message style. Thanks to Mark Fickett's tutorial to figure out what all the codes meant and VanillaIcee's Pushpin style as inspiration.

I've always wanted bigger buddy icons because I like to actually see the details. So I wanted to make a message style based on fashion model websites by adding polaroid overlays for buddy icons. I've included a sample background with side decorations that you can use for smaller window sizes or create your own and set it to stretch or customize it for your desired window size. You can see a (500) Days of Summer option I did for my own in the second screenshot.

Changes

1/28/2011:
- Message font and size is now editable.
- Direct IM picture messaging fixed so photos and text do not overlap.

8/12/2008 - Emoticon problem is fixed!! (Super duper thanks to gwendolyn)

Future changes I want to do (though I don't know how to right now):
-Variation as alternating icons
-Varying buddyicon/polaroid sizes
-New backgrounds

There's probably more but I can't think of it right now.

Images

Expand

Comments

You can reply to individual comments by clicking the "Reply" link next to each.

# by zazzakakashi on 03/13/08 at 19:19:19

Man, this is the coolest Message Style i havent seen in a while!!!!!
Yeah def fix the stretching things so the hour sticks togheter!! That'd be real cool ! I personally just L O V E it !Thanks!!

# by awazakito on 03/15/08 at 00:33:05

awesomeness!!!! luv it!!!!! thanx!!!!

# by antipeople on 03/16/08 at 04:41:53

I love it, but you need to fix the stretching!

# by DBrenz on 03/18/08 at 05:37:22

This is would perfect if there was a nice background for the text and an option to make the Polaroids smaller. Great idea!

# by iwamoto on 03/20/08 at 21:23:28

wow, realy looking forward to the newer versions, but wow, my compliments, so stylish and yet so nice and visible, i take my hat of for you :p

# by elaboratedream on 03/21/08 at 20:48:24

I like it a lot. Just huge :-/

# by miseryantics on 03/21/08 at 20:53:57

this is a really different and a really great style. You know theres a few problems with it, so i won't give it a rating until its finished, but if you can sort out the few issues with backgrounds etc. then it gets 5 ducks from me :D
Thanks for something fresh and not so plastic :D

# by armaniboi on 03/27/08 at 01:32:46

Thank you all for the kind words! It's really encouraging and I haven't had time to tackle the problems yet since I've been busy with life and working on some other design project but definitely check back in the future! This project is definitely something I want to finetune and with some different backgrounds and styles.

# by tasmanian_devil on 03/30/08 at 15:18:57

this is hella cool :] just think that the icons are little big, but it's really great over all :]

# by VirtualAlex on 04/15/08 at 03:59:39

Very cool style, very fun and playful, although it's WAY to huge. I mean there should be a place to adjust size, or at least some options. As is, I can't use it, too much screen space! But I love the layout. Except I don't like how the contacts name actually touches the dividing line.

# by gwendolyn on 08/12/08 at 20:10:38

LOVE this style. I changed it around a bit to match my own needs (hope you don't mind --- it's just for me!) and everything was smooth sailing. Love the fonts, how everything is easy to read etc. I can't stand the emoticon issue though. Once you figure that out I think it'll be one of my favorite styles ever.

# by gwendolyn on 08/12/08 at 22:53:05

I decided to tinker around with it and I found an easy fix. I found that the problem with the emoticons is that they needed to be relative when the other images needed to be absolute, but there's no place in your script to even change the way emoticons appear. So I simply added:

.emoticon
{
white-space: nowrap;
text-wrap: suppress;
word-wrap: normal;
}

img.emoticon
{
vertical-align: top;
max-height: 75px;
width: auto;
position: relative;
top: 0px;
}

above:

IMG {
position: absolute;
}

In the file: basestyle.css My emoticons are just fine now and it didn't interfere with the styling at all. :)

# by armaniboi on 08/12/08 at 23:31:36

You are so awesome gwendolyn! Works like a charm. I'll upload a new version with the fix and put you in the credits. And also, thank you so much for your kind words, and I definitely don't mind you adjusting it, I mean I adjusted another template for my own needs too! haha. I still have things that I want to do with this but just really have had to put it on the backburner. But now that you've fixed that part, maybe I can look on doing some more.

# by gwendolyn on 08/12/08 at 23:33:50

You are very welcome! I'm glad that I could help out! :-D

# by gwendolyn on 08/13/08 at 03:45:14

Oh, I also should add that by changing the max-height you can make the emoticons w/e "size" you want. I just set it to a max-height of 75px. :) Just in case anyone else wants bigger (or smaller) emoticons. :)

# by ladolcev1ta on 08/28/08 at 01:13:29

this is AMAZING you should definitely make more! (:

# by Chibi on 09/29/08 at 00:21:41

OMG! This is your FIRST!?! SO GOOD!!!~

# by Chibi on 09/29/08 at 00:22:23

What are the pictures on the Ness conversation from?

# by armaniboi on 09/29/08 at 03:53:43

thanks ladolcev1ta! i'll definitely try to make more when i feel inspired and have some time. thanks chibi! the ness pictures were taken from screenshots of smash brothers brawl (wii) that were found on the developer's blog.

# by ppp on 02/26/09 at 13:33:12

i like this layout, but one thing that really bothers the hell out of me is that i can't change the font size on the actual text. its too small and i change it to even size 49 but still the same small font size. Why is this?

# by mokona.amane on 09/19/09 at 13:44:21

i love this to death . ur a genius ; )

thanks i will keep it forever . keep making them . ur a pro : )

# by togepi1982 on 09/24/09 at 20:06:12

I have a question... Sorry for being so dumb... Does this thingy refer to sms applications? Sorry... For being so blur...

I love the styles... Just wondering is the application for sms? If not, messages as in?

# by Cruciarius on 04/28/10 at 19:19:22

Love this xtra, but sad to see no update. Text runs into the time stamp, lines above and below messages don't go across the entire msg window, filmstrip for days/away msgs is too big...

Basically, II only like the polaroid portion of the xtra. The rest needs to be updated.

# by sinie on 01/28/11 at 13:11:51

Can anyone help me to just, make the font larger? this size 10 font is killing my eyes and giving me a headache! please

# by armaniboi on 01/28/11 at 19:22:30

I'm sorry I've put this off for so long. Got sucked into job and side projects. But now that I'm a bajillion times more knowledgeable about CSS, I'm going to go back and make this xtra what I originally envisioned it as. My goal is to have it up sometime in February.

# by armaniboi on 01/28/11 at 20:24:12

Just uploaded a new version with some quick fixes. Font size is now editable. Direct IM is fixed so photos and text don't stack on each other.

You should be able to download it now!

Post a New Comment

You must be logged in to post comments.

Install | Download
391.63kb (21671 downloads)

4.00 / 105 votes

Current Version:	0.8
Last Updated:	01/28/11
Credits:
VanillaIcee for Pushpin Message Style. Mark Fickett for his Tutorial. Gwendolyn for help with the emoticon fix.