Auto-Complete, suggestions for Magnolia CMS with JQuery/SolR Part 4/5 (Adding the css to show the autocomplete)

We will be using JQuery UI’s css id’s and classes and just apply the basic styling to it so that it looks like this:
searchformagolia

First let’s discuss on how to apply stylings to Magnolia CMS. Stylings are going over a Theme, a theme is a specific module that will contain images like icons, JavaScript’s and css’s and that controls the behavior of the website. You can easily create a theme module for a website by using the maven Magnolia project archetype:

mvn archetype:generate -DarchetypeCatalog=http://nexus.magnolia-cms.com/content/groups/public/

Select the theme module, and let it guide you trough  the steps of the theme module creation.

Create a new css called styles.css in the modules src/main/resources/templating-kit/themes/yourThemeModule/css/

Follow this to use your stylesheet http://documentation.magnolia-cms.com/use-cases/creating-a-custom-theme.html

You can add this specific part to your css, you can of course adapt it to your needs:

/** AUTOCOMPLETE
----------------- */

/* Autocomplete
----------------------------------*/
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
	width:460px;
}
.ui-helper-hidden-accessible{
	display:none;
}

.ui-autocomplete.ui-front.ui-menu{
	list-style:none;
	background-color:white;
	font: helvetica;
	font-size: 18px;
	color:#AAA;
	border-left:1px dashed;
	border-right:1px dashed;

}
.ui-menu-item{
	padding-bottom:3px;
	padding-left:1px;
	border-bottom:1px dashed;

}
.ui-menu-item:hover{
	background-color: #EEE;
	cursor:pointer;
}
.ui-menu-item a{
	decoration:none;
	color:#666;
}
.ui-menu-item a:hover{
	decoration:none;
}

Ok let’s put it all together in the next post

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: