Support » Theme: GeneratePress » How to Style the Category Links into Buttons

  • -I need some help styling the category link on my website into a button on the right of the blog archive featured image

    -Here is how the category link is on my website.See picture

    -I want to style those category links into buttons and place them beside the blog achieve featured image like this. See picture

    -Basically you can see that on this website

    -Can someone here help me on how to achieve that? Thanks for the replies

Viewing 15 replies - 1 through 15 (of 22 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    Any chance you can link me to your site? Should be possible with some CSS.

    Let me know 🙂

    am developing the site on a local environment on my computer. May be a little help with the css with help.

    -But since am using local by flywheel, i can give you access with a live link but the link can only remain live for about an hour.

    But take a look at the CSS i have added so far

    -And also, how do i display the comment count below the read me button like this

    • This reply was modified 1 year, 4 months ago by michaelgof.
    • This reply was modified 1 year, 4 months ago by michaelgof.
    Theme Author Tom

    (@edge22)

    Is your featured going to stay floating to the right like that? Or have you moved it below the title like on the site you’re trying to replicate?

    Yes, the featured image is going to stay floating to the right. Generatepress customizer options enabled me do that and also put it below the title.

    Theme Author Tom

    (@edge22)

    You could try this:

    add_filter( 'generate_show_categories', '__return_false' );
    
    add_action( 'generate_after_entry_header', function() {
        $categories_list = get_the_category_list( '' );
    
        if ( $categories_list ) {
            echo '<div class="category-container">' . $categories_list . '</div>';
        }
    }, 10, 20 );

    That should move the categories below the featured image.

    Then we could try this (but this is a guess, as I can’t see your site):

    .category-container {
        float: right;
        position: relative;
        top: -100px;
    }
    
    .category-container a {
        display: inline-block;
        padding: 5px 10px;
        background: red;
        color: white;
    }

    This isn’t a complete solution, but it should get us well on the way. It would help a lot if you’re able to get the site live so I can see what the above does and what we need to finish it.

    I tired the code and it did not look pretty

    -Either way i moved it to a live server

    -How do i sent you the login details privately so you can do the edits and see them for yourself?

    -And also how do a remove the white background on specific widgets?

    • This reply was modified 1 year, 4 months ago by michaelgof.
    • This reply was modified 1 year, 4 months ago by michaelgof.
    Theme Author Tom

    (@edge22)

    You can send details through our contact form here: https://generatepress.com/contact

    Just be sure to mention this topic.

    To change the CSS of specific widgets, you need to find their IDs. For example, right click that first widget and click “Inspect”. You’ll see it has an ID of text-4.

    So, we can do this:

    #text-4 {
        background-color: transparent;
    }

    Ok. Thanks. i sent the login details

    Theme Author Tom

    (@edge22)

    Instead of the current CSS, try this:

    .category-container {
        position: relative;
        top: -50px;
        clear: both;
        float: right;
    }
    
    .category-container a {
        display: inline-block;
        padding: 5px 10px;
        background: red;
        color: white;
    }
    
    .category-container ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    
    .category-container li {
        margin: 5px;
        padding: 0;
    }

    Then instead of the PHP, try this:

    add_filter( 'generate_show_categories', '__return_false' );
    
    add_action( 'generate_after_entry_header', function() {
        $categories_list = get_the_category_list( '' );
    
        if ( $categories_list ) {
            echo '<div class="category-container">' . $categories_list . '</div>';
        }
    }, 20, 20 );

    Let me know 🙂

    -We are getting there check it out

    -But the mobile friendliness in not there when the window is reduced to mobile size

    -It looks like this will be complicated to setup so i decided to keep things simple.

    -I just want to replicate the card like here that is putting the comments count(styled) below the read more button.🙂

    Theme Author Tom

    (@edge22)

    We can just adjust it for mobile?

    For the comments like, try this PHP:

    add_filter( 'generate_show_comments', '__return_false' );
    
    add_action( 'generate_after_content', function() {
        if ( is_singular() ) {
            return;
        }
    
        echo '<div class="comments-link">';
            comments_popup_link( __( 'Leave a comment', 'generatepress' ), __( '1 Comment', 'generatepress' ), __( '% Comments', 'generatepress' ) );
        echo '</div>';
    } );

    Then try this CSS:

    .comments-link {
        border-top: 1px solid #ddd;
        padding: 20px 0;
        font-size: 25px;
    }

    i added the above code. see it here

    – i think the problem may be at the start of the child functions.php file

    – There’s code there that also controls the comment count beside the author head and the published date

    -May be you can login and check it out.

    – Am trying ti achieve the exact card here

    • This reply was modified 1 year, 4 months ago by michaelgof.
    Theme Author Tom

    (@edge22)

    Ah yea, that would do that. Do you still want the comment count at the top? If not, you can share the function with me and I can adjust it so the comments don’t show up.

    If you do still want it, try changing the CSS to this:

    .entry-meta + .comments-link {
        border-top: 1px solid #ddd;
        padding: 20px 0;
        font-size: 25px;
        display: block;
        border-left: 0;
    }

    -i don’t want the comment count at the top. but its looking great already

    -here is the function

    add_filter( ‘generate_post_author’, ‘__return_false’ );
    add_filter( ‘generate_show_comments’, ‘__return_false’ );
    add_filter( ‘generate_post_date_output’, ‘tu_fancy_byline’ );
    function tu_fancy_byline( $date ) {
    printf( ‘ <span class=”byline”>%1$s</span>’,
    sprintf( ‘<span class=”author vcard” itemtype=”http://schema.org/Person&#8221; itemscope=”itemscope” itemprop=”author”>%4$s<span class=”author-name” itemprop=”name”>%3$s</span></span>’,
    esc_url( get_author_posts_url( get_the_author_meta( ‘ID’ ) ) ),
    esc_attr( sprintf( __( ‘View all posts by %s’, ‘generatepress’ ), get_the_author() ) ),
    esc_html( get_the_author() ),
    get_avatar( get_the_author_meta( ‘ID’ ) )
    )
    );

    if ( ! is_single() && ! post_password_required() && ( comments_open() || get_comments_number() ) ) {
    echo ‘<span class=”comments-link”>’;
    comments_popup_link( __( ‘Leave a comment’, ‘generatepress’ ), __( ‘1 Comment’, ‘generatepress’ ), __( ‘% Comments’, ‘generatepress’ ) );
    echo ‘</span>’;
    }

    echo $date;
    }

    and here is the css for that

    .byline img {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    position: relative;
    vertical-align: middle;
    margin: 0 10px 0 0;
    }

    .byline,
    .comments-link,
    .posted-on {
    display: inline-block;
    }

    .comments-link,
    .posted-on {
    border-left: 1px solid #ddd;
    padding-left: 10px;
    margin-left: 10px;
    }

    .comments-link:before {
    display: none;
    }

Viewing 15 replies - 1 through 15 (of 22 total)
  • The topic ‘How to Style the Category Links into Buttons’ is closed to new replies.