- Posts: 261
- Thank you received: 32
Change Dropdown List Container
01 Feb 2014 00:10 - 28 Aug 2017 20:17 #1
by Danielle Kinney
Change Dropdown List Container was created by Danielle Kinney
The Dropdown List Container houses the pull down options, which you added to the Fox Contact Menu/Module Form Fields > Dropdown List Field > Item List.
The default styling utilizes a minimalist approach and offers flexibility to customize the layout using more advanced styling approaches.
1. Go to "media/jui/css/chosen.css".
2. Search for the Dropdown List Container css statements as shown below:
3. Change the Dropdown List Container background borders, shadows, etc as desired.
CSS Example:
Sample Only:
Fox Contact Form offers you flexible design opportunities; just use your imagination.
The default styling utilizes a minimalist approach and offers flexibility to customize the layout using more advanced styling approaches.
1. Go to "media/jui/css/chosen.css".
2. Search for the Dropdown List Container css statements as shown below:
.chzn-container .chzn-drop
{
}3. Change the Dropdown List Container background borders, shadows, etc as desired.
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.
Hint: If changes do not render, then add !important to force CSS specificity and clear your browser’s cache (CTRL+F5).
CSS Example:
.chzn-container .chzn-drop
{
background-color: #ccc!important;
border: 1px solid #bbb!important;
border-top: none!important;
}Sample Only:
Fox Contact Form offers you flexible design opportunities; just use your imagination.
Please Log in or Create an account to join the conversation.