It was a few months ago playing with it so I really dont remember. It was more trial and error but here is a copy of the coin-slider-styles.css
I never tried integrating into the CMS. Honestly I dont know much about it. So it runs through the admincp.
/*
Coin Slider jQuery plugin CSS styles
http://workshop.rs/projects/coin-slider
*/
html, body {
border: none;
padding: 0;
margin: 0;
border-radius: 0;
}
.sliderframe {
background: none repeat scroll 0 0 #000000;
height: 260px;
width: 100%;
margin: 0px;
padding: 0px;
}
.sliderframe body, body .bodySlider { padding: 0px; margin: 0px; width: 960px; height: 260px; }
#fslider {
background: none repeat scroll 0 0 #000000;
height: 260px;
margin: 0;
padding: 0;
width: 100%;
}
.coin-slider { overflow: hidden; zoom: 1; position: relative; }
.coin-slider a{ text-decoration: none; outline: none; border: none; }
#cs-navigation-apDiv1 {
width: 100%;
}
table, tbody, tr, td, th {
border: none;
padding: 0;
margin: 0;
border-radius: 0;
}
.cs-buttons {
background: url("../styles/bow/misc/skin/a-head4.png") no-repeat center center transparent;
bottom: 0 !important;
display: block;
float: left;
font-size: 0;
height: 30px;
left: 0 !important;
margin: 0;
padding: 2px;
position: absolute !important;
right: 0;
text-align: center;
width: 70%;
}
.cs-buttons a {
background: url("../styles/bow/misc/skin/ORB.png") no-repeat center center transparent;
border-radius: 20px 20px 20px 20px;
box-shadow: 0 0 4px #222222;
color: #B8C4CF;
display: inline-block;
height: 16px;
margin: 4px;
text-indent: -1000px;
width: 16px;
}
.cs-buttons a:hover {
background: url("../styles/bow/misc/skin/ORB2.png") repeat-x scroll center center transparent;
border: 0px solid #eee;
box-shadow: 0 0 32px 8px #ccc;
margin: 4px
}
.cs-active { background-color: #FF6600; color: #FF6600; }
.coin-slider #apDiv1 {
width: 100% !important;
}
.cs-title {
background: url("../styles/bow/misc/skin/sliderbg.png") no-repeat center center;
bottom: 0;
box-shadow: 0 0 12px #000000;
color: #CCCCCC;
display: block;
float: right;
font: 13px tahoma bold;
height: 220px;
left: auto !important;
opacity: 1 !important;
padding: 20px;
right: 0;
width: 260px;
}
.cs-title b {
color: #CCCCCC;
display: block;
font: 14px Tahoma bold;
padding: 0 0 8px;
text-shadow: -1px -1px 0 #222222;
}
.cs-prev {
background: url("../styles/bow/misc/skin/slider_cnt_left.png") no-repeat scroll left top transparent;
color: #FFFFFF;
font: bold 11px/122px Tahoma,Arial !important;
height: 122px !important;
padding: 0 10px;
text-transform: capitalize;
bottom: 20 !important;
width: 68px !important;
top: auto !important;
}
.cs-next {
background: url("../styles/bow/misc/skin/slider_cnt_right.png") no-repeat scroll right top transparent;
color: #FFFFFF;
font: bold 11px/122px Tahoma,Arial !important;
height: 122px !important;
padding: 0 10px;
right: 0;
text-align: right;
text-transform: capitalize;
bottom: 13 !important;
width: 68px !important;
top: auto !important;
margin-right: 0px;
}
Of course all images will have to be created for your own style and appearance for your site.