CSS Changes - edit the shadow for the input field on focus | Awake - Wordpress

(8 posts) (3 voices)

1. 

   paddy000
   Member

   Hi there,

   Before i make any changes, I just wanted to check what specifically I need to edit the change to colour of the shadow which appears around the input fields on focus.

   Thanks in advance!

   Posted 10 months ago #
2. 

   paddy000
   Member

   Just wanted to add; I don't mean on the built in form, I'm using Contact Form 7 which is inheriting the theme's styles.

   Thanks

   Posted 10 months ago #
3. 

   Elliott
   Support

   Hello paddy000,

   Let us know which version of Awake you are using and if possible send us a link to your site or take a screenshot and highlight the areas you are wanting to customize.

   It sounds like you are wanting to take the inFocus textbox styling and apply it to Awake. Is that correct?

   Posted 10 months ago #
4. 

   paddy000
   Member

   Hi there,

   Sorry for the confusion - Nothing to do with the theme inFocus, I simply mean't when you click on a text input field in a contact form (i.e. CSS effect on focus).

   When you click on a text input field, a shadow appears behind it. I want to change the colour of this shadow.

   Does that make any more sense?

   Thanks

   

   Attachments

   1. example.png (13.4 KB, 0 downloads) 9 months old

   Posted 9 months ago #
5. 

   Elliott
   Support

   I'm having trouble seeing the shadow. If possible then send us a link to your site and let us know which browser and browser version you are using.

   Posted 9 months ago #
6. 

   paddy000
   Member

   I'm using the latest version of Firefox (5)

   If you visit my Contact page there is a very subtle shadow which appears on click:

   I'm just curious as to how to changed the colour without messing up any thing else :-)

   Thanks again.

   Posted 9 months ago #
7. 

   Ruderic
   Support

   Hello,

   Go to the theme folder and open the file "header.php". Just before the </head> tag, paste this code:

   input:focus, textarea:focus {
     box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
   }

   The color is created using the rgba format. In that case, it is a black, with an opacity of 10%. You can replace that color configuration with an hex code, like this:

   input:focus, textarea:focus {
     box-shadow: 1px 1px 5px #222;
   }

   Posted 9 months ago #
8. 

   paddy000
   Member

   Thanks very much :-)

   Posted 9 months ago #

RSS feed for this topic

Reply

You must log in to post.