CODEWITHSUNDEEP
joomla
user2800148
user2800148

Reputation: 29

Rockettheme-Oculus: Menu-Item highlight color

This is the demo: http://demo.rockettheme.com/joomla/oculus/

If you navigate over the main menu, a dropdown menu opens. If you hover over a menu item (inside of the dropdown menu), the background is highlighted (in this case it´s orange). I can´t find the css command to change this color.

Thanks.

Upvotes: 1

Views: 858

Answers (3)

johanpw
johanpw

Reputation: 647

You can change the color by adding this to your CSS override file (/templates/css/rt_oculus-custom.css - create a new file if it doesn't exist, it will be found and loaded automatically by the Gantry framework). Then change all the color values as needed:

.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);
}

The best way to change the colors is with Find/replace, in order to keep the same colors for all browsers. Leave the transparency value as it is (that's the fourth value in the RGBa color code).

Upvotes: 3

Dimitri Dewaele
Dimitri Dewaele

Reputation: 10669

RocketTheme as a good forum with tutorials and solved questions. But for this you need to be a member. RocketTheme forum

As alternative, you can consult the demo-tutorial, which is also very good. RocketTheme tutorial

Upvotes: 0

Neil Robertson
Neil Robertson

Reputation: 3345

RocketTheme Gantry templates use LESS but you can still use FireBug (see image) and similar to find the relevant CSS and override the CSS by creating a custom CSS file at /templates/css/rt_oculus-custom.css.

Firebug with Oculus Template

Upvotes: 0

Related Questions