[hello@spirituslepus.comParticipant]

Hi There

First off thank you for creating such a customisable theme – it’s really brilliant. And for having such a useful forum it has helped me out so much already!

web address: spirituslepus.com (this will only show a coming soon page whilst I’m building and designing stuff)
Wordpress version: 4.5
X version: 4.4.1
Cornerstone plugin version: 1.2.3

This is actually related to Slider Revolution version 5.2.3.5 but in case you need any of the above for reference.

I’m building a slide within Slider Revolution to use on my website for social media icons and an email newsletter sign up box. I’m using images for the social media icons (instead of built in buttons) as I need these to stay on brand within my website, and I want these images to act like “buttons”.

I’m having a couple of issues with the ‘mouse enter/mouse leave’ and ‘click’ actions on the images and it’s not quite working how I expected.

The two issues I’m having are:
1. when I hover the mouse over the image it should change colour, from blue to brown – which it does but only for a split second and then it goes back to being blue.
How do I make the image stay brown until the mouse is moved off the image? Where upon the image should change from brown back to blue.

2. The click action doesn’t always work on the image? Sometimes I have to click loads for it to open the hyperlink….

Here’s the process I went through initially to set up the actions on the images.

1. I added two image layers to the slide, one called ‘twitter’ and one called ‘twitter hover’.
2. I then used the actions tab to add 2 x actions to the ‘twitter’ image to create a change in colour of image when the mouse hovers over it, and when the mouse is removed.
3. I applied the following settings to the ‘twitter’ image:
ACTION ‘mouse enter’ – ‘Start layer “in” animation’ – Target: ‘twitter hover’ image – animation timing: ‘wait for trigger’
ACTION ‘mouse leave’ – ‘start layer “out” animation’ – Target: ‘twitter hover’ image – animation timing: ‘wait for trigger’
4. I then also wanted the image to have a hyperlink to my twitter account so applied the following to the ‘twitter hover’ image:
ACTION ‘click’ – ‘simple link’ – link url: ‘https://twitter.com/spirituslepus’ link target: ‘New window’ – Link type: ‘a tag link’

Did I do this right? or have I applied the wrong actions? I’ve attached a couple of screen shots to help explain.
Is there way I can show you the page I’ve added it to for a live example?

Thanks ever so much for your help it’s hugely appreciated.

[JadeModerator]

Hi there,

Thanks for writing in. Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

[hello@spirituslepus.comParticipant]

This reply has been marked as private.

[JackKeymaster]

Hi there!

Thanks for writing in, I’ve checked the page and the revolution slider itself, but don’t see any buttons. It looks like the slide has been deleted and a different one is being used?

All I see is a slider called “Coming Soon” in the Revolution Slider admin. (Screenshot attached).

Please advise.

Thanks!

[hello@spirituslepus.comParticipant]

Hi I’m so sorry I’ve not been clear!

The page the slider is on is called 12th april build. The slider is called ‘Coming soon’, and the slide concerned is called ‘Slide 2’

There aren’t any buttons on the slide, there are images that I have assigned ‘actions’ to – to replicate the function of a button.

Does that make sense?

I’ve attached some examples of the images I’m using to act as a button.

[hello@spirituslepus.comParticipant]

ah ha!

I think I figured out why it’s only changing colour for a split second.
So as I understand it the ACTION function in Slider Revolution has the option of mouse enter, start layer ‘in’ animation and mouse leave, start layer ‘out’ animation:
the clue is in the word animation – you have to apply an IN animation to the layer and an OUT animation to enable these ACTION functions to work.

The problem is that I can’t figure out how to loop this animation so that any time the mouse hovers over the image the animation is started.

I’m not actually sure if it’s possible.

I guess my solution should be to add my own social media icons to the footer of my site by uploading the images to the media library. So new question!

Is there a way to add code to the custom css so the hover action loads a new image? (rather than changing the colour) So that it goes from dark to light when you hover the mouse over the icon (please see the attached files facebook-dark.png to facebook-light.png).

Sorry for all the questions and the change of direction in the thread!

[RadModerator]

Hi there,

It’s actually possible, for example, let’s say you added this content to your footer.

<a href="" class="footer-facebook"><img src="https://s3.amazonaws.com/community-themeco/app/uploads/2016/04/15123026/facebook-dark1.png"></a>

Then simply add this CSS,

a.footer-facebook:hover img {
content: url(https://s3.amazonaws.com/community-themeco/app/uploads/2016/04/15123026/facebook-light.png);
}

Hope this helps.

[hello@spirituslepus.comParticipant]

Hi Rad

That’s worked really well, thank you so much.

Can you explain how I can link these images to their corresponding websites? (ie. facebook icon goes to our facebook page etc)

Also is it possible to make the icons in the footer responsive?

Thanks again for such a helpful reply!

[ChristopherModerator]

Hi there,

Please add URL in href attribute field :

e.g :

<a href="https://facebook.com/your-page" class="footer-facebook"><img src="https://s3.amazonaws.com/community-themeco/app/uploads/2016/04/15123026/facebook-dark1.png"></a>

Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
.x-colophon-content a {
    display: block;
}
}

Hope it helps.

[hello@spirituslepus.comParticipant]

…you guys are SO AWESOME!

So hopefully my final question! I’d like to make the padding smaller in-between each image….could you explain how I can do that?

and a million thanks for being so bloody great at what you do.

[hello@spirituslepus.comParticipant]

oh lame I couldn’t quite get the responsive code right.

I’ve attached a screenshot of the CSS I’ve got for each image – they all have a hover effect on.

Where abouts do I apply the responsive CSS code on this style sheet?

[RupokMember]

Hi there,

Thanks for updating. You can add this under Custom > CSS in the Customizer.

.x-colophon-content img {
  margin-right: -20px;
}

And I didn’t get what you are referring regarding the “responsive code”? Would you clarify what trouble you are facing with this?

Thanks!

[hello@spirituslepus.comParticipant]

Oh sorry Rupok

Earlier in the thread I asked how to make the footer icons responsive.
Your colleague Christopher said:

Please add following code in Customize -> Custom -> CSS :

@media (max-width:480px){
.x-colophon-content a {
display: block;
}
}

It’s a silly question I know… but do I add the code in Customize -> Custom -> CSS directly on the page in cornerstone, or do I go to the Worpdress dashboard, Appearance, customize and then add the code?

Thanks again for your help.

[ZeshanMember]

Hi there,

Thanks for writing back!

You can insert the CSS code under Custom > CSS in the Customizer that can be accessed from Appearance > Customize.

Thank you!

[hello@spirituslepus.comParticipant]

Great Thanks Zeshan!

[Author]

Posts