- Posts: 261
- Thank you received: 32
Change Field and Text Input Border Styles
31 Jan 2014 19:05 - 04 Feb 2014 23:07 #1
by Danielle Kinney
Change Field and Text Input Border Styles was created by Danielle Kinney
Changing FC's Field Input and Text Input border styles require two (2) separate CSS changes.
The default blue border activates when the user clicks inside each field and/or uses the Tab key to traverse from field to field as shown below.
Change Field Input Border Styles:
1. Go to components/com_fox contact/css/bootstrap.css
2. Go to Line 218 and locate the following:
3. To avoid Fox Contact Upgrade overrides; copy the CSS to your “custom.css” file.
4. Change the border size, style and/or color color as desired.
Change Text Input (Free Form Text) Border Styles
1. Locate components/com_fox contact/css/bootstrap.css
2. Go to Line 216 and locate the following:
3. Change border size, style and/or color color as desired.
Sample Only:
Fox Contact Form offers you flexible design opportunities; just use your imagination.
The default blue border activates when the user clicks inside each field and/or uses the Tab key to traverse from field to field as shown below.
Change Field Input Border Styles:
1. Go to components/com_fox contact/css/bootstrap.css
2. Go to Line 218 and locate the following:
div#foxcontainer<?php echo $uid ?> textarea:focus,
div#foxcontainer<?php echo $uid ?> input[type="text"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="password"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="datetime"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="datetime-local"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="date"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="month"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="time"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="week"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="number"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="email"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="url"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="search"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="tel"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="color"]:focus{
border-color: rgba(82, 168, 236, 0.8);}3. To avoid Fox Contact Upgrade overrides; copy the CSS to your “custom.css” file.
4. Change the border size, style and/or color color as desired.
Hint: If changes do not render, then add !important to force CSS specificity and clear your browser’s cache (CTRL+F5).
Change Text Input (Free Form Text) Border Styles
1. Locate components/com_fox contact/css/bootstrap.css
2. Go to Line 216 and locate the following:
div#foxcontainer<?php echo $uid ?> textarea:focus,
div#foxcontainer<?php echo $uid ?> input[type="text"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="password"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="datetime"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="datetime-local"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="date"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="month"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="time"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="week"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="number"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="email"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="url"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="search"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="tel"]:focus,
div#foxcontainer<?php echo $uid ?> input[type="color"]:focus{
border-color: rgba(82, 168, 236, 0.8)}3. Change border size, style and/or color color 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).
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.