BoneyardBrew's avatar

Steam - MetroTwit 1.0

154 130 58K (1 Today)
By BoneyardBrew   |   
Published: June 21, 2011
Here is a fix for those who want to use the skin with the new Trade Update. I know this doesn't look perfect, but it's better than having a broken friends list.

Navigate to "Steam\skins\MetroTwit"

Delete or rename the "Friends" folder

I'd love to update the theme, but juggling school amongst other things leaves me with less time than I'd like to complete projects. So until I find the proper files for the new friends list and the time necessary to re-skin it, this'll have to do.


Version 1.0 released!

This is a Steam theme I'm working on based on the gorgeous Twitter client, MetroTwit, with permission from Long Zheng.

More Screenshots:
[link]
[link]
[link]
[link]
[link]

Steam Forums Thread:
[link]

There are still many things to do, including the overlay, details view, and more. Keep an eye out for future releases!
Comments130
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
cg24a3's avatar
This is such a nice skin, any chance you could make it for large screens with bigger elements and fonts?
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
I'm glad you like it but I have no plans to update MetroTwit at this point. Metro for Steam is its successor.
trunks10k's avatar
any up date with this skin? Love the aesthetics but new updates makes it unusable 
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
This is essentially the modern version of the MetroTwit theme. boneyardbrew.deviantart.com/ar…
ThCatalyst's avatar
Probably the most bugged Steam skin out there.
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
That's probably because I stopped maintaining it about a year and a half ago.
ThCatalyst's avatar
I see. Doesn't really matter anyway, I found your other Metro Steam skin and it works perfectly and looks great :)
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
I'm sorry for being so short, I should have linked you to the other skin in the first place! Anyway, I'm glad you're enjoying it.
A-T-Uniltiranyu's avatar
A-T-UniltiranyuHobbyist Digital Artist
Xbox Go Home
1DeViLiShDuDe's avatar
1DeViLiShDuDeHobbyist Digital Artist
Is there one of your links that are still good? for this deviation? other than the download link? I'd like to see what the others screens look like! :D
I don't like white, it's too hard on the yes in a dimly lit room.
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
That's the only link available and the skin is really out of date! Try this: [link]
1DeViLiShDuDe's avatar
1DeViLiShDuDeHobbyist Digital Artist
Great! Thanks! I'll use that then! :D
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
No problem! :)
coth-rus's avatar
having a few problems
- no steam button, like on screenshot. i can't open menu.
- library background is not white and i can't find how to change the view
- no big picture button
- no community sublinks
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
It should look exactly like the screenshot if installed correctly. Make sure the contents go in their own folder in Steam's skin directory.

1. The menu is opened via the cog at the upper right
2. Which library background are you referring to? The view is changed via the icons at the upper right.
3. Big Picture has an entry in the menu.
4. Community sublinks are at the bottom right.
coth-rus's avatar
this is how it looks for me
[link]

menu button is inactive, simply dead. no sublinks in bottom right and change view disappears when switching to this sking. installed correctly - folder is in steam's skin folder.
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
My mistake, I thought you were commenting on Metro for Steam, not MetroTwit. MetroTwit isn't supported anymore as it's old and would take a great amount of work to fix.

Sorry about that.
Eiviin's avatar
EiviinHobbyist Digital Artist
Really nice job with this :meow:
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
Thank you. :)
OmalleyPike's avatar
I've Fixed the friends dialogue. Only downside now is the odd fonts in the steam overlay, but I don't know how.
MetroTwit/Friends , and open "FriendsDialoge.res" in notepad.
Delete all of the existing text and paste the following:

