Jump to content

[SOLVED]Layout help!

mexas

By mexas
in Configuring and using PrestaShop

 Share

Recommended Posts

mexas Newbie

mexas

Posted
Posted

Hi,

 

I need someone to explain to me how to change the width of the tables. Image attachment.

The fields are very close together and I wanted to separate them more.

 

I searched the global.css but can not find where.

Somebody help me?

 

footer.jpg

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

mexas, what Prestashop Version do you use? (In 1.5.4.1 it spreads out nicely already)

 

probably has to go to themes/<your theme folder>/css/global.css and edit values of:

#order .delivery_options_address .delivery_option_logo, #order .delivery_option_carrier .delivery_option_logo, #order-opc .delivery_options_address .delivery_option_logo {

padding-left:10px;

width: 160px;

}

 

Maybe some other here. Find this (Ctrl-F/Command-F):

 

/* step 4 - paiement ************************************************************************** */

 

Below here are all kind of values for delivery/carrier layout blocks.

 

 

If you need more help, please add URL of website.

pascal

Link to comment
Share on other sites
mexas Newbie

mexas

Posted
  • Author
Posted

I use the free version 1.5.4.1 and and a free theme (Leoconverse).

 

I tried to change it but do not find out the right parameter ... : (

 

/theme>/css/global.css

 

/* step 4 - ************************************************************************** */
.delivery_options {
   border: 1px solid #BDC2C9;
   border-top: 0;
}
#order .delivery_options_address h3, #order-opc .delivery_options_address h3 {
/*background: url("../img/table_header.gif") no-repeat;
color: #374853;
font-weight: bold;
height: 14px;
padding: 5px 10px;
margin: 10px 0 0 0;*/
   padding: 6px 11px;
   font-size: 12px;
   color: #fff;
   text-shadow: 0 1px 0 #000;
   text-transform: uppercase;
   background: none repeat scroll 0 0 #383838;
}
#order .delivery_option_radio, #order-opc .delivery_option_radio {
   float: left;
   margin: 21px 12px;
}
#order .delivery_option label, #order-opc .delivery_option label {
   display: block;
   padding-bottom: 5px;
   padding-top: 5px;
}
#order .delivery_option label > table.resume, #order-opc .delivery_option label > table.resume {
   height: 46px;
   width: 685px;
}
#order .delivery_option.item, #order-opc .delivery_option.item {
   background: #fafafa;
}
#order .delivery_option.alternate_item, #order-opc .delivery_option.alternate_item {
   border-top: 1px solid #bdc2c9;
   background: #f1f2f4;
   border-bottom: 1px solid #bdc2c9;
}
#order .delivery_option label > table.resume td, #order-opc .delivery_option label > table.resume td {
   padding: 0 8px;
}
#order .delivery_option label > table.resume td + td, #order-opc .delivery_option label > table.resume td + td {
   width: 300px;
}
#order .delivery_option label > table.resume td + td + td, #order-opc .delivery_option label > table.resume td + td + td {
   width: 100px;
}
#order .delivery_option_carrier td {width:200px}
#order .delivery_option_carrier td + td {width:280px;}
#order .delivery_option_carrier td + td + td {width:200px}
#order .delivery_options_address .delivery_option_logo, #order .delivery_option_carrier .delivery_option_logo, #order-opc .delivery_options_address .delivery_option_logo {
   padding-left:10px;
   width: 160px;
}
#order .delivery_options_address .delivery_option_logo img, #order-opc .delivery_options_address .delivery_option_logo img { /*height: 40px;*/ }
#order .delivery_option_carrier .first_item, #order-opc .delivery_option_carrier .first_item {
   padding: 3px 5px 3px 12px;
   background:url(../img/arrow_right_2.png) no-repeat 3px 7px
}
.order_carrier_content {
   padding:15px;
   border:1px solid #ccc;
   font-size:12px;
   color:#000;
   background:#f8f8f8
}
.order_carrier_content h3 {
   padding:15px 0 10px 0;
   font-size:13px;
   color:#000
}
.order_carrier_content h3.carrier_title {padding-top:0}
.order_carrier_content input {
   position:relative;
   float: right;
   top:1px
}
#carrierTable {
   border:1px solid #999;
   border-bottom:none;
   background:#fff
}
#carrierTable tbody{
   border-bottom:1px solid #999;
}
#carrierTable  th {
   padding:0 15px;
   height: 29px;
   font-weight: bold;
   line-height:29px;
   color:#fff;
   text-transform:uppercase;
   background:url(../img/bg_table_th.png) repeat-x 0 -10px #999
}
#carrierTable  td {
   padding:15px;
   font-weight:bold;
   border-right:1px solid #e9e9e9
}
#carrierTable  td.carrier_price {
   border:none;
   width : 90px;

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

Is your shop live? Please give the URL. THis makes debugging/helping much easier.

 

From code above:

#order .delivery_option_carrier td {width:200px}

#order .delivery_option_carrier td + td {width:280px;}

#order .delivery_option_carrier td + td + td {width:200px}

