正在更改订阅框样式

Question

我添加了一个订阅框小部件，需要更改样式以将提交按钮放入输入框中。目前看起来是这样的：

在此处输入图像描述

[在此输入图像描述][2]

我希望它看起来像这样：[2] ：https://i.stack.imgur.com/Z4Aqe.png

我知道如何使用纯html，但我不知道如何在保持功能的同时更改Wordpress小部件html。这是小部件代码：

<!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:group -->
<div class="wp-block-group"><div class="wp-block-group__inner-container"><!-- wp:genesis-blocks/gb-newsletter {"instanceId":0} /--></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group --></div></div>
<!-- /wp:group -->

提前谢谢。

Answer 1

这是从WordPress的新的基于块的语法(背景(输出的标记

它不完全是HTML，因为如果你编辑它，它不会像你期望的那样呈现；它将中断，因为额外的块代码(屏幕上没有显示(只期望确定。

根据你想投入的时间，这里有几个选项：

1. 确定块设置中是否已内置块样式选项(边框、字体、字体大小等(。查看genesis blocks文档来验证这一点。这将是做你想做的事情最简单的选择，但如果你问这个问题，我猜这个区块没有这些选择。

2. 这可能是最好的方法：
   在组块容器的右侧，创建一个如图所示的css类。然后，转到主题的CSS；添加该CSS类的选择器，然后开始添加所需的规则。这可能需要一些尝试和错误，因为你可能需要编写一些额外的选择器，并提高特定性，这样你就可以按照自己的意愿进行风格设计，并覆盖其他已经编写的规则。

(您可能还需要在规则中包含!important，但这是最后的手段，不是编写CSS的最佳实践(

您可能还需要为gb时事通讯块执行此操作。

3. 编写自己的区块(令人沮丧的是，它有很高的学习曲线，imho(；这将提供最多的定制，但将花费大量时间