Jump to content


Photo
- - - - -

How to Make a Banner Clickable?

banners Clickable

Best Answer Danny , 14 April 2013 - 09:09 AM

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.pagel...us/grid-system/

Go to the full post


  • Please log in to reply
7 replies to this topic

#1 toddatkins

toddatkins

    Advanced Member

  • Members

  • 73 posts
  • LocationBaton Rouge, LA
  • Framework Version:2.41
  • Country: Country Flag

Posted 13 April 2013 - 02:20 PM

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.

 

 

 

 



#2 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 April 2013 - 02:35 PM

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

Please Login or Register to see this Hidden Content

to help you with this customization. 



#3 toddatkins

toddatkins

    Advanced Member

  • Members

  • 73 posts
  • LocationBaton Rouge, LA
  • Framework Version:2.41
  • Country: Country Flag

Posted 13 April 2013 - 02:50 PM

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.



#4 toddatkins

toddatkins

    Advanced Member

  • Members

  • 73 posts
  • LocationBaton Rouge, LA
  • Framework Version:2.41
  • Country: Country Flag

Posted 13 April 2013 - 02:57 PM

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



#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 13 April 2013 - 02:59 PM

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.



#6 toddatkins

toddatkins

    Advanced Member

  • Members

  • 73 posts
  • LocationBaton Rouge, LA
  • Framework Version:2.41
  • Country: Country Flag

Posted 13 April 2013 - 03:49 PM

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.



#7 toddatkins

toddatkins

    Advanced Member

  • Members

  • 73 posts
  • LocationBaton Rouge, LA
  • Framework Version:2.41
  • Country: Country Flag

Posted 13 April 2013 - 05:54 PM

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.:

Please Login or Register to see this Hidden Content

And then look at what it does to the banner. 



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 16978 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 14 April 2013 - 09:09 AM   Best Answer

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 -

Please Login or Register to see this Hidden Content


  • toddatkins likes this





Also tagged with one or more of these keywords: banners, Clickable