#order .delivery_options_address .delivery_option_logo, #order .delivery_option_carrier .delivery_option_logo, #order-opc .delivery_options_address .delivery_option_logo {

padding-left:10px;

width: 160px; <-- did you try to change this value???

}

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted (edited)

mexas,

 

Try the following:

edit file: themes/leoconv/order-carrier.tpl (make a backup first, just in case...)

 

find this piece of code (or similar, Search for delivery_option_logo to find it quickly):

{else}
 {l s='Choose a shipping option'}
{/if}
  </h3>
  <div class="delivery_options">
  {foreach $option_list as $key => $option}
<div class="delivery_option {if ($option@index % 2)}alternate_{/if}item">
 <input class="delivery_option_radio" type="radio" name="delivery_option[{$id_address}]" onchange="{if $opc}updateCarrierSelectionAndGift();{else}updateExtraCarrier('{$key}', {$id_address});{/if}" id="delivery_option_{$id_address}_{$option@index}" value="{$key}" {if isset($delivery_option[$id_address]) && $delivery_option[$id_address] == $key}checked="checked"{/if} />
 <label for="delivery_option_{$id_address}_{$option@index}">
  <table class="resume">
   <tr>
	<td class="delivery_option_logo">					 <-- find this first-------------
	 {foreach $option.carrier_list as $carrier}
	  {if $carrier.logo}
	   <img src="{$carrier.logo}" alt="{$carrier.instance->name}"/>
	  {else if !$option.unique_carrier}
	   {$carrier.instance->name}
	   {if !$carrier@last} - {/if}
	  {/if}
	 {/foreach}
	</td>						 <-- this is closing tag 1-------------
	<td>						  <-- here we need to add a class: change to: <td class="delivery_option_carrier_name">
	{if $option.unique_carrier}
	 {foreach $option.carrier_list as $carrier}
	  <div class="delivery_option_title">{$carrier.instance->name}</div>
	 {/foreach}
	 {if isset($carrier.instance->delay[$cookie->id_lang])}
	  <div class="delivery_option_delay">{$carrier.instance->delay[$cookie->id_lang]}</div>
	 {/if}
	{/if}
	{if count($option_list) > 1}
	 {if $option.is_best_grade}
	  {if $option.is_best_price}
	  <div class="delivery_option_best delivery_option_icon">{l s='The best price and speed'}</div>
	  {else}
	  <div class="delivery_option_fast delivery_option_icon">{l s='The fastest'}</div>
	  {/if}
	 {else}
	  {if $option.is_best_price}
	  <div class="delivery_option_best_price delivery_option_icon">{l s='The best price'}</div>
	  {/if}
	 {/if}
	{/if}
	</td>			   <-- this is the closing tag of our new <td class="delivery_option_carrier_name">
	<td>				<-- here we also need to add a class name: change to: <td class="class_option_shipping_price">
	<div class="delivery_option_price">
	 {if $option.total_price_with_tax && (!isset($free_shipping) || (isset($free_shipping) && !$free_shipping))}
	  {if $use_taxes == 1}
	   {convertPrice price=$option.total_price_with_tax} {l s='(tax incl.)'}
	  {else}
	   {convertPrice price=$option.total_price_without_tax} {l s='(tax excl.)'}
	  {/if}
	 {else}
	  {l s='Free'}[/font][/size]
[size=2][font=courier new,courier,monospace]

 

So, go to the line:

<td class="delivery_option_logo">

and find the </td> closing tag of it (about 9 lines down)

one line below this we see another <td> tag. We need to add a class name to it, so that we can decorate it with css styles:

<td> <-- here we need to add a class: change to: <td class="delivery_option_carrier_name">

 

when we have done this, we need to find the closing tag of this one (about 22 lines down):

</td> <-- this is the closing tag of our new <td class="delivery_option_carrier_name">

one line below, we also have to add a class name, so we can decorate it with a css style

<td> <-- We also need to add a class name: change to: <td class="class_option_shipping_price">

 

save the file.

 

OK, so now we added two classes for our <td> tags, which we can decorate with css styles:

- class "delivery_option_carrier_name"

- class "delivery_option_shippig_price"

 

 

so now edit /themes/<your theme folder>/css/global.css:

find 'delivery_option_logo'

 

should be some code like this:

 

#order .delivery_options_address .delivery_option_logo, #order .delivery_option_carrier .delivery_option_logo, #order-opc .delivery_options_address .delivery_option_logo {

padding-left:10px;

width: 230px; <---change to 230

}

 

Then add the code shown below. (just put it right below the found code)

 

#order .delivery_option_carrier .delivery_option_carrier_name, #order-opc .delivery_options_address .delivery_option_carrier_name {

padding-left:10px;

width: 230px;

}

 

#order .delivery_option_carrier .delivery_option_shipping price, #order-opc .delivery_options_address .delivery_option_shipping_price {

padding-left:10px;

width: 230px;

}

 

save the file, and reload your check-out page. Should be something like:

