Hi all, In step3 of the checkout I would like to have the extra fields titles above their respective fields as opposed to the left of them, as this is for my mobile site and the current layout makes the checkout step3 too wide. Could you please tell me where the {$extra_listing_fields} is located, and which part of the code I should amend ? If possible I would also like to do the same for modifying an ad. Thanks in advance Jason
Hey Jason, I was originally thinking about the user side, but i believe you can just use basic CSS to get your desire results: #extrafields p #extrafields label #extrafields select #extrafields input
Hi Freeze Thanks for the help but it does not seem to make any difference (that is assuming I have it set up correctly). Here is what I did I took: #extrafields p #extrafields label #extrafields select #extrafields input and added it to the checkout part of my css stylesheet, and added a test font size to see if it worked, but it never did: #extrafields p { font-size: 18px; } #extrafields label { font-size: 18px; } #extrafields select { font-size: 18px; } #extrafields input { font-size: 18px; } Assuming I have it set up correctly any other thoughts please?
Not sure as I haven't tested this, but you could try this in your stylesheet: #extrafields select::before, #extrafields input::before, #extrafields textarea::before /* add any other selectors you want to this list */ { content: "<br />"; }
You could just put this into the existing jquery javascript "$(document).ready(function()" Add this"$("#form label").after("<br />");" line right before the very last "});" (around line #114). Your new ready function should END like this: Code: $("#section").change(function() { $("#response").show() //alert($('#section option:selected').val()); $.ajax({ url: 'ajax.php', data: 'action=extra_listing_fields§ion=' + $('#section option:selected').val(), type: 'post', success: function (msg) { $("#response").html(msg); } }); }); // Testing jQuery to add a line break after the label elements to the form $("#form label").after("<br />"); }); This will add a <br /> right after the closing </label> element in your form. Bear in mind this will do this for every <label> element, not just the extra fields. The extra fields themselves are not contained in any special "id" or "class". So you will need to revert any changes that you made in the other form elements. So, if you've manually added "<br />" in the form for other elements that are static and not added by smarty.
Hi Mike, I am assuming you mean for me to add this to checkout/step3 ? if so I have done the following, but it is still not playing ball {if $checkoutRequireShortDesc=="Y" && $checkoutDisShortDesc=="Y"} ,shortdescription: "required" {/if} {if $checkoutRequireDesc=="Y" && $checkoutDisDesc=="Y"} ,description: "required" {/if} {literal} }, messages: { title: "{/literal}{$smarty.const.LANG_REQUIRED}{literal}" {/literal} {if $checkoutDisURL=="Y"} ,url: "{$smarty.const.LANG_URL_REQUIRED}" {/if} {if $checkoutRequirePrice=="Y" && $checkoutDisPrice=="Y"} ,price: "{$smarty.const.LANG_REQUIRED}" {/if} {if $checkoutRequireShortDesc=="Y" && $checkoutDisShortDesc=="Y"} ,shortdescription: "{$smarty.const.LANG_REQUIRED}" {/if} {if $checkoutRequireDesc=="Y" && $checkoutDisDesc=="Y"} ,description: "{$smarty.const.LANG_REQUIRED}" {/if} {literal} }, // set this class to error-labels to indicate valid fields success: function(label) { // set as text for IE label.html(" ").addClass("checked"); } }); $("#section").change(function() { $("#response").show() //alert($('#section option:selected').val()); $.ajax({ url: 'ajax.php', data: 'action=extra_listing_fields§ion=' + $('#section option:selected').val(), type: 'post', success: function (msg) { $("#response").html(msg); } }); }); // Testing jQuery to add a line break after the label elements to the form $("#form label").after("<br />"); }); function deleteUpload(fID) { var txt = "{/literal}{$smarty.const.LANG_JS_DELETE_CONFIRM}\n{$smarty.const.LANG_JS_NOT_UNDONE}{literal}"; {/literal}{if $id<>''}var pID = {$id};{/if}{literal} $.prompt(txt,{ buttons:{Delete:true, Cancel:false}, prefix:'cleanblue', callback: function(v,m){ if(v){ $.ajax({ url: 'ajax.php', data: 'action=delete_upload&id=' + pID +'&fID='+fID, type: 'post', error: function(){ $.prompt('An Error Occured while removing this'); }, success: function (msg) { $('#del_'+fID).fadeOut("fast"); $('#del_'+fID).slideUp("slow"); $('#del_'+fID).hide('slow', function(){ $(this).remove(); }); } }); } else{} } }); } {/literal} {/strip} //--> </script>
Jason, I have no idea what you're posting. You need to follow the instructions that I posted. The checkout/step3.tpl file has the javascript above all of the html of the form. This does indeed work as I actually tested it locally. ALL of the javascript needs to be together where it was originally and you need to simply add the extra line EXACTLY as I posted it. You are not replacing anything, you are simply adding the additional line within the ready function. What you posted has javascript all over the place without even a beginning <script>, etc. I would recommend that you start with a copy of the original again.
Hi Mike, Yes I did get it sorted. I did add the code as you said but it still was not line breaking correctly. I discovered it was because some of the titles in the extra fields were a bit long, therefore I amended the width of the forms section in the css file. now all works and looks as it should. Many thanks for your valued input once again. Jason