Linking KLEO pop up login screen to custom made image.

[Abracadabra]

I have a custom made image which I want my users to click on in order for the KLEO pop up log in screen to show up.

Currently when I go to my revolution slider and enter this text in new layer, there is a KLEO made LOGIN image that shows up, I want to replace it with my own image. What is the best way to do that?

[kleo_restrict type="guest"][kleo_button title='Login' style='see-through kleo-show-login' icon='desktop' tooltip_position='left' tooltip_action='hover' size='lg' href='#'][/kleo_restrict]

Can you please tell me step by step on how to do that.

[sharmstr]

“kleo-show-login” is the key. You can add that to the style class element of anything and it will launch the login modal. Doesnt have to be a button.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abracadabra]

Sorry, I still dont know how to set it up.

So im in revolution slider on my slide, I have chosen my layer which happens to be an image which I want to link to that pop up log in, where exactly do i enter this text?

[kleo_restrict type="guest"][kleo_button title='Login' style='see-through kleo-show-login' icon='desktop' tooltip_position='left' tooltip_action='hover' size='lg' href='#'][/kleo_restrict]

Is it somewhere in :
– Layer General Parameters
+ Layer Animation
+ Layer Links & Advanced Params

I simply dont know where to enter that text, when I just set up a new non-image layer I enter it in text/html window in general parameters and it works with KLEO original icon. However when I enter that text on a layer with image in that window it does not work.

Attachments:

You must be logged in to view attached files.

[sharmstr]

You cant mix shortcode and non shortcode elements AFAIK with Rev Slider. If you have to have the kleo_restrict shortcode, then I suggest trying to use it with the Single Image shortcode instead of adding an image layer.

example

COPY CODE

[vc_single_image image="4985" border_color="grey" img_link_large="" img_link_target="_self" css_animation="right-to-left" el_class="kleo-show-login"

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abracadabra]

Ok thanks, but I stil dont know how to set it up and where to put it being i wont be adding a layer
Is there anyway for you to outline it step by step here?

[sharmstr]

You still add a layer. Just not an image layer.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

Attachments:

You must be logged in to view attached files.

[Abracadabra]

I need more help with this, in fact this is something that should be ready for everyone to change easily right out of the box, since pretty much everyone is going to want to do it, it might make sense for Kleo to look at this more closely.

when i enter that text, that text shows up on my page but thats it I cant click it, it is also not truly possible to place this exactly where i want it seems, I can chose one of the squares to place it but its not exact. There should be a way for us just to change image on the original KLEO icon that shows up, that one can be moved around, just simply upload ours to change it, this is way too complicated for something that seems as simple as this.

Can you tell me where does my http link to my image goes in that text ?
I substituted it for ( img_link_target )

Thanks again

[Abracadabra]

[vc_single_image image="4985" border_color="grey" img_link_large="" http://prototype.com/wp-content/uploads/2015/02/SIGNIN_FIVER_1.png="_self" css_animation="right-to-left" el_class="kleo-show-login"]

This is what i entered, and a huge gray window showed up saying add image to your element. Where in that text should I put in the http link for it to display my image properly?

[sharmstr]

I cant think of a way that this could be built into Kleo since you’re doing this on a slide in Revolution Slider. Maybe you should purpose it to the developers of Revolution Slider.

You dont supply a url to the image. In my example, image=”4985 is the ID of the image. Upload your image using WP admin > media. Once uploaded, click on it and in the URL you’ll see “item=xxxx”. The xxxx part will be the ID.

Or, alternatively, use the VC to select the image you want to use, then switch to classic mode to see the id.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abracadabra]

thanks I got it to work, however the click/link does not work on mobile, layer with image and link also does not work on mobile, it works fine on PC and Ipad. Not sure why that is.

[Abracadabra]

Is there a way to do this with image layer or does it have to be just a simple layer?
With image layers its possible to resize the image/icon and place it exactly where I want on the screen. WHen I do a simple layer I end up dragging a line of text around instead of an image.

[sharmstr]

You can temporarily switch to one of the WP theme to see if its a Kleo issue or not (doubtful) and/or ask the plugin devs http://revolution.themepunch.com/#

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abracadabra]

ok thanks for your help with this.
I will simply go with the regular wp login and redirect to a login page.

[Abracadabra]

one final question if I may, with regular login in page when users click on login, it gets redirected to another page, the URL of that page is very messy, instead of page.com/login it shows long string redirect_to=http. letters and numbers is very messy. Is it possible to change it to clean sitename.com/login?

[sharmstr]

Why dobt you just put the kleo login in the menu? I dont understand why you’re trying to do all this customization?

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[Abracadabra]

Thats the thing I dont want to have a menu on the front page, only inside.
I want to customize my front page.
Thanks for all your help, I think i figured it all out now, not ideal as wp login screen is not translucent like KLEO’s, but it will work

[Author]

Posts