Question

我是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;
}

Answer 1

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

在pub / media /
转到管理>内容>配置> [选择当前使用的主题]> HTML Head>脚本和样式表
输入：<link rel="stylesheet" type="text/css" media="all" href="{{MEDIA_URL}}custom.css" />

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

Answer 2

Magento 2现在可以处理两种样式的网站样式文件：CSS文件和LESS文件，这使您可以轻松管理复杂的CSS文件。如果您的自定义主题来自Magento默认主题Luma或Black，则可以通过例如更改默认文件中变量的值来覆盖LESS文件。以下是一些简单的步骤：

创建一个继承自黑色主题的新主题，我们可以将其称为“橙色”主题。
添加重写代码是 app / design / frontend / OrangeCo / orange / web / CSS / source / _theme.less

在橙色主题文件夹中，您可以更改按钮的颜色或所需的任何更改。如果自定义时遇到很多问题，可以聘请开发人员。如果可以帮助kodematix

，请点击这里

如何自定义Magento 2主题？

2 个答案: