You are here

Home » API reference » Dynamic display block 7

ddblock.css in Dynamic display block 7 

/* deafult dynamic display block */
div.block-ddblock .ddblock-container {
  clear:both;
  position: relative;
}

div.block-ddblock div.slider.overflow-visible{
  overflow:visible!important;
}
/* default dynamic display block number pager */
div.block-ddblock .ddblock-number-pager a.activeSlide  {
  background: #88f;
}
div.block-ddblock .ddblock-number-pager a:focus {
  outline: none;
}
div.block-ddblock .ddblock-number-pager  {
/*  padding-bottom: 3px;     /* margin between bottom of pager and content */
  position: relative;
  left: 0;
  display: block;
}
div.block-ddblock .ddblock-number-pager a {
  margin: 0 2px 2px 0;      /* margin right and bottom between pagers */
  padding: 0px 6px;         /* pading left and right inside pager */
  border: 1px solid #ccc;
  background: #fc0;
  text-decoration: none;
  display: block;
  float: left;
  font-size:.9em;          /* adjust fontsize */
}
div.block-ddblock .ddblock-number-pager {
  display:block;
  position:relative;
}
div.block-ddblock .ddblock-number-pager ul {
  list-style-type:none;
  margin:0!important;
  padding:0!important;
}
div.block-ddblock .ddblock-number-pager ul li {
  background:#fff!important;
  display:inline;
  list-style-type:none!important;
  margin:0!important;
  padding:0!important;
}
div.block-ddblock .ddblock-number-pager ul li a.pager-link{
  background:#fc0;
  border:1px solid #ccc;
  display:block;
  float:left;
  font-family:Tahoma,Arial,sans-serif;
  font-size:.7em;
  font-weight:bold;
  height:15px;
  line-height:15px;
  margin:0 2px 0 0;
  text-align:center;
  text-decoration:none!important;
  width:15px;
}
div.block-ddblock .ddblock-number-pager ul li a.activeSlide{
  background:#999;
  color:#fff!important;
}
div.block-ddblock .ddblock-number-pager ul li a:focus{
  outline:none;
}
div.block-ddblock .ddblock-number-pager ul li a.pager-link:hover{
  background:#999;
  color:#fff!important;
}
div.block-ddblock .ddblock-number-pager ul li a.prev,
div.block-ddblock .ddblock-number-pager ul li a.next{
  background:#fc0;
  border:1px solid #ccc;
  display:block;
  float:left;
  font-family:Tahoma,Arial,sans-serif;
  font-size:.8em;
  font-weight:bold;
  height:15px;
  line-height:15px;
  margin:0 2px 0 0;
  text-align:center;
  text-decoration:none!important;
  width:30px;
}

/* default dynamic display block prev-next pager */
div.block-ddblock .ddblock-prev-next-pager a.activeSlide  {
  background: #88f;
}
div.block-ddblock .ddblock-prev-next-pager a:focus {
  outline: none;
}
div.block-ddblock .ddblock-prev-next-pager  {
/*  padding-bottom: 3px;     /* margin between bottom of pager and content */
  position: relative;
  left: 0;
  display: block;
}
div.block-ddblock .ddblock-prev-next-pager a {
  background: #fc0;
  border: 1px solid #ccc;
  display: block;
  float: left;
  font-size:.9em;          /* adjust fontsize */
  height:15px;
  line-height:15px;
  margin: 0 2px 2px 0;      /* margin right and bottom between pagers */
  padding: 0px 6px;         /* pading left and right inside pager */
  text-decoration: none;
  width:30px;
}

