[arefsParticipant]

Hello,

I’m trying to set up a button in Slider Revolution so it looks like the button which is displayed on the opening slide of this site – takedownczar.com

In fact, you helped me set up the button for that very site here in the forum and I’m now trying to do for my new site – wppatrol.com

I’ve recycled the CSS code you gave me but unfortunately, as you can see for yourself it’s not displaying correctly.

I want the button to look EXACTLY the same apart from two things:

– The display text is different
– I would like the corners to be rounded

This is the CSS which I’m currently using and isn’t working:

.tp-caption.rev-btn {
background-color: rgba(255,255,255,0.15) !important;
border: solid 2px #fff !important;
border-radius: 3px !important;
transition: all 1s ease;
}

.tp-caption.rev-btn:hover {
background-color: rgba(255,255,255,0.25) !important;
color: #fff !important;
border-color: transparent !important;
transition: all 1s ease;
}

.tp-caption.rev-btn:hover:after {
content: “\f105”;
font-family: ‘fontawesome’;
display: inline-block;
}
.tp-caption a {
color: #fff;
}

What do I need to do to change that so the button looks exactly the same apart from the two small changes?

You’ll find the site login for wppatrol.com the following post if needed.

Thanks.

[arefsParticipant]

This reply has been marked as private.

[Nabeel AModerator]

Hi there,

Thanks for writing in! To achieve the similar look, you can add the following code in your Child theme’s style.css file:

.tp-caption.rev-btn {
    min-width: 165px !important;
}
.tp-caption.rev-btn:hover:after {
    content: "\f105" !important;
    font-family: 'fontawesome';
    display: inline-block;
}

Let us know how this goes!

[arefsParticipant]

Thanks but you haven’t told me how I should add this code. Should I replace the old code or append it to the end?

Either way, the button is still not looking EXACTLY the same as the example button I showed you.

– If I replace the old code there are too many things not right for me to write here

– If I append the new code (which I what you can currently see on the site), the following issues are present:

1.) A werid “f105” thing shows up when I hover over the button
2.) There is no icon in the button like in the example
3.) the button isn’t transparent

Here is the code I current have in the customiser:

.tp-caption.rev-btn {
background-color: rgba(255,255,255,0.15) !important;
border: solid 2px #fff !important;
border-radius: 3px !important;
transition: all 1s ease;
}
.tp-caption.rev-btn:hover {
background-color: rgba(255,255,255,0.25) !important;
color: #fff !important;
border-color: transparent !important;
transition: all 1s ease;
}

.tp-caption.rev-btn:hover:after {
content: “f105”;
font-family: ‘fontawesome’;
display: inline-block;
}
.tp-caption a {
color: #fff;
}
.tp-caption.rev-btn {
min-width: 165px !important;
}
.tp-caption.rev-btn:hover:after {
content: “\f105” !important;
font-family: ‘fontawesome’;
display: inline-block;
}
.tp-caption.rev-btn {
min-width: 165px !important;
}
.tp-caption.rev-btn:hover:after {
content: “\f105” !important;
font-family: ‘fontawesome’;
display: inline-block;
}
.tp-caption.rev-btn {
min-width: 165px !important;
}
.tp-caption.rev-btn:hover:after {
content: “\f105” !important;
font-family: ‘fontawesome’;
display: inline-block;
}

[ChristopherModerator]

Hi there,

There are duplicated code in customizer, please update customizer’s CSS to :

.rev_slider b {
  font-weight: bold !important;
}
.x-navbar {
    background-color: #34495e;
    border-bottom: none;
    box-shadow: none;
}

.home .rev-btn {
    border-radius: 22px;
}
.tp-caption.rev-btn {
    background-color: rgba(255,255,255,0.15) !important;
    border: solid 2px #fff !important;
    border-radius: 3px !important;
    transition: all 1s ease;
    min-width: 165px !important;
}
.tp-caption.rev-btn:hover {
    background-color: rgba(255,255,255,0.25) !important;
    color: #fff !important;
    border-color: transparent !important;
    transition: all 1s ease;
}

.tp-caption a {
    color: #fff;
}

Add this code in child theme’s style.css file since, customizer removes backslash :

.tp-caption.rev-btn:hover:after {
    content: "\f105";
    font-family: 'fontawesome';
    display: inline-block;
}

You can also add all CSS in style.css file.

Hope it helps.

[arefsParticipant]

Thank you for being so clear and helpful.

That looks much better.

There is just one thing left to do here and I’m sorted.

Right now if you go to my homepage you’ll see the button text is broken onto two lines.

wppatrol.com

I want the text to display on one single line.

I’ve tried increasing the width of the buttons (which is the most logical thing to do) but it makes no difference. The text continues to break onto two lines.

Watch this 30 second video for proof that increasing the button width doesn’t help – https://dl.dropboxusercontent.com/u/17713251/2016-04-11_1054.swf

How can I make it so the button text for both buttons displays on one line.

[LelyModerator]

Hi There,

Yes, you’re correct on adjusting the button width. Do you have a caching plugin? If yes, please do purge/delete cache. You might be seeing a cache content that’s why the width adjustment doesn’t make any difference.

Hope this helps.

[arefsParticipant]

Nope. No caching plugin on this domain. It’s very new. In fact, not many plugins at all. So very small change of conflict.

If that’s not the problem then what is?

[LelyModerator]

Hi There,

It might be your browser cache. Please try to update the width of the button. Increase 147px. Then when you visit the page again please hard refresh or use browser incognito mode. If the issue still exist, please update us so we can check why the updated width value is not working.

Always,
X

[Author]

Posts