Jump to content
Sign in to follow this  
verve315

Feature Image Not Clickable

Recommended Posts

verve315

Hi PlatformPro Team, I used to have my feature images clickable (when i had my slider spread in full width). Now that I added sidebar on the right and full width side bar at the bottom, it seems my slider doesn't allow hyper link. I already tried some tips in the forum but to no avail. Since I have to have the present layout of my homepage (http://elogicway.com/verve/) I have to find a way to get my feature images into hyperlinks. I followed this tip for example but it's not working : http://www.pagelines.com/forum/discussion/13480/full-width-feature-hyperlink#Item_5 I hope someone from PlatformPro team can pinpoint exactly as to what should be done. Thank you so much guys for your continued support. Big hug!

Share this post


Link to post
Share on other sites
Rob
Hi, If you followed the instructions here http://adammunns.com/create-a-fullwidth-clickable-feature-slider/ by any chance, you'll notice they're for a full width slider. Somewhere, you might have placed a snippet of code telling the slider to link at 100%. Since the slider's not 100% if the sidebar is along side, then the link might naturally break. I'll guess some of that was in Custom Code in CSS Rules. Have a look. Let's look at the way you created the original links and check widths or percentages. On an aesthetic note, and please don't take offence, but I'm not fond of white borders on black backgrounds. It takes away from the depth the black provides. Admittedly, it works well while creating a page to ensure you can see where one bit starts and the other ends. Great video in the bottom right corner!

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
verve315
Hi rangelone, Thank you for your reply. Aesthetic matters for me but if it's a client's order, a hundred suggestion would seem futile. I appreciate that. Let me just clarify, I have to remove any css that says make the slider clickable if it's a hundred percent, yes?

Share this post


Link to post
Share on other sites
verve315
I've already removed the css snippet that says fmedia a {width:100%; height:100%;} but still not working . By the way my feature images are background images.

Share this post


Link to post
Share on other sites
Rob
Yes, it's not fmedia. Check this link and you'll find the correct CSS to move the sidebar and you'll see the proper CSS for narrowing the feature slider. Look for matching or coordinating code in your customization and adjust to a fixed width in pixels not percentages. http://www.pagelines.com/forum/discussion/12458/featured-slider-width-a-solution#Item_42

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
Jenny
Can you paste your custom CSS for us? Please place it in between [ code ] [ /code ] tags (removing the spaces) so we can take a look.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
verve315
This is what I followed to move my sidebar up. My problem is making my feature slider clickable or with hyperlink. Pardon me but I'm new to css and coding.

Share this post


Link to post
Share on other sites
verve315
Hi Simple Mama, This is what I've got: [code] body{} #page a:hover {text-decoration:none !important;color:#ff6600 !important;} h6 {font-size:160px !important} #branding .content-pad { padding-bottom: 0px; padding-left: 0px; padding-right: 0; padding-top: 0px;!important } #primary-nav{margin-top:-2px;} #feature{margin-top:40px;} body.page-id-2 #sidebar-wrap {margin-top:-558px;} #sidebar1 {width:250px; min-height:160px !important; float:right;margin-right:30px;} #sidebar_primary {border: 1px solid #fff;margin-top:6px;height:160px;} #sidebar_secondary {border: 1px solid #fff;margin-top:6px;height:160px;} #sidebar_tertiary {border: 1px solid #fff;margin-top:6px;height:160px;} #sidebar_tertiary .widget {margin-top: -18px !important;padding:0 px !important;align:center;} .home .fullwidth #pagelines_content #column-main{width:710px !important;} #primary-nav ul.sf-menu ul li a{background: url(http://elogicway.com/verve/wp-content/uploads/2011/08/GoogleBackgroundBlack-thumb-400x300-2147.png) !important;} .main-nav li {background-color:transparent !important;} #nav_row li *{background-color:transparent !important} a:hover{ color: #CFCFCF !important;} .current-menu-item a {color:#ff6600 !important} #nav_row.main_nav, .main_nav ul.sf-menu ul li { border-bottom: medium none; } #nav_row {width: 766px;height:36px;} #feature-footer.nonav { border: none!important; } #feature-footer { background: transparent !important;border: 0 none !important;} #feature-footer .feature-footer-pad {border: 0 none !important;} #feature_slider div.default-features {width: 710px;float:left;pad:0px;} #feature-area {width: 710px;float:left;;} #feature_slider{width:710px;float:left;} #feature-area, .feature-wrap {width: 710px;height:300px;float:right;margin-left:-14px} #feature_slider.default-features div{width: 710px;float:left;} #feature-footer.dots{width: 710px;float:left;color:white!important;} #page, #dynamic-content {min-height:10px !important;} #comments {display:none} #cred{display:none!important} .icons .twitterlink {background-position: -22px -22px;} .icons .youtubelink {background-position: -44px -22px;} .icons .linkedinlink {background-position: -66px -22px;} .icons .facebooklink {background-position: -88px -22px;} .icons .rsslink {background-position: 0px -22px;} .icons .twitterlink:hover {background-position: -22px 0;} .icons .youtubelink:hover {background-position: -44px 0;} .icons .linkedinlink:hover {background-position: -66px 0;} .icons .facebooklink:hover {background-position: -88px 0;} .icons .rsslink:hover {background-position: 0px 0px;} a.whole_image_link { position:absolute; width:50%; height:50%; z-index:9999; left:0; /*Firefox fix*/ } [/code]

