I participated in both threads but this one is different because you can try or preview your theme via your desktop browser: Chrome and Firefox (IE does not render the direct adjacent combinators correctly. CSS)
So what ever you see in Chrome and FF, is the same thing in WM device, but this is tested only on WM6.5.5 mobile and WM6.5 (emulator)
before testing your theme on your device, make sure to:
1. Install SdkCert.cab
2. Enable Threaded Messages
3. Disable HTC Messaging (if your ROM has it)
links credit to Astronout
4. Make sure to back these files before overwriting it: thread_sms.htm and iframe_style.css these are both located in \Windows directory
5. Terminate TMAIL.EXE first before deployment. You can use Dotfred's Task Manager or Quick Menu (my favorite)
Here are the previews
Copying the files for actual testing in your device
You can use my DropToWindows application. This application makes it easier for you to copy files in \Windows directory.
Important files to be copied
mainly iframe_style.css and the Images (if there is)
If you made a theme and made some modifications in thread_sms.htm and thread_style.css make sure to tell us about it too so we know what to copy
This file: Default.htm
has debug.css in it, which contains some overrides to have borders in the elements.
Notes when creating your own theme
If you're designing for QVGA, VGA, WVGA, make sure that your images are for 240x320!! TMAIL.EXE is responsible for resizing the images for different resolutions!
some important formulas: p = pixel (VGA, WVGA)192dpi to (QVGA, SVGA)96dpi
(p * 96dpi) / 192dpi
(QVGA, SVGA)96dpi to (VGA, WVGA)192dpi
(p * 192dpi) / 96dpi
File paths in your CSS
make sure the image path before deploying to your device is file://\windows\ or else you won't see any images
e.g.
background-image: url(file://\windows\image_name.gif);
background: color url(file://\windows\image_name.gif) top left repeat;
Quote:
thanks for this past downloads
SMS.7z - [Click for QR Code] (116.1 KB, 71 views)
Why I made this? Because I found my self wasting my minute or two of my life terminating that TMAIL.EXE, Copying files in \Windows directory, waiting to load SMS client, and tapping on a conversation just to preview my small changes in the CSS. That's just it
OBSOLETE PATCH. DO NOT USE
just keeping it for the record
HTML Code:
<html><head><link rel="stylesheet" href="thread_style.css" type="text/css" /><!-- link rel="stylesheet" href="debug.css" type="text/css" / --><link rel="stylesheet" href="iframe_style.css" type="text/css" /><style>
.c_title {
font-weight: bold;
font-size: 20px;
padding: 5px;
background-color: #e5e5e5;
}
.c_screen {
}
</style></head><body><div class="c_screen" style="float: left"><div class="c_title">Portrait View</div><div class="thread" style="width:240px !important;"><div class="title">
Conversation with <a href="#" class="title">Jayson Ragasa</a></div><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span span="spempty"></span><span class="spin in">10/13/2011, 08:08PM</span><div class="read">
this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text!
</div><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:09PM</span><div class="read">
yes a very long reply
</div><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span class="spempty"></span><span class="spin in">10/13/2011, 08:10PM</span><div class="unread">
an unread message!
</div><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:11PM</span><div class="unread">
Message waiting to be sent
</div><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:12PM</span><div class="read">
Not sent message
<div><a href="#" class="retry">Message was not sent. Try again?</a></div></div></div></div><div style="float: left; border: 2px solid black; height: 550px;"></div><div class="c_screen" style="float: left"><div class="c_title">Landscape View</div><div class="thread" style="width:320px !important;"><div class="title">
Conversation with <a href="#" class="title">Jayson Ragasa</a></div><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span span="spempty"></span><span class="spin in">10/13/2011, 08:08PM</span><div class="read">
this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text!
</div><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:09PM</span><div class="read">
yes a very long reply
</div><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span class="spempty"></span><span class="spin in">10/13/2011, 08:10PM</span><div class="unread">
an unread message!
</div><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:11PM</span><div class="unread">
Message waiting to be sent
</div><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:12PM</span><div class="read">
Not sent message
<div><a href="#" class="retry">Message was not sent. Try again?</a></div></div></div></div></body></html>
OBSOLETE PATCH. DO NOT USE
just keeping it for the record
HTML Code:
<html><head><link rel="stylesheet" href="thread_style.css" type="text/css" /><!-- link rel="stylesheet" href="debug.css" type="text/css" / --><link rel="stylesheet" href="iframe_style.css" type="text/css" /><style>
.c_title {
font-weight: bold;
font-size: 20px;
padding: 5px;
background-color: #e5e5e5;
}
.c_screen {
}
.c_msgsel {
background-color: #d6ebff;
}
</style><script>
function ondown(t) {
t.style.backgroundColor = '#d6ebff';
}
function onout(t) {
t.style.backgroundColor = 'white';
}
</script></head><body><div class="c_screen" style="float: left"><div class="c_title">Portrait View</div><div class="thread" style="width:240px !important;"><div class="title">
Conversation with <a href="#" class="title">Jayson Ragasa</a></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span span="spempty"></span><span class="spin in">10/13/2011, 08:08PM</span><div class="read">
this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text!
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:09PM</span><div class="read">
yes a very long reply
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span class="spempty"></span><span class="spin in">10/13/2011, 08:10PM</span><div class="unread">
an unread message!
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:11PM</span><div class="unread">
Message waiting to be sent
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:12PM</span><div class="read">
Not sent message
<div><a href="#" class="retry">Message was not sent. Try again?</a></div></div></div></div></div><div style="float: left; border: 2px solid black; height: 550px;"></div><div class="c_screen" style="float: left"><div class="c_title">Landscape View</div><div class="thread" style="width:320px !important;"><div class="title">
Conversation with <a href="#" class="title">Jayson Ragasa</a></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span span="spempty"></span><span class="spin in">10/13/2011, 08:08PM</span><div class="read">
this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text! this is a very very long text!
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:09PM</span><div class="read">
yes a very long reply
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_out.bmp" class="state" align="top" /><a href="#" class="in">Jayson Ragasa</a><span class="spempty"></span><span class="spin in">10/13/2011, 08:10PM</span><div class="unread">
an unread message!
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:11PM</span><div class="unread">
Message waiting to be sent
</div></div><div onmouseover="ondown(this);" onmouseout="onout(this)"><img src="sms_icon_in.bmp" class="state" align="top" /><a href="#" class="out">Me</a><span class="spempty"></span><span class="spout out">10/13/2011, 08:12PM</span><div class="read">
Not sent message
<div><a href="#" class="retry">Message was not sent. Try again?</a></div></div></div></div></div></body></html>
download file below
files needed:
1. All the *.png images
2. iframe_style.css
3. thread_style.css
KEEP IN MIND!! - Don't forget to change the file paths in CSS
background-image: url('sms_in_bubble_top.png');
to
background-image: url('file://\Windows\sms_in_bubble_top.png');
--
remember when making a theme, always consider the selected msg. that's so important!!!
download v1.2fixed the outgoing top position and width and removed the white border.
Great work Nullstring.. i want to try the WP7 theme..
but can you more explain about this?..
Quote:
Originally Posted by Nullstring
KEEP IN MIND!! - Don't forget to change the file paths in CSS
background-image: url('sms_in_bubble_top.png');
to
background-image: url('file://\Windows\sms_in_bubble_top.png');
Quote:
Originally Posted by Nullstring
--
remember when making a theme, always consider the selected msg. that's so important!!!
Great work Nullstring.. i want to try the WP7 theme..
but can you more explain about this?..
Quote:
KEEP IN MIND!! - Don't forget to change the file paths in CSS
background-image: url('sms_in_bubble_top.png');
to
background-image: url('file://\Windows\sms_in_bubble_top.png');
the difference between those two are:
If you're viewing the theme via your desktop browser, it's not necessary to include the path of the .png file since the .png and .css file are located in the same directory.
and the second one, if we're deploying. We need to include this path file://\Windows\ so it knows where the .png file is located. Yes, we are copying the .css file in \Windows directory which means the .css and the .png file is in the same directory, but am not sure what's going on in TMAIL.exe why it cannot see that file. So that is like a work arond.
In my WP7 theme, there are 6 css selectors that has background-image style. So if you want to view that in your WM device, include that path "file://\Windows\" before the .png file first so you can see the images.
Quote:
remember when making a theme, always consider the selected msg. that's so important!!!
Notice the default WM standard messaging layout/theme (the plain one)? notice you can select the message and it has a light background color (mine was light blue, am not sure how I call it). For example, I want to delete a specific message in a conversation thread, I know what will be deleted because it was selected.
notice the little blue box on the right side? that's not right, because I selected the 2nd message and look where the selection background is ..
So make sure when making a theme, the selection background is aligned properly in the selected message, so the user still know what message has to be deleted in case he want's to delete, or forward, or whatever his options.
so here's WP7 theme version 2.0. Sorry guys, I cannot get rid of the black border on ComposeSubject field. It's an object (not an object element) and am not sure what it is. If you managed to get rid of it, please share
this is using custom thread_sms.htm I just added <div class="sms_box_bottom"> </div> anyway after </Inbox:ComposeSubject>
XDA Developer TV Producer Kevin wants to help make your … more
XDA Developers was founded by developers, for developers. It is now a valuable resource for people who want to make the most of their mobile devices, from customizing the look and feel to adding new functionality. Are you a developer?
Introducing XDA:DevCon – A Conference For Developers By Developers
>
[SKINNING]WM Standard SMS Messaging
Print
Email
[SKINNING]WM Standard SMS Messaging
View Profile
Visit Homepage
View Forum Posts
HTC Amaze 4G theme (help me on CSS)
Linear Mode
