Jump to content


Photo
- - - - -

Make entire single Box div linkable/clickable?

boxes linking

  • Please log in to reply
7 replies to this topic

#1 atblue

atblue

    Member

  • Members
  • 17 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 19 October 2012 - 07:57 PM

Hi all. So, I have three bucket boxes underneath a slider and rather then just have the Title of each box be the linked element, I'd like the entire box div to be hot so that you can mouse over it, slight subtle b/g change to indicate its clickable and then if you click on it, will take you to the same link that is set in the box link field.

My example site in-progress:

Please Login or Register to see this Hidden Content



I'd rather not have to use images here, to replicate the nice boxes I've made.

Possible?

-Chris

#2 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 20 October 2012 - 01:32 AM

Hi there, you can set a class for each box and then assign the rollover effect using css. There's an option to add a custom class in the box meta settings.

Hot linking the entire box to go to the link set in the meta will be a bit more complicated as Pagelines Boxes only link the text and image by default. You'll need to add a filter to the boxes section to make the entire box a link. In order to do this you'll need the Base theme or customize plugin active on your site as the changes will need to go into the function.php.

Please Login or Register to see this Hidden Content



You can find out more about filters here

Please Login or Register to see this Hidden Content



The PL boxes filter is here

Please Login or Register to see this Hidden Content



Another option you might want to look at without having to edit code is the Boxer Plugin.

Please Login or Register to see this Hidden Content



#3 atblue

atblue

    Member

  • Members
  • 17 posts
  • LocationSan Francisco
  • Country: Country Flag

Posted 03 November 2012 - 01:00 AM

Thank you for the response, James. I'm sorry for the delay in getting back to you but I had thought I was on a subscribe/email thing to receive any updates to the topic, but evidently I was mistaken as I just decided to check my past posts in the chance that someone responded. You did.

So I have the Base theme active and understand the relation of adding the section code adjustments there. But I'm a little over my head when it comes to the filter code and what (and where exactly in the chunk of code you directed me to) I could add to make the entire individual box to the link that is dynamically set with the subject of the box contents. Is that something straightforward (for those that are aware) and possibly could be explained, or is it too much?

If I can insert that code, then your CSS rollover point is easy for me to manage and would be ideal.

I in fact researched and installed the Boxer plugin after I posted that a few weeks ago, but ran into some issues. Glad to know I was on the right course at that time, if you recommended it too. I'd rather use the PL boxes if I can, but if not I will go back and see if I can make it work.

Thanks again,
Chris

#4 Danny

Danny

    Is Awesome!

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

Posted 04 November 2012 - 12:24 PM

Hi,

Boxes don't offer this functionality "Out of the Box", if you wish for boxes to have this functionality, you can either do as James suggested or you can contact one of our Pros.

Please Login or Register to see this Hidden Content



However, from viewing your site, it would appear that your boxes are just text. You could therefore, use the PageLines Grid and use HTML to create a similar layout to your boxes and wrap your HTML in an <a> tag.

#5 nuovait

nuovait

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 29 January 2013 - 04:31 PM

Hi,

 

I'm trying to figure this thing out as I want to the boxes to be clickable as well.

 

As a quick tryout I edited the core box extension code like this: (yes I know I should not modify core files, it is just a tryout to understand)

Please Login or Register to see this Hidden Content

 

basically just wrapping the div with <a href.

 

The output however is not working. instead it immediatly closes the a tag

Please Login or Register to see this Hidden Content

 

any suggestions? will this happen if I use the filter method described above?



#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 29 January 2013 - 06:22 PM

I'm not sure if this behavior will occur with the filter method, but you can try it and see or you can try the solution at the end of Danny's post.



#7 nuovait

nuovait

    Member

  • Members

  • 15 posts
  • Country: Country Flag

Posted 29 January 2013 - 07:09 PM

The filter option with the above mentioned filter doesn't produce any output. Looks like this is only used to get the default values for the boxes.

Only other filters I could find were box_more_link and pl_box_image, both not helping me out here.

 

Danny's option will work but I don't find that very good looking. also I already have another link in some of the boxes texts.

 

is there explanation on why the / is automatically added anyways?



#8 Rob

Rob

    One Smart Egg

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

Posted 29 January 2013 - 09:35 PM

Hi,

 

I apologize, but as you've doubtlessly read several times, we don't support editing core files.

 

Those codes are the standard pl core code links. Just research it as much as possible through the links James provided and apply the edits, We can't support an edit the to core code into the filter.

 

For this reason, we provide our Pros at

Please Login or Register to see this Hidden Content







Also tagged with one or more of these keywords: boxes, linking