Search box size/font

Support has been upgraded!



The Support Forum is closed. Not to worry!  Providing the top quality support you expect and we're known for will continue! We're not ending support, just changing where you submit requests. This will provide you with the best experience possible.

Premium Support

Have you purchased an addon for Connections such as one of our premium templates or extensions with a valid license and you need help?

Please open a Support Ticket in your user account.

Click here to open a support ticket.

Free Support

Are you using the free Connections plugin? Don't worry, you are still very important to us! We are still providing you with the same high quality support that we're known for.

Please open a new support topic in the WordPress support forums for Connections.

Click here to open a support topic.

This topic is: resolved

Tagged: , ,

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • 05/01/2014 at 5:39 am #289815
    Richard Buckler
    Participant

    Can the size and font of the search box be altered easily, I am sure I have done this before but can’t remember how I did it!

    Thanks

    05/01/2014 at 9:14 am #289822
    Steven Zahm
    Keymaster

    @ Richard

    Yes they can be altered and somewhat easily … depends on your familiarity with CSS. Here’s how to do it in an upgrade safe manner with version 0.8.x:

    Create a new text text file using Notepad and save it with the following contents named as cn-custom.css.

    #cn-search-input {
	background: #FFFFFF none;
	border-width: 1px 0 1px 1px;
	border-style: solid;
	border-color: #DFDFDF;
	border-radius: 3px 0 0 3px;
	-moz-border-radius: 3px 0 0 3px;
	-khtml-border-radius: 3px 0 0 3px;
	-webkit-border-radius: 3px 0 0 3px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #888;
	display: inline-block;
	font-size: 12px;
	float: none;
	height: 28px;
	line-height: 20px;
	margin: 1px 0 1px 1px !important;
	padding: 3px 6px;
	text-align: left;
	vertical-align: bottom;
	width: 140px;
}
#cn-search-input:focus {
	color: #373737;
}
input#cn-search-submit {
	background:  #FFFFFF url(../images/icons/search.png) no-repeat 8px center;
	border-width: 1px 1px 1px 0;
	border-style: solid;
	border-color: #DFDFDF;
	border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	-khtml-border-radius: 0 3px 3px 0;
	-webkit-border-radius: 0 3px 3px 0;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	cursor: pointer;
	font-size: 12px;
	float: none;
	height: 28px;
	line-height: 20px;
	margin: 1px 1px 1px 0 !important;
	padding: 3px;
	text-align: left;
	vertical-align: bottom;
	width: 30px !important;
}

    Tweak the above CSS to suit.

    Login to your site using FTP and navigate to this folder:
    ../wp-content/uploads/

    Create a new folder named: connections-templates.

    Upload the cn-custom.css to the connections-templates.

    That should do it.

    05/01/2014 at 9:20 am #289824
    Richard Buckler
    Participant

    Thanks will give it a try

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)

You cannot reply to this support topic. Please open your own support topic.