Modificar encabezado de los bloques en OC

[Anonimo12]

Buenas tardes, después de varios meses ausentado vuelvo a trabajar a ratos en algún proyecto nuevo (ahora estoy metido también en Photoshop aparte de html). Os escribo debido a que me ha surjido una duda al querer hacer una pequeña modificación en una tienda online:

En principio decir que tengo instalado OpenCart como CMS y lo que busco es modificar el encabezado de los bloques que hay a los lados (Categorías, ofertas, Información, etc.), para que en vez de que haya un icono y un texto, salga una imagen (la cual diseño con photoshop); para que vean un ejemplo les dejo esta página: http://www.animetakus.com/

Fijaos que el encabezado de los bloques (que hay a la derecha) es una imagen, algo asi quisiera poner en OpenCart.

Después de darle 500 vueltas he llegado a la conclusión de que no vale con sustituir la imagen en /catalog/view/theme/default/image/category.png (es un ejemplo) y quitar en el documento html la palabra "Categoría" para que no aparezca, hay que hacer una modificación algo más ampliada.

Este es el código del bloque "Categorías":

<div class="box">
<div class="top"><img src="catalog/view/theme/default/image/category.png" alt="" /><?php echo $heading_title; ?></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom">&nbsp;</div>
</div>

Mi problema es que mis conociemientos de programación son un poco limitados (y más que hace un par de meses que no lo toco) asi que recurro al foro a ver si hay alguien que pueda hacerme la modificación en "Categorías" para ver cómo va y asi poder aplicarlo a los demás bloques.

Gracias por adelantado, saludos

[lubtufano]

Por lo que puedo var en el código que muestras me parece que se requiere editar los estilos; los mas recomendable seria definir tus propios estilos y agregarlos el archivo stylesheet.css que generalmente se localiza en catalog\view\theme\default\stylesheet; además para quitar el título "Categorias" es necesario borrar el código PHP que hay despues de la etiqueta IMG, asi mismo seria conveniente eliminar esta etiqueta IMG. Mi sugerencia completa es la siguiente:

1. Abre el archivo stylesheet y al final de este agrega el siguiente código.

#titulo_categorias {
margin-bottom: 10px;
background: url(' ubicación_y_nombre_de_la_imagen ') no-repeat;
}

2. Modifica el código del bloque categorias para que quede de esta forma.

<div class="box">
<div id="titulo_categorias"></div>
<div id="category" class="middle"><?php echo $category; ?></div>
<div class="bottom">&nbsp;</div>
</div>

Ahora lo importante el que deberas agregar tantos segmentos de código en el archivo stylesheet.css como bloques desees modificar y recuerda que deberas asignar a cada uno un distinto valor para el atributo ID el cual de bera coincidir con la definición de estilos correspondiente, por ejemplo para el bloque moneda le definición de estilos seria asi:

#titulo_moneda {
margin-bottom: 10px;
background: url(' ubicación_y_nombre_de_tu_imagen ') no-repeat;
}

Y en el código del bloque moneda lo importante es hacer coincidir el valor del atributo ID del segundo div (el que contiene el atributo class="top") con la definición de estilos de esta forma.

<div id="titulo_moneda"></div>

Asi para cada bloque. Por útimo quiero agregar que la imagen que utiliza OpenCart para poner en el encabezado, la que le da el color gris y los bordes redondeados, tiene unas dimenciones de 180 X 32 px. y como es esta imagen la que se sustituira lo mas conveniente seria respetar estas mismas dimensiones 180 x 32 px.

Espero que esto te sirva.

[Anonimo12]

Muchisimas gracias, me han contestado en dos lados y ambos me sirven, gracias por la respuesta +1 karma.