css - 如何使用 CSS 编辑已安装的 WordPress slider 插件的样式？

Question

我为我的 WordPress 主题安装了一个免费的响应式图像 slider 插件 Slider by WD，我需要编辑样式。具体来说，我可以看到我需要编辑类 .wds_slideshow_image_wrap_0:

您可以看到，我需要此 div 的宽度跨越其父容器 wds_container2_0 宽度的 100%:

我需要应用到 .wds_slideshow_image_wrap_0 的 max-width: 800px; 样式消失，所以我尝试将此类的样式复制并粘贴到我的样式表，并注释掉 max-width: 800px;。但如您所见，这没有任何效果。

向上滚动时，在检查器的“样式”选项卡中，我注意到这些样式的源文件/行位于 (index):101

因为在样式表中执行此操作时无法编辑样式:

#wds_container1_0 
#wds_container2_0 
.wds_slideshow_image_wrap_0 {
background-color: rgba(0, 0, 0, 0.00);
border-width: 0px;
border-style: none;
border-color: #000000;
border-radius: ;
border-collapse: collapse;
display: inline-block;
position: relative;
text-align: center;
width: 100% !important;
/* max-width: 800px; */
box-shadow: ;
overflow: hidden;
z-index: 0;
}

我怎样才能访问这个索引文件来改变这个 div 的宽度以匹配它的父容器的宽度？谢谢!

编辑:在 WordPress 中，您在浏览器中看到的 index.php 文件是其他文件的组合 - header.php、footer.php、front-page.php(或 page.php，具体取决于您的设置)，也许还有 sidebar。 php.因此，您无法在 index.php 中搜索元素 - 该文件与浏览器中呈现的内容不同。

相反，SSH 进入您的服务器并在终端中执行 grep 命令来搜索有问题的元素:

https://mediatemple.net/community/products/dv/204403684/connecting-via-ssh-to-your-server

https://www.siteground.com/tutorials/ssh/searching/

Answer 1

您可以通过样式表覆盖样式。通过定位样式所在的自定义容器或使用 !important(不可取)

例如以这个“#wds_slideshow_image_wrap_0”为目标？你可以使用

body #wds_container2_0 .wds_slideshow_image_wrap_0 {
/**your code**/
max-width: 100%;
}

或

body #wds_container2_0 div.wds_slideshow_image_wrap_0 {
/**your code**/
max-width: 100%;
}

复制上面的代码到你的样式表