{"id":16757,"date":"2020-12-24T10:51:50","date_gmt":"2020-12-24T08:51:50","guid":{"rendered":"https:\/\/www.hiberus.com\/crecemos-contigo\/?p=16757"},"modified":"2024-04-08T11:10:26","modified_gmt":"2024-04-08T09:10:26","slug":"liferay-themes-que-es-como-aplicar","status":"publish","type":"post","link":"https:\/\/www.hiberus.com\/crecemos-contigo\/liferay-themes-que-es-como-aplicar\/","title":{"rendered":"Liferay Themes: \u00bfqu\u00e9 es un tema y c\u00f3mo los aplicamos?"},"content":{"rendered":"

Los Theme o Temas es lo que permiten asignar un dise\u00f1o a nuestras webs desde la configuraci\u00f3n de un CMS.<\/p>\n

Los CMS por defecto tienen aplicado un theme con un dise\u00f1o sencillo, sin ning\u00fan color que destaque; digamos que es un esqueleto, est\u00e1 en blanco. Por lo tanto, ser\u00e1 necesario desarrollar un tema personalizado con la marca y estilo gr\u00e1fico de nuestro producto o cliente<\/strong>. A su vez, Liferay<\/a> nos permite asignar Color Schemes, para diferenciar por ejemplo, por colores las secciones de nuestra web.<\/p>\n

\u00bfQu\u00e9 es un theme?<\/h2>\n

En un theme principalmente se define la apariencia (colores, tipograf\u00edas, tama\u00f1os\u2026) de todos los componentes que utilizamos en nuestras webs (galer\u00eda de fotos, formularios, buscador, acordeones) y elementos b\u00e1sicos-comunes (encabezados, p\u00e1rrafos, botones), o lo que es lo mismo se define un sistema de dise\u00f1o<\/strong>.<\/p>\n

\"\"<\/p>\n

El equipo de UX\/UI previamente habr\u00e1 creado unos prototipos<\/a>, pensando en todos esos componentes que utilizaremos en nuestro portal. Una vez aprobado por el cliente el dise\u00f1ador\/desarrollador frontend \u00abtraducir\u00e1\u00bb esos prototipos a html, css, javascript…<\/p>\n

\u00bfQu\u00e9 es un Color Scheme?<\/strong><\/h2>\n

Liferay, adem\u00e1s de permitirnos asignar un theme, nos da la posibilidad de desarrollar y posteriormente asignar diferentes Color Schemes<\/strong>. En esos Color Scheme se incluyen hojas css con variaciones respecto al theme base. Los Color Scheme<\/em> se pueden asignar tanto a una \u00fanica p\u00e1gina como a grupos de ellas. Su uso m\u00e1s com\u00fan es el cambio de colores, tipograf\u00edas… pero se puede aplicar un css\/apariencia completamente distinto.<\/p>\n

\u00bfC\u00f3mo los aplicamos?<\/strong><\/h2>\n

Desde el Panel de Control de nuestro portal: Generador del sitio > P\u00e1ginas del sitio > P\u00e1ginas p\u00fablicas\/privadas > Configuraci\u00f3n<\/em><\/p>\n

\"\"<\/p>\n

Accedemos al panel de Apariencia<\/em> y all\u00ed veremos que theme y color scheme hay seleccionados. En este ejemplo est\u00e1 seleccionado nuestro theme \u00abMy theme\u00bb y el color scheme \u00abPr\u00edmary color scheme\u00bb.<\/p>\n

Si quisi\u00e9ramos aplicar otro themes deber\u00edamos hacer click en el bot\u00f3n \u00abCambiar tema actual\u00bb.<\/em><\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Se abre un modal con los theme existentes: nuestro theme \u00abMy theme\u00bb y el theme \u00abClassic\u00bb, que es el theme por defecto y base de Liferay.<\/p>\n

\"\"<\/p>\n

<\/h2>\n

Bootstrap y Clay\/Lexicon<\/strong><\/h2>\n

En lo que se refiere a la estructura de archivos, Liferay incluye frameworks como Bootstrap<\/a> o Clay<\/a>\/Lexicon<\/a>. Los frameworks disponen de un amplio conjunto de componentes, clases css y un grid ya definidos que facilitan el trabajo, tanto a dise\u00f1adores como a desarrolladores. No es necesario crear de cero todo un sistema de dise\u00f1o. \u00a0Solo modificaremos lo que es diferente en nuestro dise\u00f1o.<\/p>\n

Liferay desde su versi\u00f3n 6.2 integra en sus themes el framework Bootstrap. En sus \u00faltimas versiones DXP 7.1 y 7.2 actualizaron la versi\u00f3n integrando Bootstrap 4.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Liferay adem\u00e1s desde la versi\u00f3n DXP 7 desarrolla una \u201ccapa\u201d m\u00e1s, ampliando Bootstrap con su propio framework. El equipo de Liferay estudio el framework de Bootstrap y creo Clay<\/a>\/Lexicon<\/a> a\u00f1adiendo m\u00e1s componentes, iconos, funcionalidades js y modernizo el dise\u00f1o con un nuevo estilo.<\/p>\n

 <\/p>\n

\"\"<\/p>\n

 <\/p>\n

Liferay es un CMS muy potente y vers\u00e1til con multiples posibilidades y herramientas para poder personalizar nuestras webs y sus contenidos, tanto a desarrolladores como a editores.\u00a0Si quieres saber m\u00e1s sobre los theme de Liferay y aprender a hacer el tuyo propio, te lo explicamos todo en el post creaci\u00f3n de temas con Liferay 7.<\/strong><\/a><\/p>\n

Adem\u00e1s, si quieres conocer algunos de nuestros\u00a0casos de \u00e9xito de Liferay<\/a>\u00a0<\/strong>y\u00a0ejemplos de portales hechos con Liferay<\/strong>, puedes ver c\u00f3mo lo hemos hecho para clientes como Gobierno de Arag\u00f3n, El Corte Ingl\u00e9s o\u00a0Walgreens Boots Alliance.<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

\n
\n
\n
\n

\u00bfQuieres m\u00e1s informaci\u00f3n sobre nuestros servicios de Liferay?<\/p>\n

Contacta con nuestro equipo de Liferay<\/p>\n <\/div>\n

\n \n
\n

<\/p>

    <\/ul><\/div>\n
    \n
    \n<\/fieldset>\n
    \n\t
    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t\t

    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t

    <\/span>\n\t\t\t<\/p>\n\t\t<\/div>\n\t<\/div>\n\t

    \n\t\t
    \n\t\t\t