[Resolved] Make div all linkable in element

Home Forums Support [Resolved] Make div all linkable in element

Home Forums Support Make div all linkable in element

Viewing 15 posts - 1 through 15 (of 20 total)
  • Author
    Posts
  • #1589439
    William

    Hi there,

    Is there a way to make a div element all linkable to the category of that post in the header element? – the bit in yellow:

    So it mimics the functionality you can see here.

    #1589566
    David
    Staff
    Customer Support

    Hi there,

    can you link me to a page where you want to add this functionality?

    #1591079
    William

    Sure thing, such as here and here.

    #1591191
    David
    Staff
    Customer Support

    Without editing the HTML you can use some CSS like this to make the header elements meta-category clickable:

    .page-hero .meta-category {
        display: inline-block;
        position: relative;
    }
    .page-hero .meta-category a:before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    #1591321
    William

    That does not seem to have done anything.

    I am trying to replicate the click area that you can see with this theme here.

    #1591403
    Elvin
    Staff
    Customer Support

    Hi,

    For this page:
    Link

    Any particular reason why you want to keep its html this way?

    Consider changing the HTML structure of its Header Element to this:

    <div class="meta-category">
        <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">
            <span class="cat-first-letter">C</span>  <p style="display:inline-block;">- Claude McKay need to make all a link</p>
        </a>
    </div>

    So that everything is wrapped similar to your reference.

    A wise man once said:
    "Have you cleared your cache?"

    #1591923
    William

    That’s great thank you – is there a way to have the text centered vertically against the big letter and have the same hover effects as this?

    Also, can the linking area for the text is just on the text – is it possible to have some sort of padding so the linking area around the text is the same as here?

    #1592420
    Tom
    Lead Developer
    Lead Developer

    Are any of the links you’ve shared your actual page that you’re working on? I’ve looked through and all the links seem to be the same site where the look of it seems complete?

    Let me know 🙂

    #1595126
    William

    The actual page is this page<–This is the site I am working on.

    But as with my last comment, I reference another theme to copy similar functionality as I said here:

    That’s great thank you – is there a way to have the text centered vertically against the big letter and have the same hover effects as this?

    Also, can the linking area for the text is just on the text – is it possible to have some sort of padding so the linking area around the text is the same as here?

    #1595925
    Tom
    Lead Developer
    Lead Developer

    This should help vertically center it:

    .meta-category {
        display: flex;
        align-items: center;
    }
    
    .meta-category p {
        margin-bottom: 0;
    }

    To make the entire thing a link, you should do something like this:

    <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/ class="meta-category">
        <span class="cat-first-letter">C</span>  <p style="display:inline-block;">- Claude McKay need to make all a link</p>
    </a>
    #1596006
    William

    Thank you for that – centering works a treat.

    As for the link – I would require something generic so that the link for the div element changes to the primary category of the post – possible using the shortcode for {{post_terms.category}}, however, not sure how to implement this correctly?

    #1597286
    Tom
    Lead Developer
    Lead Developer

    So you need the URL to update based on the category? Which category, exactly? The current one?

    #1597380
    William

    That’s correct – whatever the post category is, the link should update to that category.

    #1598387
    David
    Staff
    Customer Support

    How are you currently creating the category meta?

    #1598661
    William

    For this page, the header element is:

    	<div class="meta-category">
        <a href="https://wordpress-425633-1630880.cloudwaysapps.com/claude-mckay/" rel="tag">
            <span class="cat-first-letter">[cat-first-letter]</span>  <p style="display:inline-block;"> - {{post_terms.category}}</p>
        </a>
    </div>
    
    <h1 class='post-title'>
    	{{post_title}}
    </h1>
    
    <div class="post-excerpt">
    	[post-excerpt]
    </div>

    But where the a href needs to update according to the category of the post (to link to that category) and to link the whole div element ‘meta-category’.

Viewing 15 posts - 1 through 15 (of 20 total)
  • You must be logged in to reply to this topic.