Share this post


Link to post
Share on other sites
Jenny
You have several errors in your code above. The error lines are: [code] #feature_slider div.default-features {width: 710px;float:left;pad:0px;} #feature-area {width: 710px;float:left;;} #feature-area, .feature-wrap {width: 710px;height:300px;float:right;margin-left:-14px} #comments {display:none} #cred{display:none!important} [/code] The lines above should read: [code] #feature_slider .default-features {width: 710px;float:left;padding:0px;} #feature-area {width: 710px;float:left;} #feature-area, .feature-wrap {width: 710px;height:300px;float:right;margin-left:-14px;} #comments {display:none;} #cred {display:none !important;} [/code] See if that helps.

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
verve315
Hi simple_mama, I already corrected the errors in the css code but still the feature images are not clickable. Please help :(

Share this post


Link to post
Share on other sites
Jenny
I went through your custom code one by one, disabling one at a time, and I couldn't get it to become clickable. Hopefully someone else can help. Sorry!

Jenny :: Web designer at Simple Mama (follow me at @simplemamacom)

Check out Share Me, a social sharing add-on for DMS that is super simple to set up.

Share this post


Link to post
Share on other sites
verve315
Hi simple_mama, Thank you for your assistance. Hopefully someone from the PlatformPro team can help. You're showing assistance to newbie like me is a big motivation on my part. But somehow, I wish this feature of the slider adding link will be as easy as changing the layout of the site. Please help PlatformPro Team!

Share this post


Link to post
Share on other sites
Rob
In this code [code]a.whole_image_link { position:absolute; width:50%; height:50%; z-index:9999; left:0; /*Firefox fix*/[/code] what you're doing is cutting the width of the clickable area to half the width of the image and half the height. Basically, 1/4th the image size. Since you haven't specified which quarter to apply the link to, it's not doing anything and failing to generate the link. Change the width to a fixed number such as 710px and the height to 100% so that the link will cover the entire breadth and height of the image. See if that works.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
verve315
Hi rangelone. Thank you for your respond. I changed the values according to what you specified but still not working. I'm so much at lost. Please help!

Share this post


Link to post
Share on other sites
Danny
Hi Verve, After looking at your site, I can see that there is no link present for any of your feature sliders, the 1st one has no link at all and the other two have the #fake_link, if you add a link to your features then it should work.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
verve315
Hi Danny, Thank you for your reply. I purposedly not put any link to the other two pagelines slider. However, On the Be An Actor image i put a link but it seems like there's something overriding it. Every time I hit save the link disappears. Weird thing is, that image (Be An Actor) becomes clickable but only gets back to the home page and not to the page it intends to link. Please help.

Share this post


Link to post
Share on other sites
verve315
Hi Guys! I already solved this problem with your help. Big thanks to rangelone, simple_mama and Danny for responding to my question. I feel better knowing you guys are always there to help.

Share this post


Link to post
Share on other sites
swanie_memorial
My feature images are not clickable: http://mhsvein.com/ I placed a full width image as the background, no text ... I added the links in the PagesLines feature interface, but it's not working. Am I having the same problem as verve 315? Also, while we're at it ... is there a way to add Title and Alt tags to the feature images? I tried to add them to the Media Library, but it's not pulling them through. Thanks for the help in advance.

Share this post


Link to post
Share on other sites
verve315
Hi swanie_memorial, I think for the full width image to work, you need to add this to the FEATURE MEDIA HTML. this is what I used to do when my feature slider was set to full width: If it doesn't work, follow this: http://adammunns.com/create-a-fullwidth-clickable-feature-slider/

Share this post


Link to post
Share on other sites
verve315
Hi swanie_memorial, You're welcome. Cheers!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×