Return to previous page

Slider Buttons - by jnunoalves - on WordPress WooCommerce support

This topic has 27 replies, 4 voices, and was last updated 10 years, 8 months ago ago by Eva Kemp

jnunoalves

Participant

April 3, 2015 at 18:44

Hello,

I’m creating the sliders to my home page:

http://www.lingerienoire.com/home-page/

For now the sliders are only composed by one layer that contains the buttons.
I’ve used the revolution slider styes and created the buttons as I wanted (transparent with different hover effects), but if I will add standard links to those buttons, the style colors will be overwritten by theme color (I want cyan hover effect, and it will be replace with my 2nd color #b29600, underlined).

I can I stop that override and put a link without changing my revolution slider style?

Tks in advance

PS. Please, don’t ask me to read the manuals or use short codes, I’ve already tried and what I have now it’s all I managed to do. I’m asking for help.

#54577 Copied Theme version: 2.6.3 WooCommerce version: 2.3.7

26 Answers
Eva Kemp

Participant

April 4, 2015 at 08:43
Hello,

Please add this code in custom.css file:

.tp-caption.lncyan:hover, .lncyan:hover, .tp-caption.lnpurple:hover, .lnpurple:hover { background-color: cyan; }

How to create custom.css you can watch in this tutorial.

Thank you.
Regards,
Eva Kemp.
#54675 Copied
jnunoalves

Participant

April 4, 2015 at 09:59

Hello Eva,

Tks but it didn’t solve (or I am doing something wrong). Please check the first slider.
All I would like to have is a behavior similar to what your buttons have (they hover and are linked)

Regards

José

#54695 Copied

Eva Kemp

Participant

April 4, 2015 at 12:39

Hello,

As I see the button is linked:
http://storage4.static.itmages.com/i/15/0404/h_1428147462_3796835_f498858e27.png
It leads to the brand page.
Please clarify what exactly you’re trying to achieve. Show us screenshots.

Thank you.
Regards,
Eva Kemp.

#54703 Copied

jnunoalves

Participant

April 5, 2015 at 22:27

Hello Eva,

The link works but the issue is the format.

In the second slide, the button doesn’t have a link and have the format that we want to achieve (transparent with black border, on hover black with purple font). The first slide was defined as the second, but when we added the link, on hover it got the format that you showed on your screenshot (underline with gold color) that we don’t want at all.

What we would like to have is, that on hover, it wouldn’t change the format that we defined but it would be linked (as it is now).

I hope that my English is clear enough.

Thanks

José

#54773 Copied
Eva Kemp

Participant

April 6, 2015 at 10:27
Hello,

Please add this code in custom.css file:

.tp-caption.lncyan.sfr.tp-resizeme.start a:hover { color: rgb(210,178,203) !important; }

Regards,
Eva Kemp.
#54826 Copied
jnunoalves

Participant

April 6, 2015 at 14:02

Hello Eva,

It is partially solved. The colors are all fine but I still would like to remove the underline effect.

Thanks

José

#54860 Copied
Robert Hall

Participant

April 6, 2015 at 14:07
Hello,

Please add this code in custom.css file

tp-caption.lncyan.sfr.tp-resizeme.start a:hover, .tp-caption.lnpurple.lfl.tp-resizeme.start a:hover{ text-decoration: none; }

Regards,
Robert Hall.
#54869 Copied
jnunoalves

Participant

April 6, 2015 at 15:40

Hello Robert,

It was missing a “.” before tp but I solved it. It’s working fine.

To be perfect there is a small issue that could be corrected, if it would be easy… In both buttons, the hover behavior is not very good, meaning that if you hover inside the button but outside the text, it become all black. Any thing that can be done?

Thanks a lot!

José

#54950 Copied
Robert Hall

Participant

April 6, 2015 at 16:20
Please replace this code in custom.css file

.tp-caption.lncyan.sfr.tp-resizeme.start a:hover, .tp-caption.lnpurple.lfl.tp-resizeme.start a:hover { text-decoration: none !important; }

to

.tp-caption.lncyan.sfr.tp-resizeme.start a:hover, .tp-caption.lnpurple.lfl.tp-resizeme.start a:hover { text-decoration: none !important; display: block; }

Regards,
Robert Hall.
#54970 Copied
jnunoalves

Participant

April 6, 2015 at 19:27

Hello Robert,

It didn’t solve it. I’ve changed now the transparency to 50% black and it’s better. I can even change the hover font to black making the button black and grey… but if possible, it would be great to correct this.

Also is possible to make it work as a real button where all the area of the button is clickable?
As it is, only the text is clickable. In Legenda’s predefined buttons the buttons is fully clickable.

Thank you

José

#55047 Copied

Robert Hall

Participant

April 6, 2015 at 19:29

Hello,

Please provide us with wp-admin access in Private Content to check this issue.

Regards,
Robert Hall.

#55051 Copied

jnunoalves

Participant

April 7, 2015 at 00:47

Hello,

Here are the credentials

Please, contact administrator
for this information.

#55095 Copied

Brian Johnson

Member

April 7, 2015 at 14:32

You may try to use our shortcodes for buttons”[button type=" " size=" " icon= " " title=" " href=" "]{https://www.8theme.com/demo/royal/?page_id=428}. Then it will be much easy to set colors for buttons in css.

With best regards
Brian Johnson

#55371 Copied

jnunoalves

Participant

April 7, 2015 at 16:04

I think the shortcodes you mentioned are for Royal.

I believe for Legenda will be something like:

[button style=”medium” title=”BUY NOW” href=”http://www.lingerienoire.com/brand/angels-never-sin/ “]

Is this correct? How/where do I add the shortcode?

Thanks

#55400 Copied

jnunoalves

Participant

April 7, 2015 at 16:05

In fact not href but url

[button style=”medium” title=”BUY NOW” url=”http://www.lingerienoire.com/brand/angels-never-sin/ “]

#55403 Copied

Brian Johnson

Member

April 8, 2015 at 06:41

Sorry. Shortcodes are very similar to royal and in case url tag will not work please replace it with “href”. Please try to add this buttons to Revolution Slider and we will be able to adjust cyan and purple colors and hover effect for them.

With best regards
Brian Johnson

#55484 Copied

jnunoalves

Participant

April 8, 2015 at 13:35

Hello,

I’ve created the buttons. Both buttons will have black font and black border.
Regarding the cyan slider the color on hover for border and text will be #76acb7
and for purple will be #ad7ba2.

Also I’m fighting with a button for a banner. What is the best way to position it? (check babydolls banner). In that case we would need also a black border and most probably we could live with our second default color (#b29600).

Thanks

#55627 Copied
Brian Johnson

Member

April 8, 2015 at 14:08
Hello

You may try this code:

.medium{color:black!important;border:1px solid black!important;} .purple:hover{color:#ad7ba2!important;border:1px solid #ad7ba2!important;} .cyan:hover{color:#76acb7 !important;border:1px solid #76acb7 !important;} .banner-inner .button{border:1px solid black;} .banner-inner .button a:hover{border:1px solid #b29600;} .banner-inner .button span:hover{color:#b29600!important;}

With best regards
Brian Johnson
#55639 Copied
jnunoalves

Participant

April 8, 2015 at 15:04

Hello,

Thank you for the css. It’s perfect for slides.

For the banner on hover the border should change also to #b29600.

Regarding the position of the button in the banner what is the common practice?

Thanks

José

#55665 Copied
Brian Johnson

Member

April 8, 2015 at 15:32
Banner hover effect:

.banner:hover{border:1px inset #b29600;Z-index:999;} .banner{border:1px inset transparent;Z-index:999;}

It depends only on designer view. You may watch our demo pages as an example.

With best regards
Brian Johnson
#55676 Copied
jnunoalves

Participant

April 8, 2015 at 15:49

I’m sorry but the changes didn’t seem to work.

In your demo the banner buttons are centered. To move them more to the right as to be with spaces/tabs?

#55682 Copied

Eva Kemp

Participant

April 8, 2015 at 16:53

Hello,

As I see the button on the banner is placed in the center.
Please clarify the issue with more details.

Thank you.
Regards,
Eva Kemp.

#55709 Copied

jnunoalves

Participant

April 8, 2015 at 17:10

Hello Eva,

I need to correct the hover effect on the border of the button with color #b29600
and to put the button below “that seduce”.

I haven’t found a way to move it down and more to the right, as it automatically removes spaces/paragraphs.

Thank you

#55715 Copied
Eva Kemp

Participant

April 8, 2015 at 17:33
Hello,

Please try to use this code in custom.css file:

.banner .banner-content .button:hover { border-color: #b29600 !important; }

.banner .banner-content .button { margin-top: 23% !important; margin-left: 28% !important; }

Regards,
Eva Kemp.
#55726 Copied
jnunoalves

Participant

April 10, 2015 at 15:55

It’s almost perfect. I’ll get back to you if needed. You can close for now.

Thanks

#56257 Copied

Eva Kemp

Participant

April 10, 2015 at 16:06

Hello,

You’re welcome.

Regards,
Eva Kemp.

#56262 Copied
Viewing 27 results - 1 through 27 (of 27 total)