Viewing 18 posts - 1 through 18 (of 18 total)
  • Author
    Posts
  • #84573
    champac
    Participant

    Hi.

    I would like to know how to enlarge the size of the home page search box. I also want to change the color of the search box default text (the word Search).

    I want my search box more attractive.

    Thank you.

    #84607
    Mahesh
    Keymaster

    Hi @champac,

    Go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

    @media screen and (min-width: 481px) {
        #masthead .search-field {
            max-width: 350px;
            width: 350px;
        }
    }
    
    #masthead .search-field {
        color: #0000ff;
    }

    Note: Please change the color to your desired color’s hex value.

    Regards,
    Mahesh

    #84628
    champac
    Participant

    Thanks.
    It’s work great for enlarge the search box.

    But for the color changing, i dont want to change the text color when i type something to search… I want wo change the search box backgroung color and the color of the word “Search” written in the search box background before i type something to search.
    Can you help me with this ?

    Also, is it possible to add a button on my home page linking to a specific page ?

    Thank you.
    Christian.

    #84677
    Mahesh
    Keymaster

    Hi @champac,

    For placeholder’s color changing only, replace the following CSS

    #masthead .search-field {
        color: #0000ff;
    }

    with the following CSS:

    #masthead .search-field::-moz-placeholder {
        background-color: #00ffff;
        color: #ffff00;
    }
    #masthead .search-field::-webkit-input-placeholder {
        background-color: #00ffff;
        color: #ffff00;
    }

    What type of button do you want to add and where, please clarify more.
    Let me know if this helped.

    Regards,
    Mahesh

    #84710
    champac
    Participant

    Hi.
    I want a text button with a link to a specific page. I want the button below the search box, juste before the little round button sending the visitor to Facebook page and contact email.

    Thank you

    #84716
    Mahesh
    Keymaster

    Hi @champac,

    For this you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in child theme’s functions.php add the following codes.

    function catchresponsive_get_social_icons(){
    	if( ( !$output = get_transient( 'catchresponsive_social_icons' ) ) ) {
    		$output	= '';
    
    		$output	= '<a class="custom-btn" href="your-url" title="Title">Your Text</a>';
    
    		$options 	= catchresponsive_get_theme_options(); // Get options
    
    		//Pre defined Social Icons Link Start
    		$pre_def_social_icons 	=	catchresponsive_get_social_icons_list();
    
    		foreach ( $pre_def_social_icons as $key => $item ) {
    			if( isset( $options[ $key ] ) && '' != $options[ $key ] ) {
    				$value = $options[ $key ];
    
    				if ( 'email_link' == $key  ) {
    					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr__( 'Email', 'catch-responsive') . '" href="mailto:'. antispambot( sanitize_email( $value ) ) .'"><span class="screen-reader-text">'. __( 'Email', 'catch-responsive') . '</span> </a>';
    				}
    				else if ( 'skype_link' == $key  ) {
    					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr( $item['label'] ) . '" href="'. esc_attr( $value ) .'"><span class="screen-reader-text">'. esc_attr( $item['label'] ). '</span> </a>';
    				}
    				else if ( 'phone_link' == $key || 'handset_link' == $key ) {
    					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr( $item['label'] ) . '" href="tel:' . preg_replace( '/\s+/', '', esc_attr( $value ) ) . '"><span class="screen-reader-text">'. esc_attr( $item['label'] ) . '</span> </a>';
    				}
    				else {
    					$output .= '<a class="genericon_parent genericon genericon-'. sanitize_key( $item['genericon_class'] ) .'" target="_blank" title="'. esc_attr( $item['label'] ) .'" href="'. esc_url( $value ) .'"><span class="screen-reader-text">'. esc_attr( $item['label'] ) .'</span> </a>';
    				}
    			}
    		}
    		//Pre defined Social Icons Link End
    
    		//Custom Social Icons Link End
    		set_transient( 'catchresponsive_social_icons', $output, 86940 );
    	}
    
    	return $output;
    }

    Note: Please edit the following line in the above code as required
    $output = '<a class="custom-btn" href="your-url" title="Title">Your Text</a>';
    Replace your-url, title and Your Text with link, title and button text respectively.

    Then go to “Dashboard=> Appearance=> Customize=> Theme Options=> Custom CSS” box and add the following CSS.

    .custom-btn {
        background-color: grey;
        border-radius: 5px;
        color: #000;
        padding: 3px 5px;
        margin: 5px 0 0 5px;
        display: inline-block;
    }
    
    .custom-btn:hover {
        text-decoration: none;
    }

    Note: You can change the styles above as you desired.

    Regards,
    Mahesh

    #84719
    champac
    Participant

    Thanks a lot.

    One more thing please.
    What i have to do to change a settings of the search box. Right now the word Search written in the background of the searxh box dissapear when starting typing something to search. I want that the word Search in the background of the search box dissapear when i click in the search box before starting to type something to search.

    Thank you.

    #84746
    champac
    Participant

    And one last thing, how i do to add a image to my button on my homepage ?

    Thanks again.

    #84748
    champac
    Participant

    I try to add a other button at the left of the other one with the same code but it’s not working. how i add a other button ?

    Thank you.
    Christian.

    #84930
    Mahesh
    Keymaster

    Hi @champac,

    1. For hiding default search text on click, add the following CSS.

    #masthead .search-field:focus::-moz-placeholder {
        color: transparent;
    }
    #masthead .search-field:focus::-webkit-input-placeholder {
        color: transparent;
    }

    2. Adding another button to the left along with the first one, you do not need to repeat the whole code I’ve given you above, it won’t work. Just adding modifying a line will fix the issue. In the above code, please Find the following line:
    $output = '<a class="custom-btn" href="your-url" title="Title">Your Text</a>';
    And Replace it with the following, two link buttons will be displayed.
    $output = '<a id="custom-link-1" class="custom-btn" href="your-url" title="Title">Link 1</a><a id="custom-link-2" class="custom-btn" href="your-url" title="Title">Link 2</a>';

    3. Add image to the button
    I’m a bit confused on what you actually mean. Do you mean background or the icon as image? Please clarify on this.

    Let me know if any problem.

    Regards,
    Mahesh

    #84952
    champac
    Participant

    I mean a button with the icon as a image with a text just at the right of the image. So if you click on the image or on the text of the button, you will be send to the same url.
    Thank you.

    #84954
    Mahesh
    Keymaster

    Hi champac,

    Please use the following code instead of the above. It will add the image in the link with text.
    $output = '<a id="custom-link-1" class="custom-btn" href="your-url" title="Title"><img src="link to your image" title="Title" />Link 1</a><a id="custom-link-2" class="custom-btn" href="your-url" title="Title"><img src="link to your image" title="Title" />Link 2</a>';

    Note: Replace title, link, image src to your desired title, link and image links.

    Then add following styles in Custom CSS.

    .custom-btn img {
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    Regards,
    Mahesh

    #84966
    champac
    Participant

    All is working perfect !
    You’r a king !

    Thanks a lot.

    #84998
    Mahesh
    Keymaster

    Hi @champac,

    Thank you for your appreciation. If you like my support and Catch Responsive theme then please support by providing your valuable review and rating at https://wordpress.org/support/view/theme-reviews/catch-responsive?rate=5#postform

    Have a nice day!

    Regards,
    Mahesh

    #85031
    champac
    Participant

    Done!

    #85060
    Mahesh
    Keymaster

    Hi champac,

    Thank you for 5 star rating and your valuable review.
    You’re awesome!!! Have a nice day. 🙂

    Regards,
    Mahesh

    #93495
    champac
    Participant

    Hi Mahesh.

    You learn me upside how to create custum button on the home page. I want to know how to hide the button on the responsive version of my site.

    Thank you again.

    #93509
    Mahesh
    Keymaster

    @champac: Add the following CSS:

    @media screen and (max-width: 767px) {
        #header-right-social-icons {
        	display: none;
        }
    }

    Regards,
    Mahesh

Viewing 18 posts - 1 through 18 (of 18 total)
  • The topic ‘Enlarge search box and change text’ is closed to new replies.