Hi everyone. I'm trying to build my first App, and I've created some info in a HTML5 page, but it looks fugly because the page margins push up to the edge of the page - top sides and bottom, typographically this is a SIN. How can I make a nice margin on the page? There is a note in the Screens actions page that says "use advanced properties to configure document behaviour options", but I can't find "advanced options" anywhere - and if it means "document behaviour", which I suspect it does, there is nowhere there to set margins. Don't want to sound like a whinger - but I think this forum needs honest feedback if Buzztouch is going to succeed, so I'll say this anyway - the WYSIWYG features in this plugin are really inadequate - they may be fine if you can code, but if you're like me and can't code, and just want the benefits of a CMS for Apps, this plugin is a bit disappointing. Anyway my moan aside, can anyone help me with a solution here?

Hey David, Little confused, thinking you mean the text is "touching" the screen? Try: http://pastebin.com/QH9xnCuz If I got the idea wrong, some screenshots should be in order? ;) Cheers, David buzztouchmods.com

I'm assuming here that you're using the Custom HTML screen because it has the HTML5 icon for the plugin, and because it's the only one with the editor. That being the case, and also assuming you are creating a v2.0 app, the advanced properties section immediately follows the Save button in the WYSIWYG editor portion of the page. There is a link down there called "Document Behavior," but it doesn't control the margins of the page like you expect. Note that this plugin accepts raw HTML if you hit the Source button in the editor. Since you don't like this particular editor, you could find another one somewhere on the internet, get the text working as you'd like, copy the source from there, and paste it in this one. Then you'd have what you need! Or, you could learn a bit of HTML, which is super simple, and there a millions of examples online on how to do anything you could think of. Another idea would be to use an HTML Document plugin, create that document using whatever editor you want (CoffeeCup software offers a decent one), and then use that file in your app. So many different solutions...there's bound to be one that fits your needs just perfectly! Mark

Link to free Coffee Cup HTML editor: http://www.coffeecup.com/free-editor/

Hi David - you're right, the default text setting has the font touching the sides of the display on the screens and sides. Here is the HTML for the page: <p> <strong><span style="font-size:48px;"><span style="font-family: arial, helvetica, sans-serif; ">Earn Points Towards Free Food &amp; Drinks</span></span></strong></p> <p> <span _fck_bookmark="1" style="display: none;">&nbsp;</span></p> <p> <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 28px;">At Pizza Demo, we really appreciate your business. That's why we've created a special VIP rewards program, so you can recieve free food and drink from us for simply doing the things you already do - i.e. ordering from us. It's our way of saying "thanks" for being a loyal customer.<br /> <br /> </span></span></p> <p> <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 28px;"><span style="font-size: 36px;"><strong>Here's How it Works</strong></span><br /> To participate you must be a Pizza Demo VIP Customer. You become a VIP customer by downloading our VIP App from either the Apple App store or Google Play. Downloading our app is free. Then, whenever you buy food from us, simply use the special loyalty rewards scanner in our VIP App to scan a special rewards code whenever you shop with us.</span></span></p> <p>  </p> <p> <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 28px;">If you're picking up food from our store, the code will be on our counter, if you're ordering a home delivery, our delivery driver will show you the code when he delivers your Pizza. You are entitled to one scan every time you shop. When you have enough points for a reward, the app will show you what you have won and you can redeem your reward the next time you shop. Please note, you must have your mobile phone with you to claim your reward points.</span></span></p>

Mmmmmm....pizza!

Wow Go NW - Thats a good idea, will try looking at that. Thanks

@David hold up mate. @GoNorthWest took his time to give ya some good info. I think HTML margin codes should work, why don't you try adding it in and see what happens? I bet that should solve the problem. Cheers, David buzztouchmods.com

Ok - Tried to add the following margin tags I found online to the html <body topmargin="10"> <body leftmargin="10"> <body rightmargin="10"> Added them to the raw HTML, pressed save, the page looked the same, went back into source, the tags were gone?? Checked in Xcode the page looked the same. Feel like a dill! Could either of you guys edit the HTML of my page I posted above so I can see what to do - then I should be able to mymic that and be away?

My attempts to edit the HTML inside the HTML5 page dont work I add the following html to source <body> margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px; </body> The instructions show up in the emulator as content only, like this: margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px; When i go back into the source editor it has automatically changed my html code to <p> margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;</p> @MrDavid, I think I have implemented what you suggested here but the plugin seems to change my HTML code itself. Any other ideas?