post-455771-0-86777200-1377743610_thumb.jpg

 

you may need to (TEMPORARILY!!):

- turn OFF your cache and

- 'Template cache' set to "Recompile templates if the files have been updated"

in Advanced Parameters->Performance

 

to see the changes. (Don't forget to turn cache back ON afterwards!)

 

 

 

Of course you can change the added code a little to your liking.

 

Hope this helps,

pascal.

 

 

EDIT: There are some errors in above code. See fixed code in post #11 !!

Edited by PascalVG (see edit history)
  • Like 1
Link to comment
Share on other sites
mexas Newbie

mexas

Posted
  • Author
Posted

I created a test site - http://www.gazuashop.com/testes

I made the changes but nothing: (still the same!

 

The class <td class="class_option_shipping_price"> is not closed .. Is this normal?

Anyway the new class <td class="delivery_option_carrier_name"> was closed and should be fine ...

 

More suggestions?

 

 

order-carrier.tpl

<td class="delivery_option_logo">
	 {foreach $option.carrier_list as $carrier}
	  {if $carrier.logo}
	   <img src="{$carrier.logo}" alt="{$carrier.instance->name}"/>
	  {else if !$option.unique_carrier}
	   {$carrier.instance->name}
	   {if !$carrier@last} - {/if}
	  {/if}
	 {/foreach}
    </td>
    <td class="delivery_option_carrier_name">
    {if $option.unique_carrier}
	 {foreach $option.carrier_list as $carrier}
	  <div class="delivery_option_title">{$carrier.instance->name}</div>
	 {/foreach}
	 {if isset($carrier.instance->delay[$cookie->id_lang])}
	  <div class="delivery_option_delay">{$carrier.instance->delay[$cookie->id_lang]}</div>
	 {/if}
    {/if}
    {if count($option_list) > 1}
	 {if $option.is_best_grade}
	  {if $option.is_best_price}
	  <div class="delivery_option_best delivery_option_icon">{l s='The best price and speed'}</div>
	  {else}
	  <div class="delivery_option_fast delivery_option_icon">{l s='The fastest'}</div>
	  {/if}
	 {else}
	  {if $option.is_best_price}
	  <div class="delivery_option_best_price delivery_option_icon">{l s='The best price'}</div>
	  {/if}
	 {/if}
    {/if}
    </td class="delivery_option_carrier_name">
    <td class="class_option_shipping_price">
    <div class="delivery_option_price">

 

 

global.css

#order .delivery_option_carrier td {width:200px}
#order .delivery_option_carrier td + td {width:280px;}
#order .delivery_option_carrier td + td + td {width:200px}
#order .delivery_options_address .delivery_option_logo, #order .delivery_option_carrier .delivery_option_logo, #order-opc .delivery_options_address .delivery_option_logo {
padding-left:10px;
width: 230px;
}
#order .delivery_option_carrier .delivery_option_carrier_name, #order-opc .delivery_options_address .delivery_option_carrier_name {
padding-left:10px;
width: 230px;
}
#order .delivery_option_carrier .delivery_option_shipping price, #order-opc .delivery_options_address .delivery_option_shipping_price {
padding-left:10px;
width: 230px;
}

Link to comment
Share on other sites
PascalVG Newbie

PascalVG

Posted
Posted

Hi mexas,

 

The class <td class="class_option_shipping_price"> is not closed .. Is this normal?

 

I just didn't copy the whole file, just the piece of code as far as was needed to show the changes, but of course there must be a </td> somewhere.

 

 

I see a few problems (mostly caused by me, too much in a hurry typing the solution...) :

 

almost at the end of your file snippet:

</td class="delivery_option_carrier_name">

 

just leave this as </td> in closing tags is no class needed

 

 

<td class="class_option_shipping_price">

 

Ahem...My fault :wacko:: not class_option_shipping_price, but delivery_option_shipping_price ...

 

 

#order .delivery_option_carrier .delivery_option_shipping price, #order-opc .delivery_options_address .delivery_option_shipping_price {

padding-left:10px;

width: 230px;

}

 

Ahem, Ahem...My fault :(: not .delivery_option_shipping price but .delivery_option_shipping_price (change 'space' before price into _ )

 

 

 

N.B. When re-reading the code, you may have to change (extend) the two added blocks in global.css a little:

copy these two blocks to global.css ( replace for old red coloured, added changes in my previous post)

 

 

#order .delivery_options_address .delivery_option_carrier_name, #order .delivery_option_carrier .delivery_option_carrier_name, #order-opc .delivery_options_address .delivery_option_carrier_name {

padding-left:10px;

width: 230px;

}

 

and

 

#order .delivery_options_address .delivery_option_shipping_price, #order .delivery_option_carrier .delivery_option_shipping_price, #order-opc .delivery_options_address .delivery_option_shipping_price {

padding-left:10px;

width: 230px;

}

 

(These changes are needed, when you ever want to change between one step checkout and 5 step checkout. Then it should still work)

 

Sorry for confusion/faults from my side!

 

pascal

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...