Jump to content

Archived

This topic is now archived and is closed to further replies.

jeremycaris

How do I make each Revslider slide a link?

Recommended Posts

jeremycaris

In DMS 2.1.5 at least, Revslider allows you to create buttons on top of the slider that point to a URL. I want each slide itself to be a link. Has anyone found a way to do this without hacking the theme files?

Share this post


Link to post
Share on other sites
jeremycaris

Well, asked too soon. But maybe this solution will help someone else.

 

I added a URL to the Primary Button for the Revslider slide, and entered   for the Title (so that no text would show—it defaults to "MORE"). Then I added the following custom CSS:

 

div.caption.slider-content.left-side.sfl.stl.tp-caption.start {
  top: -25px !important; // locates the link area perfectly on my slider
  left: 0px !important;
}
 
div.caption.slider-content.left-side.sfl.stl.tp-caption.start > div > a {
  width: 1280px; // the max-width of my slider
  height: 480px; // the max-height of my slider
}
 
.btn.btn-ol-white {
  border: none;
}

Share this post


Link to post
Share on other sites
Danny

Thanks for sharing.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
lazlo

Hi - I'm looking for a way to make each slide link to a page without a visible button  - how does this solution work with the forward/back buttons and the navigation dots?

Share this post


Link to post
Share on other sites
jeremycaris

It works 100% as I described. Each slide has a "Primary Button." Just add the URL you want and " " for the Text (so that it doesn't show the default text "More"). Do this for each of your slides. The CSS I posted causes the whole slide to become the link area. Note that the CSS is set for the the max width and height of the slider I was working with in this particular case. You may have to adjust the px dimensions for your needs.

 

Hi - I'm looking for a way to make each slide link to a page without a visible button  - how does this solution work with the forward/back buttons and the navigation dots?

 

Share this post


Link to post
Share on other sites
lazlo

Hi - I have two revSliders on the same page each slider has a different height - how can I split the CSS code and configure for each slide? I tried changing 

 

div.caption.slider-content.left-side.sfl.stl.tp-caption.start {}

to 

#dual-width-revslider-masteruzs7x8h.div.caption.slider-content.left-side.sfl.stl.tp-caption.start {}
 
...but it didn't work
 
can anyone help with the correct tweak to this CSS declaration?
 
many thanks
 

Share this post


Link to post
Share on other sites
Danny

We can not assist in the support of user created code. However, if you have slides with different heights, you will probably want to prefix your CSS with the sections ID or use the styling classes field and give each slide a unique class, then prefix the css with those classes.

 

For example:

 

Section ID

 

#sectionIdHere .caption .slider-content .left-side .sfl .stl .tp-caption .start {
  top: -25px !important; /* locates the link area perfectly on my slider */
  left: 0 !important;
}
 
#sectionIdHere .caption .slider-content .left-side .sfl .stl .tp-caption .start > div > a {
  width: 1280px; /* the max-width of my slider */
  height: 480px; /* the max-height of my slider */
}
 
#sectionIdHere .btn .btn-ol-white {
  border: none;
}
 
Or use a custom class, which you can add via the styling classes field option:
 
.myCustomclass .caption .slider-content .left-side .sfl .stl .tp-caption .start {
  top: -25px !important; /* locates the link area perfectly on my slider */
  left: 0 !important;
}
 
.myCustomclass .caption .slider-content .left-side .sfl .stl .tp-caption .start > div > a {
  width: 1280px; /* the max-width of my slider */
  height: 480px; /* the max-height of my slider */
}
 
.myCustomclass .btn .btn-ol-white {
  border: none;
}

 


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
sheilahoff

Thank you...this solution worked for me and was exactly what I was looking for.


Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites
sheilahoff

IGNORE THIS IF YOU WANT...IT's RESOLVED.

 

After the theme update we're having to resize our images. In the process of doing that now. But we've also noticed a white line across the top of the slides which I have not been able to isolate to remove. You can see it highlighted in this capture: http://awesomescreenshot.com/0f44enm524. And you can see it live at http://awesomescreenshot.com/0f44enm524. Client is very upset. I hope someone can give me the proper CSS to make that line go away! Thanks.

 

It appears to be originating with this:

div.caption.slider-content.left-side.sfl.stl.tp-caption.start > div > a {
    height: 450px;
    width: 940px;
}
 
When I disable the width in Inspect Elements the line goes away!
SO....I changed the dimensions to the corrected (new) ones and it seems to be resolved.
WHEW!

Sheila Hoffman | Hoffman Graphics | Seattle

Share this post


Link to post
Share on other sites

  • Similar Content

    • stijnxo
      By stijnxo+
      The Filtering of categories in the Masonic Gallery refreshes back to ALL categories when the DMS Revslider loads a new image?
      Anybody any idea? See Artists Category refreshes back to ALL when the DMS Revslider with images on the top loads a news image on http://www.18hrsfestival.nl/
    • carl
      By carl+
      Trying to convert a site over to PL5 from DMS2. Can we use revslider? Can any portion of DMS2 be editable or imported through PL5?
      I'm trying to wrap my head around the new PL5 os, but things have changed so much it like learning a new software. I DO like the new UI! Great job.
    • Lisa Haran
      By Lisa Haran+
      Hi 
      I have a map here http://www.iloveoffset.com/maps/
      I want to add several pointer locations to the map, but when I do they do not appear.
      On this map there are 2 pointer locations and as you can there is only one visible.
      Earlier today I added 7 and could only see 4 so there is something odd going on.
      My theme is up to date
    • jennajonesdesign
      By jennajonesdesign+
      Hi Guys, 
      I just went live with this site. http://bikenet.org/
      I can see the video background in Firefox, Chrome and IE on my computer as well as my husband's computer and my phone. So I am not able to see any problem. 
      But, my client says she cannot see the video background in Chrome?? Any ideas? 
      Let me know. Thanks!
       
      Jenna
    • Bleuy
      By Bleuy+
      Problem: Full Screen Revslider content runs off the screen on mobile devices (particularly calls to action buttons).  I've used the <br> to break up the text, however the call to action buttons run off the screen.  Therefore without making the fix too technical (and I can see some VERY technical resolutions on here) my client just wants to simple centre justify the text when being viewed on a mobile device.  
      Any ideas on how best to achieve this in a simple, non too technical way?
      Thanks very much in advance
       
×