How to Style the Category Links into Buttons

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 6 years, 5 months ago by michaelgof.
• This reply was modified 6 years, 5 months ago by michaelgof.

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.

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 6 years, 5 months ago by michaelgof.
• This reply was modified 6 years, 5 months ago by michaelgof.

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

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.??

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 6 years, 4 months ago by michaelgof.

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=”https://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;
}