Saltar al contenido

Cómo agregar un archivo CSS personalizado en Magento 2

Solución:

Para agregar CSS personalizado y cargar al final, debe configurar un tema personalizado.

  1. Crear tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-create.html
  2. Asegúrese de configurar su aplicación Magento en el modo de desarrollador.
  3. Agregue las siguientes carpetas a su tema personalizado

 app / design / frontend / [vendor] / [theme] / Magento_Theme / layout
 app / design / frontend / [vendor] / [theme] / web / css

Cree los siguientes archivos:

app / design / frontend / [vendor] / [theme] / Magento_Theme / layout / default_head_blocks.xml
app / design / frontend / [vendor] / [theme] / web / css / local-m.css
app / design / frontend / [vendor] / [theme] / web / css / local-l.css

coloque este código dentro de default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
  <head>
    <css src="https://foroayuda.es/css/local-m.css" />
    <css src="css/local-l.css" media="screen and (min-width: 768px)"/>
  </head>
</page>
  1. Aplica tu tema: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/themes/theme-apply.html
  2. Implementar recursos estáticos (SSH a magento root):

php bin/magento setup:static-content:deploy

Para agregar CSS personalizado y cargar el último

  1. Siga la estructura del directorio

    app / code / vendor / modulename / view / frontend (para admin adminhtml) / web / css / filename.css

  2. Agregue la ruta del archivo css al archivo de diseño correspondiente como se indica a continuación

    <head>
      <css src="https://foroayuda.es/Vendor_Module::css/filename.css"/>
    </head>
    <body>
     ....
    </body>
    

Puede agregar el atributo de medios que magento 2 pondrá al final del CSS en la sección principal. Establecer un ancho de solo 1 px lo habilitará en todos los dispositivos:

<head>
    <css src="https://foroayuda.es/css/homepage.css" media="all and (min-width: 1px)"/>
</head>
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *