Drupal - Temas y diseños

En este capítulo, estudiemos sobre Themes and Layouts. Drupal se instalaráBartiktema como tema predeterminado durante la instalación. Puede seleccionar temas pagados o gratuitos desde el sitio oficial de Drupal. En general, el diseño es una disposición de texto y gráficos. Es una buena idea elegir un tema, teniendo en cuenta los diferentes diseños que utilizará en su sitio.

Step 1- Vaya al sitio oficial de Drupal y haga clic enGet Started.

Step 2 - Haga clic en All Themes como se muestra en la siguiente pantalla.

Step 3- Obtendrá una lista de temas. Seleccione el tema de su elección (permítanos seleccionarAdaptive theme como consiste Layout & General Settings, que se tratará más adelante en este capítulo) y haga clic en Version como se muestra en la siguiente pantalla.

Step 4 - Siguiente, clic derecho Download file y copie la dirección del enlace como se muestra en la siguiente pantalla.

Step 5 - También puede descargar el tema directamente haciendo clic en archive file y el módulo se descargará localmente en su computadora como se muestra en la siguiente pantalla.

Step 6 - Ir a Appearance y haga clic en Install new theme como se muestra en la siguiente pantalla.

Step 7 - Puede pegar la dirección del enlace que copió en step (4) y haga clic en el botón de instalación como se muestra en la siguiente pantalla.

Step 8 - También puede cargar el archivo del tema, en lugar de copiar la dirección del enlace, si lo ha descargado y hace clic en Install como se muestra en la siguiente pantalla.

Step 9 - Aparece la siguiente pantalla, espere hasta que se complete la instalación.

Step 10 - A continuación, haga clic en Enable newly added themes como se muestra en la siguiente pantalla.

Step 11- Por defecto, los temas están deshabilitados. Para habilitarlos, haga clic enEnable and set default como se muestra en la siguiente pantalla.

Step 12 - Haga clic en Settings como se muestra en la siguiente pantalla para configurar la apariencia de su sitio.

Step 13 - el Layout & General Settings aparece en la pantalla, en este Adaptive theme consiste en Standard layout, Tablet Layout, Smalltouch layout y Panels & Gpanels. Estas opciones controlan la configuración de pantalla para el tema AT Admin actual que ya está en uso. Cuando su sitio muestre el tema, se utilizarán estas configuraciones. Ahora, analicemos estos diseños uno por uno.

Step 14 - En Standard layout puede elegir el diseño para computadoras de escritorio, portátiles y otros dispositivos de pantalla grande.

  • Choose sidebar positions - Puede elegir la posición de la barra lateral haciendo clic en el botón de radio.

  • Set the width of each sidebar - Puede establecer el ancho de la primera barra lateral y la segunda barra lateral y la unidad en% o px o em.

  • Set the page width - Puede establecer el ancho de la página.

  • Set a max width −Puedes marcar o desmarcar para establecer el ancho máximo.

  • Media query for this layout - La consulta de medios define diferentes reglas de estilo para diferentes dispositivos de medios y, de forma predeterminada, este diseño será 1025px.

Step 15 - A continuación, haga clic en Tablet Layoutcomo se muestra en la siguiente pantalla. Los dispositivos de tableta tendrán dos orientacionesLandscape y Portrait. Puede configurar un diseño diferente para cada orientación.

Debajo Landscape tablet y Portrait tabletpuede elegir la posición de la barra lateral, el ancho de cada barra lateral y el ancho de la página. Consulta de medios paraLandscape tabletserá de ancho mínimo: 769 px y ancho máximo: 1024 px. porPortrait tablet será de ancho mínimo: 581 px y ancho máximo: 768 px

Step 16 - Ahora, haga clic en Smalltouch Layout como se muestra en la siguiente pantalla. Smalltouch layout también tendrá dos orientaciones Landscape y Portrait. Puede configurar un diseño diferente para cada orientación.

En Landscape Smalltouchpuede elegir la posición de la barra lateral y establecer el ancho. losPortrait Smalltouchsiempre se muestra en una columna con barras laterales apiladas horizontalmente debajo del contenido principal. Consulta de medios paraLandscape Smalltouch será de ancho mínimo: 321 px y ancho máximo: 580 px y para Portrait Smalltouch será de ancho máximo: 320px.

Step 17 - A continuación, haga clic en Panels & Gpanelscomo se muestra en la siguiente pantalla. El tema adaptable admite paneles receptivos y diseños de Gpanel. Para usar esta capacidad, puede usar el módulo Paneles , Display Suite (con Paneles) o los diseños de Gpanels nativos de Adaptive themes .

Puede seleccionar opciones para cada rango de dispositivos y diseñar su tipo. Veamos uno a uno.

  • Debajo Standard layoutpuede seleccionar los diseños que desea utilizar cuando el sitio se visualiza en un diseño estándar. Haciendo clic enTWO, THREE, FOUR, FIVE, SIX or INSET, puede seleccionar la disposición de las columnas como se muestra en la siguiente pantalla.

  • Siga el mismo paso para TABLET LANDSCAPE, TABLET PORTRAIT y SMALLTOUCH LANDSCAPE diseños.

Step 18 - Una vez hecho esto con todas sus configuraciones, haga clic en Save configurations como se muestra en la siguiente pantalla.