- Posts: 261
- Thank you received: 32
Change Dropdown List Item Hover Style
03 Feb 2014 17:08 - 28 Aug 2017 20:13 #1
by Danielle Kinney
Change Dropdown List Item Hover Style was created by Danielle Kinney
When users hover over each Drodown List Item, the Fox Contact default styling activates. You'll notice the Dropdown List Item hover color changes to a gradient blue and the font color changes from black to white thus giving each Dropdown List Items the appropriate contrast.
Fox Contact uses a “.highlight” class to provide additional styling flexibility.
The next section walks through how to modify the hover states.
1. Go to "media/jui/css/chosen.css".
2. Search for the appropriated css statements shown below:
3. Change the style as desired.
Solid Color Example:
The code below utilizes a solid color (no gradient) and modified hover text color.
Gradient Sample:
Fox Contact Form offers multiple css classes giving designers a plethora of possibilities.
Fox Contact uses a “.highlight” class to provide additional styling flexibility.
The next section walks through how to modify the hover states.
1. Go to "media/jui/css/chosen.css".
2. Search for the appropriated css statements shown below:
.chzn-container .chzn-results li.highlighted
{
background-color: #3875d7;
background-image: linear-gradient(#3875d7 20%, #2a62bc 90%);
}3. Change the style as desired.
Hint: If changes do not render, then add !important to force CSS specificity and clear your browser’s cache (CTRL+F5).
We strongly discourage the practice of editing files that belong to Joomla core or third party extensions. To override the default style, put your custom code in your own stylesheet instead, otherwise your customization will be overwritten when upgrading to a newer version. If you don't know what it means, do it with the help of an expert Web Designer.
After editing Fox Contact files check carefully the file permissions and ensure that both read and write permission over this file are still granted to the web server, or you will experience problems when upgrading / uninstalling Fox Contact. If unsure, set the file permission to 777 using your ftp client.
After editing Fox Contact files check carefully the file permissions and ensure that both read and write permission over this file are still granted to the web server, or you will experience problems when upgrading / uninstalling Fox Contact. If unsure, set the file permission to 777 using your ftp client.
Solid Color Example:
The code below utilizes a solid color (no gradient) and modified hover text color.
.chzn-container .chzn-results li.highlighted
{
background-color: red !important;
background-image: none !important;
color: #f2f2f2
}Gradient Sample:
Fox Contact Form offers multiple css classes giving designers a plethora of possibilities.
Please Log in or Create an account to join the conversation.