首页 文章

如何自定义Magento 2主题?

提问于
浏览
0

我是Magento 2和前端开发的新手我只知道如何使用html和css,我想在Magento 2中自定义空白主题以了解事情是如何工作的,我正在阅读Magento 2的文档,但我没有'知道如何做到这一点,我想自定义我应该改变的主题?它是css文件还是孔布局(xml)文件?

我试图通过一些教程来添加css文件,但没有改变 .

这是default_head_blocks.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"   xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
   <css src="css/source/style.css" />
  </head>
</page>

这是css文件

.navigation {
    background: #40e936;
    font-weight: 700;
    height: inherit;
    left: auto;
    overflow: inherit;
    padding: 0;
    position: relative;
    top: 0;
    width: 100%;
    z-index: 3;
}

2 回答

  • -1

    要将自定义CSS主题文件添加到Magento 2,您需要:

    • 在pub / media /中创建文件custom.css

    • 转到管理>内容>配置> [选择当前使用的主题]> HTML头>脚本和样式表

    • 输入: <link rel="stylesheet" type="text/css" media="all" href="{{MEDIA_URL}}custom.css" />

    但是,不建议在Magento 2中使用上述方法 . 在Magento 2中,您应该按creating a child theme设置样式,然后编辑从父主题扩展的CSS和LESS文件 .

  • 0

    Magento 2现在可以为样式网站处理2种类型的文件:CSS文件和LESS文件,它允许您轻松管理复杂的CSS文件 . 如果您的自定义主题来自Magento默认主题Luma或Black,您可以通过覆盖LESS文件,例如更改默认文件中的变量值 . 以下是一些简单的步骤:

    • 创建一个继承黑色主题的新主题,我们可以称之为橙色主题 .

    • 添加覆盖的代码是app / design / frontend / OrangeCo / orange / web / CSS / source / _theme.less

    在橙色主题文件夹中,您可以更改按钮的颜色或所需的任何更改 . 如果您在定制时遇到很多问题,可以聘请开发人员 . 这是一个链接,如果它可以帮助kodematix

相关问题