[SKINNING]WM Standard SMS Messaging

Search This thread

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
Hello to all! I just want to contribute my work on WM Standard SMS Messaging client. The TMAIL.exe

There are two dedicated thread about skinning the standard messaging client:
1. [SKIN SMS][06 Feb 10 UPDATE!]Beautify your standard WM SMS Thread! [All Res][WM6.1+]
2. [1.10 update][Andynear style]DIY your own SMS chat UI

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
attachment.php
attachment.php
attachment.php


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

Download my workspace now

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

some important notes here

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;

thanks for this past downloads
SMS.7z - [Click for QR Code] (116.1 KB, 71 views)
 

Attachments

  • ss_standard.jpg
    ss_standard.jpg
    28.6 KB · Views: 605
  • ss_andynear.jpg
    ss_andynear.jpg
    34.9 KB · Views: 585
  • ss_preview.jpg
    ss_preview.jpg
    27.6 KB · Views: 4,377
  • ss_emulator.jpg
    ss_emulator.jpg
    33.1 KB · Views: 575
  • SMS.7z
    362.2 KB · Views: 971
  • ss_standard-2.jpg
    ss_standard-2.jpg
    64.9 KB · Views: 4,372
Last edited:

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
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 :)

-------------------------------------------------

THEMES!!!

 
Last edited:

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
OBSOLETE PATCH. DO NOT USE
just keeping it for the record

HTML:
<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>
 
Last edited:

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
OBSOLETE PATCH. DO NOT USE
just keeping it for the record

HTML:
<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>
 
Last edited:

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
Windows Phone 7 theme (DOWNLOAD v1.2!!)

Here's my Windows Phone 7 theme :)

attachment.php
attachment.php


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!!!
attachment.php


download v1.2 fixed the outgoing top position and width and removed the white border.
 

Attachments

  • wp7_device.jpg
    wp7_device.jpg
    28.4 KB · Views: 3,791
  • wp7.jpg
    wp7.jpg
    51.1 KB · Views: 2,247
  • wp7_device_2.jpg
    wp7_device_2.jpg
    35.6 KB · Views: 3,826
Last edited:
  • Like
Reactions: ai6908

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
HTC Amaze 4G theme (help me on CSS)

this is my HTC Amaze 4G theme which I've been fixing for 2 days now :(

I can't get those outgoing text to right position!! I can't use float because it will break the selection.

attachment.php


download my workspace

if you want this fix portrait mode
attachment.php


download this
 

Attachments

  • ss_amaze_test.jpg
    ss_amaze_test.jpg
    49.1 KB · Views: 3,830
  • ss_amaze.jpg
    ss_amaze.jpg
    48.8 KB · Views: 3,866

waraney

Senior Member
Jul 21, 2009
127
7
  • Like
Reactions: Nullstring

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
Great work Nullstring.. i want to try the WP7 theme.. :)

but can you more explain about this?..

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.

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 ..
attachment.php


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.

---

sorry if you guys where confused about it :D
 
Last edited:
  • Like
Reactions: poyensa

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
Windows Phone 7 2.0

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>

attachment.php
attachment.php
attachment.php
 

Attachments

  • wp7-2.jpg
    wp7-2.jpg
    40.4 KB · Views: 4,247
Last edited:

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
workspace updated. download it in Post #1

does anybody know where the source of the iframe is?

- update: found it ------

here are some JS codes used in TMAIL. It may not be complete, but that's what I got ..
Code:
var SelColor = '#d5eaff';
var unSelColor = 'transparent';
var FocusId = '0';
var blurLinkId = 'invalid';
var multiSelMode = 0;
var focusedAnchorSecondaryId = -1;
function onf(id, anchorSecondaryId) {
    if (anchorSecondaryId == undefined) {
        anchorSecondaryId = -1;
    }
    focusedAnchorSecondaryId = anchorSecondaryId;
    if (multiSelMode == 1) {
        blurLinkId = 'invalid';
        FocusId = id.id;
    } else {
        blurLinkId = 'invalid';
        elem = document.getElementById(FocusId);
        elem.style.backgroundColor = unSelColor;
        FocusId = id.id;
        id.style.backgroundColor = SelColor;
    }
};
function onfUnread(id, idImg, idBody, anchorSecondaryId) {
    onf(id, anchorSecondaryId);
    if (document.getElementById(idBody.id).className == 'unread') {
        document.getElementById(idBody.id).className = 'read';
        document.getElementById(idImg.id).src = 'Inbox:thread_read';
    }
};
var numberOfAnchors = 0;
function initAnchorsSecondaryId() {
    var i = 0;
    var anchors = document.getElementsByTagName('a');
    for (i = 0; i < anchors.length; i++) {
        anchors[i].secondaryId = i;
    }
    numberOfAnchors = anchors.length;
};
var curPage = 0;
var maxMsgsPerPage = 12;
function getSelectedElements() {
    var selectedIds = '';
    var index = curPage * maxMsgsPerPage;
    if (multiSelMode == 1) {
        elem = document.getElementById('Id' + index);
        while (elem != null) {
            if (elem.style.backgroundColor == SelColor)
                selectedIds = selectedIds + 'Id' + index + ';';++index;
            elem = document.getElementById('Id' + index);
        }
    } else {
        selectedIds = FocusId;
    }
    return selectedIds;
}
function onClickMsg(index) {
    elem = document.getElementById('a' + index);
    elem.focus();
    if (multiSelMode == 1) {
        elem = document.getElementById('Id' + index);
        onToggleSelect(elem);
    }
}
function onToggleSelect(id) {
    if (id.style.backgroundColor == SelColor)
        id.style.backgroundColor = unSelColor;
    else
        id.style.backgroundColor = SelColor;
}
function selectAll() {
    var index = curPage * maxMsgsPerPage;
    multiSelMode = 1;
    elem = document.getElementById('Id' + index);
    while (elem != null) {
        elem.style.backgroundColor = SelColor;
        elem = document.getElementById('Id' + ++index);
    }
}
function cancelSelection() {
    var index = curPage * maxMsgsPerPage;
    multiSelMode = 0;
    elem = document.getElementById('Id' + index);
    while (elem != null) {
        if (FocusId != ('Id' + index))
            elem.style.backgroundColor = unSelColor;
        elem = document.getElementById('Id' + ++index);
    }
}
function onfocusOlder() {
    blurLinkId = 'Id' + ((curPage + 1) * maxMsgsPerPage);
}
function onfocusNewer() {
    blurLinkId = 'Id' + (curPage * maxMsgsPerPage - 1);
}
function resetBlurLinkId() {
    blurLinkId = 'invalid';

HTML:
<div id='Id%1!s!' onclick='onClickMsg(%1!s!)'> %12!s! <img src='%2!s!' class='state' align=top><a class='%3!s!' id='a%1!s!' href='Inbox:THREADIFRAME %11%4!s!' onclick='onClickMsg(%1!s!)' onfocus='onf(Id%1!s!, this.secondaryId); blurLinkId = (Id%1!s!).id'>%5!s!</a><span class='spempty'> </span><span class='sp%3!s!' id='dt%1!s!'>%6!s!</span>
	<div class='%7!s!'>
		%8!s!%10!s!
		<div class='resend'>%9!s!</div>
	</div>
</div>
<div id='Id%1!s!' onclick='onClickMsg(%1!s!)'> %12!s! <img src='%2!s!' class='state' id='ImgId%1!s!' align=top><a class='%3!s!' id='a%1!s!' href='Inbox:THREADIFRAME %11%4!s!' onclick='onClickMsg(%1!s!)' onfocus='onfUnread(Id%1!s!, ImgId%1!s!, BodyId%1!s!, this.secondaryId); blurLinkId = (Id%1!s!).id'>%5!s!</a><span class='spempty'> </span><span class='sp%3!s!' id='dt%1!s!'>%6!s!</span>
	<div class='%7!s!' id='BodyId%1!s!'>
		%8!s!%10!s!
		<div class='resend'>%9!s!</div>
	</div>
</div>

<a class='retry' href='Inbox:THREADIFRAME Resend:%1!s!' onfocus='onf(Id%1!s!)'>Message was not sent. Try again?</a>



Attachment Details:
my workspace while working with htmlnote.dll and outres.dll + the tool I just wrote that will replace all unnecessary characters and just keep these chars "`1234567890-=\~!qwertyuiop[]asdfghjkl;'zxcvbnm,./~!@#$%^&*()_+|QWERTYUIOP{}ASDFGHJKL:"ZXCVBNM<>?" + \r\n
 

Attachments

  • res.7z
    231.1 KB · Views: 16
  • org.7z
    1.5 KB · Views: 13
Last edited:

bismuth89

Senior Member
Mar 25, 2010
187
20
Thanks a lot Nullstring, your skins a very nice, I used SMS-chat for a long time but these make me wanna try going back to standard sms program :) Will try your skins
 
  • Like
