特制TB-Megamenu

Question

我正在尝试定制there的风格，因为我想做很多颜色的改变。我还想改变一下，当鼠标离开一个项目时，它会在改变回默认状态之前将这个颜色保留一段时间。我知道我总是可以在自定义样式表中更改css，其中还包括

#main-menu-wrapper .tb-megamenu .mega-nav > .active a, #main-menu-wrapper .tb-megamenu .dropdown-menu .mega-nav > .active a {
    background-color: #000;
    color: #fff;
}

但是找到我需要改变的一切都是非常重要的任务。特别是当我试图找出我需要为事物做哪些选择时，元素是活动的，或者是鼠标刚刚留下的元素。TB改变课程的事实也使它变得很困难。同时，time正在其他地方使用，我希望保留它们的默认样式，而不影响位于drupal实例中的其他站点。有什么更好的方法来实现这一点吗？还是我需要继续搜索和覆盖每个元素？

Answer 1

菜单模块有一个CSS文件夹。用它作为你的参考。它也有一个样式子文件夹，这将是最大的好处。只需将一个完整的样式/*..css文件复制到上面并对其进行修改。没必要把它找回来。

要针对特定页面上的菜单，需要通过preprocess_page钩子或上下文或其他一些首选方法将CSS类注入该页面。您需要将其设置得更接近根级别(即html或body标记)，而不是html中出现的.tb-megamenu类。完成了这些之后，您所需要做的就是将注入的类预先添加到您使用的每个选择器中，如下所示：

.tb-megamenu.style-black .nav > li > a:focus,
.tb-megamenu.style-black .nav > li > a:hover {
  background-color: #222;
  color: #7bb9e0;
}

变成：

.my-page-class .tb-megamenu.style-black .nav > li > a:focus,
.my-page-class .tb-megamenu.style-black .nav > li > a:hover {
  background-color: #222;
  color: #7bb9e0;
}