Eliminar los extras del diseño de las tarjetas web

• Abril 26, 2024

Ahora que tenemos nuestra nueva plantilla configurada como la plantilla predeterminada para el sistema WebCards, podemos comenzar a personalizar el diseño. Como mencionamos anteriormente, solo tenemos 510 px para trabajar en nuestra página de fans de Facebook. Una forma de ahorrar espacio es eliminar el Calendario de eventos y la Nube de búsqueda a la derecha del diseño.

Calendario de Eventos y Nube de Búsqueda

La plantilla en la que tendremos que trabajar es la plantilla view_image_stats.html. Como puede ver, esta plantilla es básicamente una tabla con cinco celdas. La primera celda que contiene los enlaces del menú lateral recibe el 15 por ciento del ancho total de la tabla y las siguientes tres celdas que contienen las miniaturas reciben el 20 por ciento cada una. La última celda de la tabla que contiene el calendario y la nube tiene un 25 por ciento.

Una manera fácil de eliminar el calendario y la nube es eliminar la quinta celda de la tabla. Por supuesto, también eliminaremos el 25 por ciento de la tabla. Por lo tanto, debemos distribuir este 25 por ciento sobre las células restantes.

Primera celda: 15 se convierte en 25
Segunda celda: 20 se convierte en 25
Tercera celda: 20 se convierte en 25
Cuarta celda: 20 se convierte en 25
Quinta celda - 25

Cuando actualizamos el navegador, no vemos ningún cambio. Esto se debe a que necesitamos borrar el caché para ver el cambio. Podemos hacer esto en el Centro de administración. En la parte inferior del menú lateral, haga clic en el enlace Administrar cachés. En la página Administrar cachés, haga clic en el botón Reconstruir caché. Ahora, podemos ver que el calendario y la nube se han eliminado cuando volvemos a actualizar el navegador.

Enlace a todas las categorías

Tenemos un conjunto tan pequeño de tarjetas electrónicas, realmente no necesitamos el enlace Todas las categorías en el menú lateral. Entonces, eliminemos este enlace para que el menú lateral esté menos abarrotado. Tendremos que trabajar en otro archivo llamado functions.php. Este archivo se almacena en la carpeta de origen.

htdocs / webcards / source / functions.php

Para eliminar el enlace Todas las categorías, solo necesitamos comentar una línea de código. A partir de la línea 1410, verá un bucle foreach. Dentro de este bucle se encuentra el código que crea el enlace Todas las categorías. Para comentar esta línea, agregue // antes de la línea de código. Para ver el cambio, reconstruya el caché y actualice el navegador.

Diseño horizontal

Es posible que haya notado que en la primera página del sistema tenemos tres listas verticales de miniaturas que son Imágenes nuevas, Imágenes populares e Imágenes aleatorias. Debido a que tenemos un conjunto tan pequeño de tarjetas electrónicas, vemos cierta repetición. Sería mejor si utilizáramos un diseño diferente que enumerara todas las miniaturas en esta portada en un diseño horizontal. Luego, los enlaces en el menú lateral conducen a la vista de solo las miniaturas en una de las dos categorías. Para realizar este cambio en el diseño de la portada, necesitaremos trabajar en el archivo index.php.

htdocs / webcards / index.php

A partir de la línea 315, verá la función view_stats_page. Agregaremos una línea de código que cambiará el diseño de la plantilla para la página principal. Agregue esta línea debajo de las variables globales.

return choose_image_template ($ mensajes);

//www.mywebcards.net

Capturas de pantalla de WebCards utilizadas con permiso.

Instrucciones De Vídeo: Redmi NOTE 8 PRO, 10 TRUCOS para sacar el MÁXIMO! (Abril 2024).