/* default dynamic display block image pager */
div.block-ddblock .ddblock-image-pager a.activeSlide  {
  background: #ddd;
}
div.block-ddblock .ddblock-image-pager a:focus {
  outline: none;
}
div.block-ddblock ul.ddblock-image-pager {
  margin: 0 0 3px 0;
  padding: 0;
  line-height:1em;
}
div.block-ddblock .ddblock-image-pager li {
/* width: 61px;         /*width of list item 55 from picture width + 2 X 3px padding*/
  float: left;
  margin: 0 3px 3px 0; /* margin right and bottom between pagers */
  padding: 0;
  list-style: none;
  border: 1px solid #ccc;
  background: #fff;
}
div.block-ddblock .ddblock-image-pager li a {
/*  width: 55px;         /* width of list item*/
/*  height: 55px;        /*height of list item*/
  padding: 3px;
  display: block;
  background: #fff;
}
div.block-ddblock .ddblock-image-pager li img {
  border: none;
  display: inline;
  margin: 0 !important;
  padding: 0 !important;
}

div.block-ddblock ul.ddblock-image-pager {display:block;position:relative;}
div.block-ddblock ul.ddblock-image-pager  {list-style-type:none;margin:0!important;padding:0!important;}
div.block-ddblock ul.ddblock-image-pager li {background:#fff!important;display:inline;list-style:none!important;padding:0!important;}
div.block-ddblock ul.ddblock-image-pager li a.pager-link{background:#fff;border:1px solid #ccc;display:block;float:left;font-family:Tahoma,Arial,sans-serif;font-size:.7em;font-weight:bold;height:55px;line-height:55px;margin:0 2px 2px 0;padding:3px;text-align:center;text-decoration:none!important;width:55px;}
div.block-ddblock ul.ddblock-image-pager li a.activeSlide{background:#ddd;color:#fff!important;}
div.block-ddblock ul.ddblock-image-pager li a:focus{outline:none;}
div.block-ddblock ul.ddblock-image-pager li a.pager-link:hover{background:#ddd;color:#fff!important;}

div.block-ddblock ul.ddblock-image-pager li a.prev{background:#fff!important;display:inline;list-style:none!important;padding:0!important;}
div.block-ddblock ul.ddblock-image-pager li a.next{background:#fff!important;display:inline;list-style:none!important;padding:0!important;}


/* default dynamic display block custom pager */
div.block-ddblock .ddblock-custom-pager a.activeSlide  {
background: #eee;
}
div.block-ddblock .ddblock-custom-pager a:focus {
  outline: none;
}

/********************* previous next pager on slide **********************/
div.block-ddblock div.pager-slide{
  height: 50px;
  position: absolute;
  top:130px;
  width:50px;
  z-index:50;
}
div.block-ddblock div.pager-slide a{
  display:block;
  height:50px;
  opacity: 0.7;
  width:50px;
}
div.block-ddblock div.next-container a.next{
  background: url(_images/next.png) no-repeat;
}
div.block-ddblock div.prev-container a.prev{
  background: url(_images/prev.png) no-repeat;
}
div.block-ddblock div.next-container a.next:hover{
  background: url(_images/next.png) no-repeat;
  opacity:1;
}
div.block-ddblock div.prev-container a.prev:hover{
  background: url(_images/prev.png) no-repeat;
  opacity:1;
}
div.block-ddblock div.pager-slide a:focus{
  outline:none;
}
/********************* previous next pager on slide **********************/
div.block-ddblock div.prev-container{left:5px;}
div.block-ddblock div.next-container{left:128px;}

File

css/ddblock.css
View source 
  1. /* deafult dynamic display block */

  2. div.block-ddblock .ddblock-container {

  3.   clear:both;

  4.   position: relative;

  5. }

  6. 

  7. div.block-ddblock div.slider.overflow-visible{

  8.   overflow:visible!important;

  9. }

  10. /* default dynamic display block number pager */

  11. div.block-ddblock .ddblock-number-pager a.activeSlide  {

  12.   background: #88f;

  13. }

  14. div.block-ddblock .ddblock-number-pager a:focus {

  15.   outline: none;

  16. }

  17. div.block-ddblock .ddblock-number-pager  {

  18. /*  padding-bottom: 3px;     /* margin between bottom of pager and content */

  19.   position: relative;

  20.   left: 0;

  21.   display: block;

  22. }

  23. div.block-ddblock .ddblock-number-pager a {

  24.   margin: 0 2px 2px 0;      /* margin right and bottom between pagers */

  25.   padding: 0px 6px;         /* pading left and right inside pager */

  26.   border: 1px solid #ccc;

  27.   background: #fc0;

  28.   text-decoration: none;

  29.   display: block;

  30.   float: left;

  31.   font-size:.9em;          /* adjust fontsize */

  32. }

  33. div.block-ddblock .ddblock-number-pager {

  34.   display:block;

  35.   position:relative;

  36. }

  37. div.block-ddblock .ddblock-number-pager ul {

  38.   list-style-type:none;

  39.   margin:0!important;

  40.   padding:0!important;

  41. }

  42. div.block-ddblock .ddblock-number-pager ul li {

  43.   background:#fff!important;

  44.   display:inline;

  45.   list-style-type:none!important;

  46.   margin:0!important;

  47.   padding:0!important;

  48. }

  49. div.block-ddblock .ddblock-number-pager ul li a.pager-link{

  50.   background:#fc0;

  51.   border:1px solid #ccc;

  52.   display:block;

  53.   float:left;

  54.   font-family:Tahoma,Arial,sans-serif;

  55.   font-size:.7em;

  56.   font-weight:bold;

  57.   height:15px;

  58.   line-height:15px;

  59.   margin:0 2px 0 0;

  60.   text-align:center;

  61.   text-decoration:none!important;

  62.   width:15px;

  63. }

  64. div.block-ddblock .ddblock-number-pager ul li a.activeSlide{

  65.   background:#999;

  66.   color:#fff!important;

  67. }

  68. div.block-ddblock .ddblock-number-pager ul li a:focus{

  69.   outline:none;

  70. }

  71. div.block-ddblock .ddblock-number-pager ul li a.pager-link:hover{

  72.   background:#999;

  73.   color:#fff!important;

  74. }

  75. div.block-ddblock .ddblock-number-pager ul li a.prev,

  76. div.block-ddblock .ddblock-number-pager ul li a.next{

  77.   background:#fc0;

  78.   border:1px solid #ccc;

  79.   display:block;

  80.   float:left;

  81.   font-family:Tahoma,Arial,sans-serif;

  82.   font-size:.8em;

  83.   font-weight:bold;

  84.   height:15px;

  85.   line-height:15px;

  86.   margin:0 2px 0 0;

  87.   text-align:center;

  88.   text-decoration:none!important;

  89.   width:30px;

  90. }

  91. 

  92. /* default dynamic display block prev-next pager */

  93. div.block-ddblock .ddblock-prev-next-pager a.activeSlide  {

  94.   background: #88f;

  95. }

  96. div.block-ddblock .ddblock-prev-next-pager a:focus {

  97.   outline: none;

  98. }

  99. div.block-ddblock .ddblock-prev-next-pager  {

  100. /*  padding-bottom: 3px;     /* margin between bottom of pager and content */

  101.   position: relative;

  102.   left: 0;

  103.   display: block;

  104. }

  105. div.block-ddblock .ddblock-prev-next-pager a {

  106.   background: #fc0;

  107.   border: 1px solid #ccc;

  108.   display: block;

  109.   float: left;

  110.   font-size:.9em;          /* adjust fontsize */

  111.   height:15px;

  112.   line-height:15px;

  113.   margin: 0 2px 2px 0;      /* margin right and bottom between pagers */

  114.   padding: 0px 6px;         /* pading left and right inside pager */

  115.   text-decoration: none;

  116.   width:30px;

  117. }

  118. 

  119. /* default dynamic display block image pager */

  120. div.block-ddblock .ddblock-image-pager a.activeSlide  {

  121.   background: #ddd;

  122. }

  123. div.block-ddblock .ddblock-image-pager a:focus {

  124.   outline: none;

  125. }

  126. div.block-ddblock ul.ddblock-image-pager {

  127.   margin: 0 0 3px 0;

  128.   padding: 0;

  129.   line-height:1em;

  130. }

  131. div.block-ddblock .ddblock-image-pager li {

  132. /* width: 61px;         /*width of list item 55 from picture width + 2 X 3px padding*/

  133.   float: left;

  134.   margin: 0 3px 3px 0; /* margin right and bottom between pagers */

  135.   padding: 0;

  136.   list-style: none;

  137.   border: 1px solid #ccc;

  138.   background: #fff;

  139. }

  140. div.block-ddblock .ddblock-image-pager li a {

  141. /*  width: 55px;         /* width of list item*/

  142. /*  height: 55px;        /*height of list item*/

  143.   padding: 3px;

  144.   display: block;

  145.   background: #fff;

  146. }

  147. div.block-ddblock .ddblock-image-pager li img {

  148.   border: none;

  149.   display: inline;

  150.   margin: 0 !important;

  151.   padding: 0 !important;

  152. }

  153. 

  154. div.block-ddblock ul.ddblock-image-pager {display:block;position:relative;}

  155. div.block-ddblock ul.ddblock-image-pager  {list-style-type:none;margin:0!important;padding:0!important;}

  156. div.block-ddblock ul.ddblock-image-pager li {background:#fff!important;display:inline;list-style:none!important;padding:0!important;}

  157. div.block-ddblock ul.ddblock-image-pager li a.pager-link{background:#fff;border:1px solid #ccc;display:block;float:left;font-family:Tahoma,Arial,sans-serif;font-size:.7em;font-weight:bold;height:55px;line-height:55px;margin:0 2px 2px 0;padding:3px;text-align:center;text-decoration:none!important;width:55px;}

  158. div.block-ddblock ul.ddblock-image-pager li a.activeSlide{background:#ddd;color:#fff!important;}

  159. div.block-ddblock ul.ddblock-image-pager li a:focus{outline:none;}

  160. div.block-ddblock ul.ddblock-image-pager li a.pager-link:hover{background:#ddd;color:#fff!important;}

  161. 

  162. div.block-ddblock ul.ddblock-image-pager li a.prev{background:#fff!important;display:inline;list-style:none!important;padding:0!important;}

  163. div.block-ddblock ul.ddblock-image-pager li a.next{background:#fff!important;display:inline;list-style:none!important;padding:0!important;}

  164. 

  165. 

  166. /* default dynamic display block custom pager */

  167. div.block-ddblock .ddblock-custom-pager a.activeSlide  {

  168. background: #eee;

  169. }

  170. div.block-ddblock .ddblock-custom-pager a:focus {

  171.   outline: none;

  172. }

  173. 

  174. /********************* previous next pager on slide **********************/

  175. div.block-ddblock div.pager-slide{

  176.   height: 50px;

  177.   position: absolute;

  178.   top:130px;

  179.   width:50px;

  180.   z-index:50;

  181. }

  182. div.block-ddblock div.pager-slide a{

  183.   display:block;

  184.   height:50px;

  185.   opacity: 0.7;

  186.   width:50px;

  187. }

  188. div.block-ddblock div.next-container a.next{

  189.   background: url(_images/next.png) no-repeat;

  190. }

  191. div.block-ddblock div.prev-container a.prev{

  192.   background: url(_images/prev.png) no-repeat;

  193. }

  194. div.block-ddblock div.next-container a.next:hover{

  195.   background: url(_images/next.png) no-repeat;

  196.   opacity:1;

  197. }

  198. div.block-ddblock div.prev-container a.prev:hover{

  199.   background: url(_images/prev.png) no-repeat;

  200.   opacity:1;

  201. }

  202. div.block-ddblock div.pager-slide a:focus{

  203.   outline:none;

  204. }

  205. /********************* previous next pager on slide **********************/

  206. div.block-ddblock div.prev-container{left:5px;}

  207. div.block-ddblock div.next-container{left:128px;}