Docs

[draper3000]

Good afternoon.

I’ve added a ‘quick quote’ contact form to the top of our website using the Header Widget.

I’ve changed the ‘+’ icon to a custom image.

Which you can see on my site
http://www.stormystudio.com

I can’t figure out the CSS to have the image changed when ‘rolled over’, when ‘open’ and ‘closed’

I’d also like to change the image once the contact form has rolled out, as it’s not currently clear you need to press the button again to close the contact form.

So I’d like 3 states for the image.

– When the header widget is closed
– Roll Over
– When the header widget is open.

Many thanks for any assistance you can give.

The CSS code I currently have to control this is:

.x-icon-plus-circle:before {
content: url("http://stormystudio.com/wp-content/uploads/2016/07/Quick-Quote-02.png");
color: white;
}

.x-btn-widgetbar {
  top: -45px;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

.wpcf7 input {
  color: #ffffff !important;font-size: 18px;}

.wpcf7 textarea {
  color: #ffffff !important;font-size: 18px;}

.wpcf7-form p{
    font-size : 20px;
    color: #666;
}

[draper3000]

Also if there’s a way to have the widget fade up 3 or 4 seconds after the rest of the site that would be great…

[Christian]

Hey there,

Regretfully this isn’t a feature offered by X. It could be possible with custom development, but this would be outside the scope of support we can offer. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding. Take care!

[Author]

Posts