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;
}

That's good enough David, Thank you so much

one more thing,

can I make this page (https://www.disabilityresources.org/categories.html)? like the category page (https://www.disabilityresources.org/disabling-conditions-articles) design

Do you meant the style of the list of links ?

yes, it's a page. I like to design the page like the category archive. or is there any way to make a link in the navigation to go all category list and it should be like category archive page.

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.

Its works, (https://www.disabilityresources.org/cat.html)

maybe if you modify the code for me, it will be the same as I want.

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;
}

looks good, I need the title/link bold and right arrow like this https://prnt.sc/hJfzNMsKbxIb

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;

});

no changes

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.

here is my all custom CSS, Should I organize these?

.archive .entry-summary, .archive .entry-meta {
display: none;
}
.category main#main > article {
border-bottom: solid 1px #dedede;
padding-bottom: 20px;
position: relative;
}

.category main#main > article:after {
color: #777;
content: "\2192";
font-weight: 300;
font-size: 20px;
position: absolute;
top: 0;
right: 0;
}

.category input#wp-block-search__input-1 {
border-radius: 30px;
}

.category nav#nav-below .nav-links > a {
border: solid 1px black;
border-radius: 4px;
background-color: black;
color: white;
padding: 2px 5px;
margin: 0 4px;
}

.category nav#nav-below .nav-links span.page-numbers.current {
border: solid 1px black;
border-radius: 4px;
background-color: white;
color: black;
padding: 2px 5px;
margin: 0 4px;
}

.category nav#nav-below .next > span, .category nav#nav-below .previous > span {
display:none;
}

.category nav#nav-below .nav-links {
width: 100%;
display: flex;
justify-content: center;
position: relative;
}

.category nav#nav-below .next {
position:absolute;
right:0;
top:0;
}

.category nav#nav-below .previous {
position:absolute;
left:0;
top:0;
}

h4, h5, h6 {
margin-bottom: 0px;
}

.search .entry-summary {
margin-top: 0;
}

.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: #8FBCBB;
}

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

I have also tried disabled plugins.

The issue is not related to CSS.

Do you have any custom functions added to your site?