Archived

This topic is now archived and is closed to further replies.

  • 0

Make entire single Box div linkable/clickable?


Question

Posted · Report post

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: http://www.virtually-anywhere.com/wp/

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

Possible?

-Chris

Share this post


Link to post
Share on other sites

7 answers to this question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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 http://www.pagelines.com/pros

Share this post


Link to post
Share on other sites

Posted · Report post

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.

http://www.pagelines.com/pros/

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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. http://www.pagelines.com/wiki/How_to_Add_Customization

You can find out more about filters here http://codex.wordpress.org/Function_Reference/add_filter

The PL boxes filter is here http://phpxref.pagelines.com/nav.html?sections/boxes/section.php.source.html#l63

Another option you might want to look at without having to edit code is the Boxer Plugin. http://wordpress.org/extend/plugins/boxer/

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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)

		return sprintf(
			'<a href="%s"><div id="%s" class="fbox %s"><div class="media box-media %s"><div class="blocks box-media-pad">%s%s</div></div></div></a>', $box_link,
			'fbox_'.$p->ID,
			$class, 
			$this->thumb_type, 
			$image, 
			$info

 

basically just wrapping the div with <a href.

 

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

<div class="grid-element-pad">
<a href="/#/"/>
<div id="fbox_7" class="fbox ">

 

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

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites