Search Widget in Announcement bar

[John Bourke]

Hi, I want to play around with the possibility of having “search” in the Announcement bar. When I add it, the height of the bar becomes larger than I would like and the width of the search textbox is huge. I’ve looked at searchform.php and in the stylesheet at:

#cir-announcement {
padding: 0;
position: relative;
z-index: 1;
top: 1.125em;
font-size: 0.75em;
}

#cir-announcement h1 {
font-size: 1.5em;
}

As well as playing with the fixed pixel height under #cir-ann-social-wrapper

But can’t find where I can control the height and width of the search box.

Any help would be much appreciated.

Thanks,
John

[Sushil Adhikari]

That is going to be a little tricky because you have to customize the search form’s input fields from the bootstrap.css file found in the theme’s css folder and line 392

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.form-control {
	display:block;
	width:100%;
	height:36px;
	padding:4px 12px;
	
	line-height:1.65;
	color:#555;
	background-color:#fff;
	background-image:none;
	border:1px solid #ccc;
	border-radius:4px;
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
	-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

There’s also the button styling you need to modify as well, which is found line 610

.input-group-btn>.btn {
position: relative;
height: 2.250rem;
}

…and also line 460:

.btn{
	display:inline-block;
	margin-bottom:0;
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
	cursor:pointer;
	background-image:none;
	border:1px solid #ccc;
	white-space:nowrap;
	padding: 0.250rem 1.25rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	line-height:1.65;
	background-color: #eee;
	color: #666666;
}

The issue here is that these styles also control other form elements as well, so you would have to target that specific widget in that specific location (widget position) with your custom CSS, otherwise you affect other parts of your site. This will require some careful CSS coding to target only that one. I strongly recommend you keep a backup of your site before doing this. I also hope you are using a child theme or at least a plugin to Customize CSS.

[John Bourke]

Thanks for these pointers. I installed the child theme about 30 seconds after installing Circumference so I’ve been as careful as the theme deserves 🙂
CSS has changed a lot since I last worked with it, so to be safe, I think I will have a developer code the changes for me.

When they’re done, I’ll post the code here in case anybody else might want to use it. Thanks again.

[Author]

Posts