Return to previous page

Banner Image box to have bordered button + hover on banner image box

This topic has 8 replies, 3 voices, and was last updated 9 years, 11 months ago ago by Eva Kemp

Jimbo

Participant

March 1, 2015 at 15:53

Hi there,

I am adding a banner imaage box using the visual composer, your boxed theme setip using this but I cant get it to hover like that does on your fullwidth demo does under the main image slider here: https://www.8theme.com/demo/woopress/fullwidth/

Instead of having read more I would like to use a medium bordered button under some text but I tried adding the shortcode and it dd not work?

What code would I use to inlude a bordered button inside the banner image?

website in private content

Please, contact administrator
for this information.

#46472 Copied

7 Answers

Jimbo

Participant

March 1, 2015 at 23:35

I had problems doing this with the visual composer using the banner option, I have to use the info box setting and then add the image and text that way in the end, using the banner option it would not fully display on mobile / iPad.

I would still like to have the info box have a hover effect like the fullwidth demo, please see my website and the info boxes I have created.

many thanks

Please, contact administrator
for this information.

#46486 Copied

Jimbo

Participant

March 2, 2015 at 10:56

I would also like to change the hover on buttons that are btn medium that are not filled and have the border.

I would like to change the border colour and the hover, what code do I add to the custom.css please ?

#46533 Copied
Eva Kemp

Support staff

March 2, 2015 at 11:30
Hello,

You can select hover effect in Banner element settings > Hover effect.
We added “Read more” as a simple text with a link:
https://s3.amazonaws.com/fvd-data/notes/168674/1425291535-S22RQ7/screen.png

But you can add button using shortcode [button type=" " size=" " icon= " " title=" " url=" "] as shown on our demo:
https://www.8theme.com/demo/woopress/fullwidth/?page_id=15811

If you want to hover effect for Info box element you can try to use this code in custom.css file:

.aio-icon-component:hover { background-color: #dcdad6; }

Do you want to change green hover color on buttons?
Please give us direct page link where you want to customize buttons.

Thank you.
Regards,
Eva Kemp.
#46541 Copied
Jimbo

Participant

March 2, 2015 at 13:14

Hi Eva,

thanks for this.

The buttons are the non filled ones on the home page, I would like the border to be #719400 and the hover to be #719400 instead of black.

page in private content, thank you.

Please, contact administrator
for this information.

#46569 Copied
Brian Johnson

Member

March 2, 2015 at 15:07
Hello Jimbo.

Please check your site now.
I have added following code into the custom.css:

.btn.medium, .button.medium:hover{border-color: #719400 !important;} .btn:hover {background-color:#719400 !important;)

With best regards
Brian Johnson
#46606 Copied
Jimbo

Participant

March 2, 2015 at 19:02

Thanks Brian, you are a gent.

#46705 Copied

Eva Kemp

Support staff

March 2, 2015 at 19:25

Hello,

You’re welcome.

Regards,
Eva Kemp.

#46712 Copied
Viewing 8 results - 1 through 8 (of 8 total)

The issue related to '‘Banner Image box to have bordered button + hover on banner image box’' has been successfully resolved, and the topic is now closed for further responses

Banner Image box to have bordered button + hover on banner image box

Recent Topics

Helpful Topics

Useful links WooCommerce & WordPress

Browse by popular tags:

Explore our best WordPress WooCommerce Themes collection