Disabling menu on home page | Clicking through on NIVO slider

(12 posts) (4 voices)

1. 

   ivolution
   Member

   1) I'd like to disable the menu on the home page only. Could you point me in the right direction?

   I'm able to add to the General Custom CSS this line:
   #primary_menu {display:none;}
   but that results in the menu disappearing everywhere in the template. I only want it off the home page.

   2) I expected the NIVO slider to allow me to click within it and be directed to the URL specified for that slide. This isn't happening.

   - Is this expectation wrong?
   - Did I break something? (I did create a glitch when I inserted a <span> tag in the Title field, which seemed to resolve itself later.)
   - Is there a way to make the slides clickable and link to one of the pages? What I want to end up with is a home page which acts as a portal to three different starting pages in my site, depending which of three slides are clicked. Removing the distraction of a menu (1) is part of that.

   

   Attachments

   1. Salt_of_Life_screenshot.jpg (100.7 KB, 1 downloads) 6 months old

   Posted 6 months ago #
2. 

   Ruderic
   Support

   Hi,

   Regarding your questions:

   1) Replace your CSS tweak with this new one:

   .is_home #primary_menu {
     display:none;
   }

   2) Go to the theme folder and open the file "lib/functions/sliders.php". In line #432, right after this code:

   $img_alt = !empty( $slider[$key]['alt_attr'] ) ? esc_attr( $slider[$key]['alt_attr'] ) : '';

   Paste this new one:

   $link_url = esc_url( $slider[$key]['link_url'] );

   Then, in line #439, after this code:

   $out .= '<span>';

   Paste this:

   $out .= '<a href="' .$link_url. '">';

   And in line #444, before this code:

   $out .= '</span>';

   Paste this:

   $out .= '</a>';

   Try that and let us know the results.

   Posted 6 months ago #
3. 

   ivolution
   Member

   Thanks Ruderic!

   1) The menu CSS tweak worked immediately. And I learned something. This is my first web site and first time coding any Javascript or PHP so I'm on a steep, lonely learning curve.

   2) I guessed that you wanted me to find the file on my server, edit and save it back, so I'm using Firezilla.

   Just to be sure, in line 432, you do _not_ want me to start a new line? Your instructions said to insert the new code right after the colon near the end of

   esc_attr( $slider[$key]['alt_attr'] ) : '';

   so not after the end of the entire line (semicolon). In case this should be obvious, PHP syntax is still pretty Greek to me. :)

   I'll try it and report back.

   I appreciate the quick and detailed response, you guys are pretty great. BTW, in case I end up doing this again, can you recommend a simple, free PHP editor that shows line numbers? I'm using Notepad and am making educated guesses about where lines 432, 439 etc are.

   Posted 6 months ago #
4. 

   ivolution
   Member

   Okay, I tried the code in both locations and confirmed sliders.php was correctly edited, but the slider is not behaving differently in either case. I think I was right about the corrected insertion point I mentioned in my last post, but it didn't help.

   (To test whether the edits are working, I refresh my home page and try the slider.)

   Here's my temporary home page with its three slides. http://saltoflife.ca/temp/ In an attempt at a workaround, I have managed to insert an anchor tag inside the Description field for one of the slides (I'm using Full + Raw Html). So for the "Culinary" slide you are able to click the text at the bottom to advance into the site; but that's a lot to ask of a user. I'm considering ways to increase the size of the anchored area using inline positioning but I don't think I can do that from within the Description field. Seems like making the slides clickable is the way to go, so thanks for staying with me, Ruderic. :)

   Posted 6 months ago #
5. 

   Elliott
   Support

   Hello ivolution,

   Try creating an anchor surrounding a transparent div which takes up the full width of the slide. You can position it with the z-index parameter so it appears above your text also. It would look something like this,

   <a href = '#'>
   <div style = 'opacity: 0; z-index: 9999; position: absolute; top: 0px; left: 0px; width: 600px; height: 300px;'></div>
   </a>

   Posted 6 months ago #
6. 

   FabioQ
   Member

   Hi all,
   I've used

   <a href='LINKTOPAGE'><div style = 'opacity: 0.0; z-index: 999; position: absolute; top: -320px; left: 0px; width: 960px; height: 340px;'></div></a>

   and it work perfectly, except that as attachment show (in red rectangle), it creates an opaque overlay in the bottom of slided image.
   Why? How can I remove it? I think it conflict with the lower bar showing buttons to change slides (even if I've disabled it)
   any clue to fix it?

   Thanks

   Posted 6 months ago #
7. 

   Elliott
   Support

   Hello FabioQ,

   Send us a link to your page and we'll take a closer look.

   Posted 6 months ago #
8. 

   FabioQ
   Member

   was in http://www.rtrsportstest.com/
   but now I've activated full + raw html, not only images, so now I don't have problem with grey overlayed bar on bottom of the slide

   Posted 6 months ago #
9. 

   Elliott
   Support

   Did you get this fixed? If your still having problems then take a screenshot and highlight the area that your having issues with.

   Posted 6 months ago #
10. 

    ivolution
    Member

    Elliott, I'm just returning to this issue and tried to place the code for the transparent div inside the Advanced Slider Settings "description" field for each of three slides, with no success. There appears to be no floating div anywhere.

    Should I be putting it somewhere else?

    A critical outcome is that each slide needs to link to a different page, so I'm not sure where else I could put the div than in the description for each slide. Thanks!

    Posted 5 months ago #
11. 

    ivolution
    Member

    False alarm.

    The coordinates were creating the floating div in the same bottom area where my hyperlinked text already was. I turned the opacity to 0.5 and inserted the parameter background-color:#ffffff so I could see the box... and am now succeeding by using some negative values for the coordinates, such as top:-300px. Seems all is left now is getting the placement right.

    I think I've got mine worked out, I'll report back if otherwise. Thank you!

    Posted 5 months ago #
12. 

    ivolution
    Member

    Yeah, that worked. For anybody else trying this, the coordinates that worked for me are as follows:

    <a href="URLTHESLIDEPOINTSTO" title="Some descriptive text">
    <div style = 'opacity: 0.5; z-index: 9999; background-color:#ffffff; position: absolute; top: -330px; left: 0px; width: 970px; height: 390px;'></div></a>

    Put this code in the description field for the specific slide (be sure to set Stage Effect to Full + Raw HTML). Then follow with whatever text you want the slide to display. In my case, I also added a custom floating title in a larger font as a separate <span> element with its own style properties.

    Once the box is correctly placed, set opacity:0; and remove the background-color parameter.

    Posted 5 months ago #

RSS feed for this topic

Reply

You must log in to post.