Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Clickable divs/boxes with icons

Home Forums Support Clickable divs/boxes with icons

  • This topic has 10 replies, 4 voices, and was last updated 3 years ago by Zach.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #143915
    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

    #143989
    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.

    #144003
    Tom
    Lead Developer
    Lead Developer

    Great resources @bdbrown – awesome answer πŸ™‚

    #144026
    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?

    #144096
    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.

    #144141
    Tom
    Lead Developer
    Lead Developer

    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 πŸ™‚

    #144346
    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! πŸ™‚

    #144351
    Tom
    Lead Developer
    Lead Developer
    #415328
    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.

    #415363
    Tom
    Lead Developer
    Lead Developer

    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!

    #415813
    Zach
Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.