"Friends/FriendsDialog.res"
{
controls
{
"FriendsDialog"
{
"ControlName" "CFriendsDialog"
"fieldName" "FriendsDialog"
"xpos" "2123"
"ypos" "549"
"wide" "356"
"tall" "746"
"AutoResize" "1"
"PinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"paintbackground" "1"
"settitlebarvisible" "1"
style="FriendsPanel"
closeonescape=1
}

"frame_title"
{
"ControlName" "Label"
"labelText" "#SteamRootFriends"
"xpos" "0"
"ypos" "8"
style="FriendsTitle"
"textAlignment" "west"
"textAlignment" "center" [$OSX]
}

"BuddyList"
{
"ControlName" "CFriendsListSubPanel"
"fieldName" "BuddyList"
"AutoResize" "3"
"PinCorner" "0"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"paintbackground" "0"
"linespacing" "48"
style="FriendsList"
}

"DownLabel"
{
"ControlName" "Label"
"fieldName" "DownLabel"
"xpos" "10"
"ypos" "85"
"wide" "336"
"tall" "80"
"AutoResize" "1"
"PinCorner" "0"
"visible" "0"
"enabled" "1"
"tabPosition" "0"
"paintbackground" "1"
"labelText" "#Friends_NoFriendsInList"
"textAlignment" "north-west"
"wrap" "1"
}

"MenuBar"
{
style="RootMenu"
"ControlName" "MenuBar"
"fieldName" "MenuBar"
"xpos" "29"
"ypos" "2"
"wide" "75"
"tall" "27"
"AutoResize" "0"
"PinCorner" "0"
"enabled" "1"
"tabPosition" "6"
"paintbackground" "1"
zpos="-1"
}

"AddFriendsButton"
{
style="AddFriendsButton"
"ControlName" "Button"
"fieldName" "AddFriendsButton"
"xpos" "10"
"ypos" "707"
"wide" "150"
"tall" "24"
"AutoResize" "0"
"PinCorner" "2"
"visible" "1"
"enabled" "1"
"tabPosition" "0"
"paintbackground" "1"
"labelText" "#Friends_AddFriend"
"textAlignment" "west"
"wrap" "0"
"Default" "0"
"selected" "0"
}

"NoFriendsAddFriendButton"
{
"ControlName" "Button"
"fieldName" "NoFriendsAddFriendButton"
"xpos" "10"
"ypos" "129"
"wide" "200"
"tall" "24"
"AutoResize" "0"
"PinCorner" "0"
"visible" "0"
"enabled" "1"
"tabPosition" "0"
"paintbackground" "1"
"labelText" "#Friends_AddFriend"
"textAlignment" "west"
"wrap" "0"
"Default" "0"
"selected" "0"
}
"FriendsState"
{
"ControlName" "EditablePanel"
"fieldName" "FriendsState"
"xpos" "6"
"ypos" "52"
"wide" "310"
"tall" "457"
"AutoResize" "0"
"PinCorner" "0"
"visible" "0"
"enabled" "1"
"tabPosition" "0"
"paintbackground" "1"
}
}


styles
{
FriendsPanel
{
bgcolor="ClientBG"
render_bg
{}
}


AddFriendsButton
{
font-family=basefont
font-size=13
font-weight=800
textcolor="White"
font-style=uppercase
bgcolor=ButtonFill
render_bg
{
1="fill( x0, y0, x1, y0 + 1, ButtonBorder )" // top
2="fill( x0, y1 - 1, x1, y1, ButtonBorder )" // bottom
3="fill( x0 - 1, y0, x0, y1, ButtonBorder )" // left
4="fill( x1, y0, x1 + 1, y1, ButtonBorder )" // right
}
}


AddFriendsButton:hover
{
textcolor="White"
bgcolor=ButtonFillHover
render_bg
{
1="fill( x0, y0, x1, y0 + 1, ButtonFillHover )" // top
2="fill( x0, y1 - 1, x1, y1, ButtonFillHover )" // bottom
3="fill( x0 - 1, y0, x0, y1, ButtonFillHover )" // left
4="fill( x1, y0, x1 + 1, y1, ButtonFillHover )" // right
}
}

AddFriendsButton:active
{
textcolor="White"
bgcolor=Black
render_bg
{
1="fill( x0, y0, x1, y0 + 1, Black )" // top
2="fill( x0, y1 - 1, x1, y1, Black )" // bottom
3="fill( x0 - 1, y0, x0, y1, Black )" // left
4="fill( x1, y0, x1 + 1, y1, Black )" // right
}
}

RootMenu
{
bgcolor="none"
}


FriendsTitle
{
inset="0 0 0 0"
}

FriendsTitle [$OSX]
{
font-family=basefont
font-size=15
font-weight=400
textcolor="textdisabled"
bgcolor="none"
inset="0 9 0 0"
}

FriendsTitle:FrameFocus [$OSX]
{
font-family=basefont
font-size=15
font-weight=400
textcolor="texthover"
bgcolor="none"
inset="0 9 0 0"
}
}

layout
{
place [$OSX] { control="frame_title" align=center x=0 y=0 width=max height=20 }
place [!$OSX] { control="frame_title" x=0 y=0 width=0 height=0 }
// the title bar is missing, so increase the size of the grip
place { control="frame_captiongrip" margin=2 width=max height=38 }
place [!$OSX] { control="MenuBar" margin-left=0 height=27 margin-top=0 }

place { control="buddylist" align=left margin-left=10 margin-right=7 margin-top=27 margin-bottom=16 width=max height=max }
place { control="addFriendsButton" align=bottom margin-left=90 margin-right=19 margin-bottom=7 width=110 height=23 }
region { name=hidden height=0 width=0 }
region { name=bottom align=bottom width=max height=36 }

place { control="FriendPanelSelf" x=8 y=3 align=left margin-left=0 margin-right=0 margin-top=25 }
place { control="FriendsDialogSheet" y=6 align=left margin-left=7 margin-right=0 margin-top=70 margin-bottom=36 width=max height=max dir=down spacing=3 }
place { control="friends_search" region=bottom align=left x=6 y=6 height=24 width=70 }
place { control="friends_search_icon" region=hidden margin-left=-2 start=FriendPanelSelf dir=down margin-top=5 }
}

}
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
Cool!
kronpas's avatar
awesome work. This might not be so at the moment, but people will need your theme once Windows 8 comes out, which isnt far.
BoneyardBrew's avatar
BoneyardBrewHobbyist Interface Designer
Thank you!
Bakyte's avatar
Any chance of you updating this one to suit the new steam?
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In