[Resolved] Search bar customization

Hi there,

Try this CSS, its not 100% but its similar.

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper  {
    border-radius: 50px;
    overflow: hidden;
}

.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input {
    margin: 5px 15px;
    background-color: #fff;
    font-size: 25px;
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button  {
    background-color: #fff;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    box-shadow: -1px 3px 15px 0 rgba(0,0,0,0.06);
}
.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__button:hover {
    background-color: #000;
}

Do you meant the style of the list of links ?

Are you manually adding the list of archive terms ?

As theres no automatic method of adding a list of all terms. But we can create a shortcode to display the list, and then style that. See here for the shortcode:

https://generatepress.com/forums/topic/overview-of-all-categories-with-the-respective-category-description/#post-2081139

I can modify that and provide some CSS if that works for you?
Let us know if you want to keep the Post Count for the terms and the Description.

Try this PHP Snippet for your shortcode:

add_shortcode('cat_listing', function($html){
    $categories = get_categories();
    $html = '<div class="category-term-list">';
    foreach( $categories as $category ) {
        $category_link = sprintf( 
            '<a class="term-links" href="%1$s" alt="%2$s">%3$s</a>',
            esc_url( get_category_link( $category->term_id ) ),
            esc_attr( $category->name ),
            esc_html( $category->name )
        );
        
        $html .=  '<h2 class="term-title entry-title">' . $category_link . '</h2>';
    }
	$html .= '</div>';
    return $html;

});

Then add this CSS:

.category-term-list .term-title {
    border-bottom: solid 1px #dedede;
    padding-bottom: 20px;
    margin-bottom: 20px;
}

hmmm… odd the HTML being produced includes some unwanted code tags.
Try changing the PHP Snippet to this:

add_shortcode('cat_listing', function($html){
    $categories = get_categories();
    $cat_html = '<div class="category-term-list">';
    foreach( $categories as $category ) {
        $cat_html .= sprintf( 
            '<h2 class="term-title entry-title"><a class="term-links" href="%1$s" alt="%2$s">%3$s</a></h2>',
            esc_url( get_category_link( $category->term_id ) ),
            esc_attr( $category->name ),
            esc_html( $category->name )
        );
        
    }
    $cat_html .= '</div>';
    return $cat_html;

});

That’s very weird, the <code> tag is still there.

Can you try disabling all your plugins to test? There might be a plugin that adds this.