[champac]

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.

[Mahesh]

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

[champac]

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.

[Mahesh]

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

[champac]

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

[Mahesh]

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

[champac]

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.

[champac]

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

Thanks again.

[champac]

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.

[Mahesh]

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

[champac]

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.

[Mahesh]

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

[champac]

All is working perfect !
You’r a king !

Thanks a lot.

[Mahesh]

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

[champac]

Done!

[Mahesh]

Hi champac,

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

Regards,
Mahesh

[champac]

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.

[Mahesh]

@champac: Add the following CSS:

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

Regards,
Mahesh

[Author]

Posts