Rockettheme-Oculus：菜单项高亮颜色

Question

这是演示：http://demo.rockettheme.com/joomla/oculus/

如果您在主菜单上导航，则会打开一个下拉菜单。如果将鼠标悬停在菜单项上（在下拉菜单中），背景将突出显示（在本例中为橙色）。我找不到用于更改此颜色的css命令。

感谢。

Answer 1

您可以通过将其添加到CSS覆盖文件（/templates/css/rt_oculus-custom.css - 更改颜色来创建新文件（如果它不存在），它将由Gantry框架自动找到并加载。然后根据需要更改所有颜色值：

.gf-menu .dropdown li:hover >.item, .gf-menu .dropdown li.active >.item {
color: #ffffff;
background-color: rgba(235,167,74,0.02);
background-image: -webkit-gradient(linear,left top,right top,0 0,0 100%,from(transparent),color-stop(30%,rgba(235,167,74,0.2)),to(rgba(235,167,74,0.7)));
background-image: -webkit-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: -moz-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: -ms-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: -o-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b2eba74a',GradientType=1);
border-right: 1px solid #EBA74A;
}


.gf-menu .dropdown li:hover:before, .gf-menu .dropdown li:hover:after, .gf-menu .dropdown li.active:before, .gf-menu .dropdown li.active:after {
background-color: rgba(235,167,74,0.02);
background-image: -webkit-gradient(linear,left top,right top,0 0,0 100%,from(transparent),color-stop(30%,rgba(235,167,74,0.2)),to(rgba(235,167,74,0.7)));
background-image: -webkit-linear-gradient(left,transparent,rgba(255, 226, 15, 0.2) 30%,rgba(70, 82, 218, 0.7));
background-image: -moz-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: -ms-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: -o-linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-image: linear-gradient(left,transparent,rgba(235,167,74,0.2) 30%,rgba(235,167,74,0.7));
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000',endColorstr='#b2eba74a',GradientType=1);
}

更改颜色的最佳方法是使用“查找/替换”，以便为所有浏览器保留相同的颜色。保持透明度值不变（这是RGBa颜色代码中的第四个值）。

Answer 2

RocketTheme Gantry模板使用LESS但您仍然可以使用FireBug（参见图片）和类似的方法来查找相关的CSS并通过在/templates/css/rt_oculus-custom.css上创建自定义CSS文件来覆盖CSS。

Answer 3

RocketTheme是一个很好的论坛，有教程和解决的问题。但为此你需要成为一名成员。 RocketTheme forum

作为替代方案，您可以参考演示教程，这也非常好。 RocketTheme tutorial