Table of contents:

• A few words about creating custom themes
• CSS file organization
• jAccordion container
• jAccordion slide
  • Padding
  • Border

When it comes to creating custom themes jAccordion is not very restrictive, nevertheless there are a few recommendations which you should follow.

CSS files of themes may differ here and there but complete CSS stylesheet consists of below mentioned sections. The beginning (and end if section consists of many css rules) of each section is specified by comment.

/* ===[ accordion css reset ]=== */
/* CSS reset affects only accordion and not other parts of website */

/* ===[ accordion ]=== */
.accordion {}	/* Main container */
.accordion .jAccordion-slidesWrapper {}	/* Wrapper of slides */
.accordion .jAccordion-slide {}	/* Slide */
			
/* ===[ Custom elements ]=== */
/* Title, description, caption (default animated elements) and preloader */
/* ===[ End of custom elements ]=== */
			
/* ===[ Default font styles ]=== */
/* h1, h2, h3 and p */
/* ===[ End of default font styles ]=== */
			
/* ===[ Custom font styles ]=== */
/* h1, h2 and h3 of caption */
/* ===[ End of custom font styles ]=== */

/* ===[ Rules used when JS is disabled ]=== */
.accordion.noJS .jAccordion-slide {}	/* Inactive slide */	
.accordion.noJS .jAccordion-slidesWrapper:hover .jAccordion-slide {}	/* Shrinked slide */
.accordion.noJS .jAccordion-slidesWrapper .jAccordion-slide:hover {}	/* Active slide */
/* Some CSS rules for animated elements when JS is disabled */
/* ===[ End of rules used when JS is disabled ]=== */
			
/* ===[ Responsive ]=== */
/* Rules for h1, h2, h3 and p elements for different screen sizes */

jAccordion is very tolerant when it comes to customizing style of the container. There is basically only one rule which shouldn't be broken - do not set property width but use max-width instead. Setting width causes loss of responsive functionality. Otherwise you can set whatever you want - border, padding, background color, shadow...

Example of jAccordion container css rule:

.accordion {
	border: 1px solid #E2E2E2;
	height: 380px;
	margin: 0 auto;
	max-width: 980px;	/* Do not replace max-width with width or you'll lose responsiveness */
	outline: none !important;
	padding: 10px;
	position: relative;
	-moz-box-shadow: 0 1px 4px 0px #CCC;	/* FF3.5+ */
	-webkit-box-shadow: 0 1px 4px 0px #CCC;	/* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
	box-shadow: 0 1px 4px 0px #ccc; 		/* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
}

There are a few rules which you should follow when customizing style of a slide.

Padding

Do not set padding directly to a slide but wrap a block element (e.g. div) around content of the slide and set padding to this element See image:

Example of a slide with content using padding:

<div class="jAccordion-slide">
	<div style="padding:10px 15px;">
	  	<!--Content of slide-->
	</div>
</div>

Border

Border width of all slides must be equal. If you want to make border of first slide or last one inivisible set its color to transparent. See image

.accordion .jAccordion-slide {
	display: block;
	overflow: hidden;
	position: relative;
	border-top: 1px solid #252525;
	border-bottom: 1px solid #000;
}

.accordion .jAccordion-slide:first-child { border-top-color: transparent }	/*Use transparent color instead border-top: 0;*/
.accordion .jAccordion-slide:last-child { border-bottom-color: transparent }	/*Use transparent color instead border-bottom: 0;*/