Reactions: Nullstring

Vladimirus

Senior Member
Sep 24, 2010
115
9
Nullstring, will this allow mms notifications such as photo's or audio files? My phone is Samsung Omnia 2 i920 model with win6.5. The built-in sms/mms are linked together. When in SMS, if a MMS comes in, it shows in sms with a small icon. Most sms programs I've tried do not allow for mms to show notification. Will your's allow for mms to be notified and seen/viewed in sms? Hoping so as I really like one of your skins here, the one with the curled bubbles!
 

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
Nullstring, will this allow mms notifications such as photo's or audio files? My phone is Samsung Omnia 2 i920 model with win6.5. The built-in sms/mms are linked together. When in SMS, if a MMS comes in, it shows in sms with a small icon. Most sms programs I've tried do not allow for mms to show notification. Will your's allow for mms to be notified and seen/viewed in sms? Hoping so as I really like one of your skins here, the one with the curled bubbles!

Would you like to try this out? :D I have not yet tried this. I don't have my MMS settings enabled (and don't want to for some bill issues)

make sure to backup the files first before testing some of the themes :)
 

Vladimirus

Senior Member
Sep 24, 2010
115
9
Would you like to try this out? :D I have not yet tried this. I don't have my MMS settings enabled (and don't want to for some bill issues)

make sure to backup the files first before testing some of the themes :)
I'm confused. So, even if I'm not going to make my own theme, I still have to edit the 2 css files to read... "background-image: url('file://\Windows\sms_in_bubble_top.png');"?(without quotation marks, of course). And where do I put the image files, and the default.htm files? Just drop them all into the Windows folder with the 2 css files? I'm just curious why you didn't just set it up so editing css wasn't necessary. Do different phones use different locations?
 
  • Like
Reactions: Nullstring

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
I'm confused. So, even if I'm not going to make my own theme, I still have to edit the 2 css files to read... "background-image: url('file://\Windows\sms_in_bubble_top.png');"?(without quotation marks, of course). And where do I put the image files, and the default.htm files? Just drop them all into the Windows folder with the 2 css files? I'm just curious why you didn't just set it up so editing css wasn't necessary. Do different phones use different locations?

you got a point :eek:
I just want to let users try the theme first in desktop that's why am not setting the file pat :D Anyway, I think that's my mistake and sorry about it :D

I will not do that again :)
 

Vladimirus

Senior Member
Sep 24, 2010
115
9
you got a point :eek:
I just want to let users try the theme first in desktop that's why am not setting the file pat :D Anyway, I think that's my mistake and sorry about it :D

