Change colour of contact us form & pretty photo

davidturnbull72

Hi,

I have tried to modify the colour of the contact us in focus contact us text fields using the theme options and css but without success.  Please can you advise how to change the background colour of the text boxes on the contact us form when the user selects them (in focus).

http://www.teodosialloyd.com/wordpress/get-in-touch/

Also, the prettyPhoto functionality is poor on mobile devices, please can you advise how to disable this functionality for mobile devices only.

http://www.teodosialloyd.com/wordpress/autumn-winter-2015-collection/

Thank you

Albert

Hi,

to change focus color for form inputs, please use below css:

input[type="text"]:focus, input[type="tel"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus, select:focus { background-color: #000 !important; color: #FFF !important; }

Of course we got an option to disable prettyPhoto on mobile devices only. You can do this under Theme options > Addons & Plugins > Addons section.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

davidturnbull72

Hi,

I have already tried doing that CSS and it doesn't make any difference.  I have put it in my child style.css.

http://www.teodosialloyd.com/wordpress/get-in-touch/

I have also tried the disable mobile device for prettyPhoto and that doesn't have any affect.  In fact none of the options have any affect.  

This is the page in question:

www.teodosialloyd.com/wordpress/autumn-winter-2015-collection/

The page is constructed using the the Visual Composer Image Gallery component.  If for some reason this is causing the issue and I need to use the Muffin Builder instead, please could you advise how to produce the same look / functionality.

Also, I notice that when I close the prettyPhoto windows it puts a #! on then end of the URL means that attempts to reload the page afterwards fail.

Thanks for your help with these issues.

Albert

We tested this css on our side and it works fine so the problem is somewhere on your side. It's probably because of child theme. We recommend to paste this css under Theme options > Custom CSS & JS > Custom CSS section. But remember if you did any css mistake in this case, any css after corrupted line won't work.

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

davidturnbull72

Ahhhhh - that's why !  I only ever put customisation into the child's style.css, and in this particular case I had imported demo content first - which had put CSS in the Customer CSS section of the theme options !

Lesson learnt on that one.

Thank you for that, but can you also please advise on the prettyPhoto issue which is more critical.

Many thanks for your help.

Albert

This is how it supposed to work. You can see the same behavior on VC demo http://vcpreview.com/page-examples/landing-page/

Learn more: Video Tutorials | How To | FAQ Vote on what comes next

davidturnbull72

Hi - I'm not sure what you are showing me here.  I don't want the clicked image to display in prettyPhoto when viewed on a mobile device.  I have ticked the 'Disable on Mobile only' option in the theme options - but it doesn't have any affect.

davidturnbull72

OK, I'm displaying the images / products differently now and will be using woocommerce instead to display catalogue pages / product information etc.  However, in the theme options I have specified 'Show secondary image on hover' yet when viewing the products in the shop the hover doesn't work.  What is meant by 'Seconday image' and where do I ad the secondary image ?  I have added multiple images to the product gallery, and I would expect the first of these to be the secondary image.

Many thanks.

davidturnbull72

Sorry - I have this working now.  Thank you.