[Resolved] Search bar customization

[Sabbir]

Hi,

I make the home page search bar like this (https://wow-company.com/knowledgecenter/)

You can check my current search bar here: https://www.disabilityresources.org/

[David]

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

[Sabbir]

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

[David]

Do you meant the style of the list of links ?

[Sabbir]

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.

[David]

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.

[Sabbir]

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

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

[David]

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

[Sabbir]

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

[David]

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;

});

[Sabbir]

no changes

[Ying]

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.

[Sabbir]

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

[Sabbir]

I have also tried disabled plugins.

[Ying]

The issue is not related to CSS.

Do you have any custom functions added to your site?

[Author]

Posts