Polskie wsparcie PrestaShop
PrestaShop => Wygląd => Wątek zaczęty przez: spikezg w Wrzesień 07, 2011, 01:12:48 pm
-
Witam serdecznie, proszę o pomoc w zmianie kodu html w pliku product.tpl żeby wyrównać pola tekstowe:
(http://chynow.net/pola1.png)
a chce żeby wyglądało to mniejwiecej tak:
(http://chynow.net/pola2.png)
Z góry dziękuję za pomoc :)
-
Jako że nie ma opcji edytuj piszę jeden post po drugim.
Dla ułatwienia zamieszczam kod o którym mowa.
<!-- Customizable products -->
{if $product->customizable}
<div id="customization_block">
<h2 class="productscategory_h2">{l s='Product customization'}</h2>
<form method="post" action="{$customizationFormTarget}" enctype="multipart/form-data" id="customizationForm">
<p>
{l s='After saving your customized product, remember to add it to your cart.'}
{if $product->uploadable_files}
{l s='Allowed file formats are: GIF, JPG, PNG'}{/if}
</p>
{if $product->uploadable_files|intval}
<h2>{l s='Pictures'}</h2>
<ul id="uploadable_files">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 0}
<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if isset($pictures.$key)}<div class="customizationUploadBrowse">
<img src="{$pic_dir}{$pictures.$key}_small" alt="" />
<a href="{* $link->getProductDeletePictureLink($product,{$field.id_customization_field})*}" title="{l s='Delete'}" >
<img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
[/url]
</div>{/if}
<div class="customizationUploadBrowse"><input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />{if $field.required}<sup>*</sup>{/if}
<div class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}</div></div>
</li>
{counter}
{/if}
{/foreach}
</ul>
{/if}
<div class="clear"></div>
{if $product->text_fields|intval}
<h2>{l s='Texts'}</h2>
<ul id="text_fields">
{counter start=0 assign='customizationField'}
{foreach from=$customizationFields item='field' name='customizationFields'}
{if $field.type == 1}
<li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
{if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}<textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
</li>
{counter}
{/if}
{/foreach}
</ul>
{/if}
<p style="clear: left;" id="customizedDatas">
<input type="hidden" name="quantityBackup" id="quantityBackup" value="" />
<input type="hidden" name="submitCustomizedDatas" value="1" />
<input type="button" class="button" value="{l s='Save'}" onclick="javascript:saveCustomization()" />
<span id="ajax-loader" style="display:none"><img src="{$img_ps_dir}loader.gif" alt="loader" /></span>
</p>
</form>
<p class="clear required"><sup>*</sup> {l s='required fields'}</p>
</div>
{/if}
{if $packItems|@count > 0}
<div>
<h2>{l s='Pack content'}</h2>
{include file="$tpl_dir./product-list.tpl" products=$packItems}
</div>
{/if}
{/if}
-
Edycja stylii w CSS nie w TPL który podałeś :)
-
Dzięki za podpowiedź, ale niestety dalej mam problem. Znalazłem odpowiedzialny .css za to wyrównanie:
/* Customizable product */
#customization_block { padding:40px 0; }
.customization_block_title { margin: 4px 4px 4px 2px }
#customization_block ul { margin: 6px 6px 0 6px }
.customization_block_input { vertical-align: inherit }
img.customization_delete_icon { margin: 2px }
li.customizationUploadLine {
margin-left: 20px;
text-align: left;
clear: left;
padding: 1px;
display: block
}
div.customizationUploadBrowse { float: left }
div.customizationUploadBrowseDescription { padding: 6px; font-size:11px; }
img.customizationUploaded {
margin: 2px;
border: 1px solid #888888
}
ul.customizationUploaded {
list-style-type: none;
margin-left: 4px
}
ul.customizationUploaded li { display: inline }
ul.customizationUploaded a { text-decoration: none }
div.customizationUploaded { clear: left }
div.deletePictureUploaded { float: right }
div.deleteCustomizableProduct { float: right }
ul.typedText {
padding-left: 6px;
list-style-type: none
}
Jednak w żaden sposób nie mogę oddzielić tekstu od pola. Zmiany wyrównania stosują się do obu naraz i ciągle jest nierówno ;\.
-
Ja bym to załatwił przez width: ileś px :) wtedy zawsze będzie miało to stałą wartość więce opis będzie się zaczynał od równego miejsca.