[Resolved] Clickable divs/boxes with icons

[Are Martin]

Hi Tom, I would like to make a page on my site that is similar to the style and layout found in the link below.
I´m specifically thinking about the square, white background clickable boxes with the icons in them, where the entire box is clickable and the boxes are aligned next to eachother. But also the boxes with images. Any tips on how I can achieve this would be appreciated.

https://helsenorge.no

[bdbrown]

Hi Are. You could use the Sections Add-on to create the “rows”. Then create columns using Tom’s Lightweight Grid Columns plugin. Then use something like the Widget Shortcodes plugin to place your widgets within each column. Or you could code the boxes manually, then make them clickable using jQuery or using CSS.

[Tom]

Great resources @bdbrown – awesome answer 🙂

[Are Martin]

Thanks for the advice! 🙂 Using section and the lightweight grid columns plugin sound like a good way to do it on a page. Also looks like a simple plugin for shortcoding widgets!

How would I go about coding the boxes manually and making the whole box clickable though? I know how to make a div, give it a class and do some very basic styling with css. However, I´m not sure exactly how to make the whole thing clickable using css?

…also, if I wanted to put one or more rows with clickable boxes in columns inside one of the GP hooks could I somehow do that by giving them a class set a width and height with css and using the display: inline-block; property?

[bdbrown]

You would make the entire box clickable by expanding the anchor tag and styling it as described in this link that I posted above:
http://www.avtex.com/blog/2012/01/27/how-to-make-an-entire-div-clickable-with-css/.

Tom is probably the best one to answer your second question.

[Tom]

You can use the Lightweight Grid Columns plugin in GP Hooks as well – think that will do what you’re looking for?

Let me know 🙂

[Are Martin]

I think that will do it! Totally forgot that it´s possible to use the lightweight grid columns plugin in GP hooks as well. That makes it a lot easier to align the boxes in columns! 🙂

@bdbrown : I somehow missed that link in the first post… Thanks for great advice! 🙂

[Tom]

Glad we could help! 🙂

[Zach]

Sorry to revive an old thread but it seemed advantageous to keep these posts together…

It’s 2017 and I’m using GPP 1.5. I’m using columns for the blog, blog archives, and CPT archives:
https://www.zachpoff.com/site/artwork/
I want to make each article grid div clickable but I’m struggling with the CSS technique mentioned above. I thought I could select the post title link (without selecting the title of single posts too) this way:

.entry-header .entry-title a {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-decoration: none;
    /* Makes sure the link doesn't get underlined */
    z-index: 10;
    /* raises anchor tag above everything else in div */
    background-color: white;
    /*workaround to make clickable in IE */
    opacity: 0;
    /*workaround to make clickable in IE */
    filter: alpha(opacity=0);
    /*workaround to make clickable in IE */
}

But it produces strange effects (title link disappears, links seem to overlap and cover huge areas) so I’m clearly missing something. I had better luck selecting the “read more” link, perhaps since it’s immediate parent is the div whose dimensions I want the link to fill? (The link text still disappears though, and some posts have manual excerpts so they won’t have a “read more” link.)

Am I missing something obvious? I’m really trying to avoid JS here, but maybe there’s a hook I could use to wrap the whole div in a link since html5 allows that?

Thanks for any insight.

[Tom]

The easiest method would likely be using javascript.

Any chance you can open a new topic? I’m sure I can cook something up for you 🙂

Thanks!

[Zach]

New topic over here:
https://generatepress.com/forums/topic/how-to-make-whole-post-div-clickable-in-blog-archives/
Thanks – Zach

[Author]

Posts