joomla - 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 カラー コードの 4 番目の値です)。

Answer 2

RocketTheme Gantry テンプレートは LESS を使用しますが、引き続き FireBug (画像を参照) などを使用して関連する CSS を見つけ、/templates/css/rt_oculus-custom.css にカスタム CSS ファイルを作成することで CSS をオーバーライドできます。