Jump to content
Sign in to follow this  
toddatkins

How to Make a Banner Clickable?

Recommended Posts

toddatkins    1
toddatkins

Running framework 2.4.1

 

Have a page with a hero at the top and then 3 banners

 

Each banner has a picture of a person and 5 bullet points of text

 

I need some help to make each of the 3 banners clickable on mouseover (I don't want just the image or just the text, I'd like the whole banner itself clickable)

 

Ideally I would like each entire banner pad to be clickable (to go to another page which is more indepth about the person) and for a border to show up around the outside edges of the pad on mouseover.

 

As best I can tell from firebug, the banner pad elements are:  banner-media-pad pprand-pad

 

But I just can't figure out how to actually achieve what I'm trying to do.  I know it's a bit outside the scope of what people use this forum for, but I would greatly appreciate any help.

 

Thanks in advance.

 

 

 

 

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

I don't think you can make the banner's clickable with CSS alone.  It would require some PHP coding, which we cannot provide or support.  While you might be able, for example, to apply a transparent background image to the banner, to make that clickable you'd need to hard code the section.

 

You may, of course, clone the section, and try working on the cloned version.  You'd need the Base (child) Theme and some coding skills. Do you feel comfortable with this?

 

Alternatively, you could engage one of our Pros to help you with this customization. 


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
toddatkins    1
toddatkins

Hey Rob, thanks for the quick reply. 

 

Thats what I figured, that it wasn't going to be possible in CSS. 

 

I do have child theme and limited coding skills, I may try that.

 

Thanks again.

Share this post


Link to post
Share on other sites
toddatkins    1
toddatkins

How would you clone the banner section and place it into the child theme?

Share this post


Link to post
Share on other sites
Rob    547
Rob

Todd,

 

Find the actual section via FTP in wp-content/themes/pagelines/sections.  Download the folder to your local computer.

 

While you're still in the site via FTP, go to the child theme, wp-content/themes/pagelines-template-themes and create or locate a sections folder.

 

Work on your changes on your local computer's downloaded version, then, when finished, upload to the pagelines-template-themes/sections folder.

 

Test it visually through your browser.

 

Remember to make additional changes the same way, consistently.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
toddatkins    1
toddatkins

Ok, tried that and I just don't have the skills.  Ugh.

 

Anyway, is there any way to just make the images and/or the banner titles clickable?

 

I tried doing <a href... etc in the banner title and it breaks things.

Share this post


Link to post
Share on other sites
toddatkins    1
toddatkins

One thing I have encountered is a bug that messes up banners.  If you add short code for font awesome in a banner title, it breaks the banner:

 

1.  Create a banner, add title, image, and text.

 

2.  Add shortcode to title, i.e.:

<i class="icon-group icon-white icon-large"></i> Title Here

And then look at what it does to the banner. 

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Banners aren't able to have a link nor can this be achieved with CSS. The simplest method to have a similar layout to the Banners section would be to to use the PageLines grid and create a two column layout. This way you can have one column for your header/text and the other for your image. Which will be added via HTML so you can add a link to it if you like.

 

For more information see our grid docs - http://support.pagelines.me/docs/miscellaneous/grid-system/

  • Like 1

Please search our forums, before posting!

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  

  • Similar Content

    • greatthingsllc
      By greatthingsllc+
      I have used the NavBar (Content Width) with blue background color selected.   The Parent Links are not clickable, only the child links.   I have tried with "Activate DropDown on Hoover" both selected and unchecked. 
      Only the NAVI (Content Width) allows the parent links to be clickable, but you can not select a background color.    The background color is a requirement from the end user.
      Thanks!
    • dbrowne02
      By dbrowne02+
      Hi, the phone numbers on my website aren't clickable. They were at one point. Just realized that they no longer are. For example, in the masthead of brownelaborlaw.com, the 800 number isn't clickable. I tried adding this to advanced options editor, but it wouldn't save. I also tried adding that in the masthead tagline. Thanks in advance for any ideas you may have. Thanks! 
      Update: The code below works for all parts of the site, including accordions and other content. But it doesn't work for the masthead.
      <a href="tel:+1-222-333-4444">Call 1-222-333-4444</a>
    • margie
      By margie
      Hi-
      I really like the way Popshot displays images.  Is there a way to link each image to a page on my site?  That is, when you click on the image it would take you to a page or post?  
       
      Thank you.
    • fritzfeger
      By fritzfeger
      Hi there, on the page http://agroblogger.de/regio/unternehmen/, there's the plugin Events Manager (from the Word Press PlugIn Directory) which lets you select any page as events list and, at the place where you insert the code, creates that list. Leaving your text and HTML above and below untouched. You can see the list (with only one entry) under the headline "Termine" in the middle of the page.
       
      There's a banners section below the content, and the banners now also display the events list, each of them.
       
      Can I suppress that somehow? I'd love to see the real banner text instead of what that shortcode produces.
       
      Thank you! 
      Fritz
    • tirsbak
      By tirsbak
      How do I sort banners?
       
      Best regards
×