Customize The Styling Of The Simple Search Plugin

A very frequently used plugin for gpEasy CMS is the simple search plugin. I have it installed on this site though I only display it on the gpEasy Tutorial layout.

The class used for the simple search plugin is gpArea_Simple_Search. To find the class just look into the page's code after you have installed the plugin however, there are a couple unique setting for items that have text areas and inputs. Take a look at my css for the theme I use here on trueacu.com.

.gpArea_Simple_Search h3, .gpArea_Simple_Search_ h3 {
	display: none;
}
.gpArea_Simple_Search input.text, .gpArea_Simple_Search_ input.text {
	width: 168px;
	font-size: 10px;
	background: #ffffff;
	border: solid 1px #ddd;
}
.gpArea_Simple_Search input.submit, .gpArea_Simple_Search_ input.submit {
	width: 48px;
	font-size: 10px;
	color: #01203c;
	opacity: .2;
}

From the code you can see that there is a H3 heading, but in my case I have it hidden, and you can see that there is an input.text & input.submit attributes. The former is the text field and the latter is the submit button. That's all there really is to styling this plugin. It's rather simple.

 

gpEasy B2sq Theme by CS @True Acupuncture