I will not do that again :)
But, in my phone, do I put all the files, including image files, in the windows directory/folder? Or, just the 2 css files? What actually goes into my phone from your HTC Amaze theme 2 p.7z (I'm guessing the other HTC Amaze file that also supports landscape still isn't fixed?)or Windows Phone 7 theme 2.7z file?
 

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
But, in my phone, do I put all the files, including image files, in the windows directory/folder? Or, just the 2 css files? What actually goes into my phone from your HTC Amaze theme 2 p.7z (I'm guessing the other HTC Amaze file that also supports landscape still isn't fixed?)or Windows Phone 7 theme 2.7z file?

yep, landscape still not fixed. There are some downloads as you can see but there's no feedback about it yet. I really like to have more feedbacks about these Messaging theming so I know if anybody's having a problem. There was PM though, he's having a problem about his WM6.5.3 build 23412.

ANYWAY, yes copy them all except the Default.htm file
 

Vladimirus

Senior Member
Sep 24, 2010
115
9
yep, landscape still not fixed. There are some downloads as you can see but there's no feedback about it yet. I really like to have more feedbacks about these Messaging theming so I know if anybody's having a problem. There was PM though, he's having a problem about his WM6.5.3 build 23412.

ANYWAY, yes copy them all except the Default.htm file
Okay. Copied all but "default.htm" file to Windows folder. Rebooted phone. Opened SMS and had ... no bubbles, no text indicating incoming/outgoing, time not shown. I did have black bar on top and fully white background with only white space as separator between sent/receive messages. I have undone the changes back to original.

Having tried AndyNear's version and found it working, I compared the css files. Then, I edited yours to add the "file://\windows\ " to the appropriate lines. Now, that worked but was highly limited to only showing the following: balloons; top bar with name/number. No "time" text. No "from/to" text. And, most importantly, no mms capability. I really like the bubble style, but without the other information and mms capability, it isn't something I can use.
 
Last edited:
  • Like
Reactions: Nullstring

Nullstring

Retired Recognized Developer
Jul 15, 2009
1,177
245
Baguio
www.jaysonragasa.net
Okay. Copied all but "default.htm" file to Windows folder. Rebooted phone. Opened SMS and had ... no bubbles, no text indicating incoming/outgoing, time not shown. I did have black bar on top and fully white background with only white space as separator between sent/receive messages. I have undone the changes back to original.

Having tried AndyNear's version and found it working, I compared the css files. Then, I edited yours to add the "file://\windows\ " to the appropriate lines. Now, that worked but was highly limited to only showing the following: balloons; top bar with name/number. No "time" text. No "from/to" text. And, most importantly, no mms capability. I really like the bubble style, but without the other information and mms capability, it isn't something I can use.

thanks! I have to ask, what WM version and build are you using?
 

Top Liked Posts

  • There are no posts matching your filters.
  • 4
    Hello to all! I just want to contribute my work on WM Standard SMS Messaging client. The TMAIL.exe

    There are two dedicated thread about skinning the standard messaging client:
    1. [SKIN SMS][06 Feb 10 UPDATE!]Beautify your standard WM SMS Thread! [All Res][WM6.1+]
    2. [1.10 update][Andynear style]DIY your own SMS chat UI

    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
    attachment.php
    attachment.php
    attachment.php


    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

    Download my workspace now

    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

    some important notes here

    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;

    thanks for this past downloads
    SMS.7z - [Click for QR Code] (116.1 KB, 71 views)
    1
    Windows Phone 7 theme (DOWNLOAD v1.2!!)

    Here's my Windows Phone 7 theme :)

    attachment.php
    attachment.php


    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!!!
    attachment.php


    download v1.2 fixed the outgoing top position and width and removed the white border.
    1
    Great work Nullstring.. i want to try the WP7 theme.. :)

    but can you more explain about this?..
    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!!!
    1
    Great work Nullstring.. i want to try the WP7 theme.. :)

    but can you more explain about this?..

    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.

    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 ..
    attachment.php


    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.

    ---

    sorry if you guys where confused about it :D
    1
    Thanks a lot Nullstring, your skins a very nice, I used SMS-chat for a long time but these make me wanna try going back to standard sms program :) Will try your skins