If you dont forget the part above your actual code, you will always be fine with margins. Changed your textsize too. Just paste this in your source and see if that works for you. Looks good in my iphone simulator. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} </style> </head> <body> <p> <span style="font-size:16px;"><strong><span style="font-family: arial, helvetica, sans-serif; ">Earn Points Towards Free Food &amp; Drinks</span></strong></span></p> <p> <span style="font-size:16px;"><span _fck_bookmark="1" style="display: none; ">&nbsp;</span></span></p> <p> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">At Pizza Demo, we really appreciate your business. That's why we've created a special VIP rewards program, so you can recieve free food and drink from us for simply doing the things you already do - i.e. ordering from us. It's our way of saying "thanks" for being a loyal customer.</span></span></p> <p> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; "><strong>Here's How it Works</strong><br /> To participate you must be a Pizza Demo VIP Customer. You become a VIP customer by downloading our VIP App from either the Apple App store or Google Play. Downloading our app is free. Then, whenever you buy food from us, simply use the special loyalty rewards scanner in our VIP App to scan a special rewards code whenever you shop with us.</span></span></p> <p> <span style="font-size:16px;"><span style="font-family: arial, helvetica, sans-serif; ">If you're picking up food from our store, the code will be on our counter, if you're ordering a home delivery, our delivery driver will show you the code when he delivers your Pizza. You are entitled to one scan every time you shop. When you have enough points for a reward, the app will show you what you have won and you can redeem your reward the next time you shop. Please note, you must have your mobile phone with you to claim your reward points.</span></span></p> </body> </html>

Seems to me the most efficient way would be to wrap all the html in a div. Add a line to the css: <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} #padding {padding:0px 50px;} </style> 50px = left and right margins, change to suit. Add a div to the html: <div id="padding"> Complete code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" /> <meta content="width=device-width; initial-scale=1.0; maximum-scale=2.0; user-scalable=1;" name="viewport" /> <style type="text/css"> html{background-color:transparent;height:100%;width:100%;} body{background-color:transparent;font-size:11pt;font-family:helvetica;} img{border:0px;} #padding {padding:0px 50px;} </style> </head> <body> <div id="padding"> <p> <strong><span style="font-size:48px;"><span style="font-family: arial, helvetica, sans-serif; ">Earn Points Towards Free Food &amp; Drinks</span></span></strong></p> <p> <span _fck_bookmark="1" style="display: none;">&nbsp;</span></p> <p> <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 28px;">At Pizza Demo, we really appreciate your business. That's why we've created a special VIP rewards program, so you can recieve free food and drink from us for simply doing the things you already do - i.e. ordering from us. It's our way of saying "thanks" for being a loyal customer.<br /> <br /> </span></span></p> <p> <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 28px;"><span style="font-size: 36px;"><strong>Here's How it Works</strong></span><br /> To participate you must be a Pizza Demo VIP Customer. You become a VIP customer by downloading our VIP App from either the Apple App store or Google Play. Downloading our app is free. Then, whenever you buy food from us, simply use the special loyalty rewards scanner in our VIP App to scan a special rewards code whenever you shop with us.</span></span></p> <p> </p> <p> <span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 28px;">If you're picking up food from our store, the code will be on our counter, if you're ordering a home delivery, our delivery driver will show you the code when he delivers your Pizza. You are entitled to one scan every time you shop. When you have enough points for a reward, the app will show you what you have won and you can redeem your reward the next time you shop. Please note, you must have your mobile phone with you to claim your reward points.</span></span></p> </div> </body> </html> If you want top and bottom margins too, change the css: from: #padding {padding:0px 50px;} to: #padding {padding:10px 50px 15px 51px;} top is 10px right is 50px bottom is 15px left is 51px

Many Thanks LeonG and Raveyd, that solved my problem and has given me a solid basis for moving forward.

David, are you using bt self hosted? If so, you can hard code the changes I made into the wysiwyg template so you don't need to always change it. (it's easy enough to do, I'll post it here if you're on self hosted).

Looks like others took over this support thread ;p great! @rave post it regardless, I think it would be a good guide :) David buzztouchmods.com

@raveyed - not on self hosted as yet - still learning - sincere thanks for your help last night I was getting grumpy and i went to bed smiling, thanks to everyone who posted.

No problem David, glad to help. Feel free to drop me a pm if you come across any other html/css issues.