[Resuelto] Separación entre colores

[lk2_89]

Buenas tardes:

 

indagando por el foro, he encontrado la manera de que en la ficha de producto, se muestre tanto el color como el nombre del color. La cosa es que los nombres se pisan entre ellos, supongo que será porque me falta algo (en la imagen se puede apreciar).

 

¿Hay alguna manera de que cada color, con su respectivo nombre, aparezca línea por línea? Es decir: cuadro rojo, nombre rojo; en la siguiente línea, el siguiente color; y así...

 

Adjunto también como tengo ahora mismo el archivo product.tpl, para que puedan guiarme mejor o entender que es lo que tengo ahora mismo en él.

Edited September 12, 2017 by lk2_89 (see edit history)

[lk2_89]

Vale, he conseguido poner los colores uno debajo de otros. El problema es que ahora el nombre está dentro del cuadrado y yo necesito que esté a la derecha. Además, en el caso de Verde Petróleo, necesito que se vea el nombre en una sola línea.

 

EDITO: ya he conseguido arreglarlo. Dejo el trozo de código que he usado por si a alguien le sirve en un futuro:

<ul id="color_to_pick_list" class="clearfix">
														{assign var="default_colorpicker" value=""}
														{foreach from=$group.attributes key=id_attribute item=group_attribute}
															{assign var='img_color_exists' value=file_exists($col_img_dir|cat:$id_attribute|cat:'.jpg')}
															<li{if $group.default == $id_attribute} class="selected"{/if}>
																<a href="{$link->getProductLink($product)|escape:'html':'UTF-8'}" id="color_{$id_attribute|intval}" name="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" class="color_pick{if ($group.default == $id_attribute)} selected{/if}"{if !$img_color_exists && isset($colors.$id_attribute.value) && $colors.$id_attribute.value} style="background:{$colors.$id_attribute.value|escape:'html':'UTF-8'};"{/if} title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}">
																	{if $img_color_exists}
																		<img src="{$img_col_dir}{$id_attribute|intval}.jpg" alt="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" title="{$colors.$id_attribute.name|escape:'html':'UTF-8'}" width="20" height="20" />
																	{/if}
																</a>
															</li>
															{$colors.$id_attribute.name}
															<br/><br/>
															{if ($group.default == $id_attribute)}
																{$default_colorpicker = $id_attribute}
															{/if}
														{/foreach}
													</ul>

Básicamente lo que he añadido al product.tpl de mi plantilla es:

 

Los dos saltos de línea <br/> tras cerrar el elemento </li> y entre medio he colocado el nombre de la variable del color (que la encontré en otro tema de este foro).

Edited July 6, 2017 by lk2_89 (see edit history)