You are here

Home » API reference » Total Gallery Formatter 7

tgf-elegant.css in Total Gallery Formatter 7 

.tgf-slides img {
  border-radius: 5px;
  display: block;
}

/**
 * Only Carousel.
 */
.tgf-carousel-container {
  background: url(images/tgf-elegant-bg-pag.jpg) bottom repeat-x;
  border-radius: 5px;
  box-sizing: border-box;
  display: inline-block;
  padding: 5px 35px 5px 35px;
  position: relative;
  text-align: center;
}
.tgf-carousel-container .tgf-slide-item {
  display: inline-block;
  float: left;
  margin: 5px;
}
.tgf-carousel-container a.tgf-next-button {
  background-position: -35px 0;
  bottom: 45px;
  right: -6px;
}
.tgf-carousel-container a.tgf-prev-button {
  bottom: 45px;
  left: -6px;
}

/**
 * Gallery with carousel.
 */
.tgf-container {
  background: url(images/tgf-elegant-shadow.png) no-repeat bottom center;
  display: inline-block;
  padding-bottom: 13px;
  position: relative;
  text-align: center;
}
.tgf-container .tgf-slides div,
.tgf-container .tgf-slides a {
  background: url(images/tgf-elegant-shadow.png) no-repeat bottom center;
  padding-bottom: 13px;
}
.tgf-container .caroufredsel_wrapper {
  margin: auto !important;
}
.tgf-container .tgf-controls-container {
  background: url(images/tgf-elegant-bg-pag.jpg) bottom repeat-x;
  border-radius: 5px;
  box-sizing: border-box;
  display: inline-block;
  padding: 10px 25px 10px 35px;
  position: relative;
}
.tgf-container .tgf-pagination img {
  border: thin solid #d4d4d4;
  margin-right: 10px;
}
a.tgf-next-button,
a.tgf-prev-button,
a.tgf-pag-next-button,
a.tgf-pag-prev-button {
  background-image: url(images/tgf-elegant-btns.png);
  background-repeat: no-repeat;
  display: block;
  height: 0;
  overflow: hidden;
  padding-top: 39px;
  position: absolute;
  bottom: 41px;
  width: 35px;
  z-index: 5;
}
.tgf-container a.tgf-pag-next-button {
  background-position: -35px 0;
  right: -7px;
}
.tgf-container a.tgf-next-button:hover,
.tgf-container a.tgf-pag-next-button:hover {
  background-position: -35px -39px;
}
.tgf-container a.tgf-pag-prev-button {
  left: -7px;
}
.tgf-container a.tgf-prev-button:hover,
.tgf-container a.tgf-pag-prev-button:hover {
  background-position: 0 -39px;
}
.tgf-container a.tgf-next-button {
  background-position: -35px 0;
  bottom: 170px;
  right: -6px;
}
.tgf-container a.tgf-prev-button {
  bottom: 170px;
  left: -6px;
}

File

styles/elegant/tgf-elegant.css
View source 
  1. .tgf-slides img {

  2.   border-radius: 5px;

  3.   display: block;

  4. }

  5. 

  6. /**

  7.  * Only Carousel.

  8.  */

  9. .tgf-carousel-container {

  10.   background: url(images/tgf-elegant-bg-pag.jpg) bottom repeat-x;

  11.   border-radius: 5px;

  12.   box-sizing: border-box;

  13.   display: inline-block;

  14.   padding: 5px 35px 5px 35px;

  15.   position: relative;

  16.   text-align: center;

  17. }

  18. .tgf-carousel-container .tgf-slide-item {

  19.   display: inline-block;

  20.   float: left;

  21.   margin: 5px;

  22. }

  23. .tgf-carousel-container a.tgf-next-button {

  24.   background-position: -35px 0;

  25.   bottom: 45px;

  26.   right: -6px;

  27. }

  28. .tgf-carousel-container a.tgf-prev-button {

  29.   bottom: 45px;

  30.   left: -6px;

  31. }

  32. 

  33. /**

  34.  * Gallery with carousel.

  35.  */

  36. .tgf-container {

  37.   background: url(images/tgf-elegant-shadow.png) no-repeat bottom center;

  38.   display: inline-block;

  39.   padding-bottom: 13px;

  40.   position: relative;

  41.   text-align: center;

  42. }

  43. .tgf-container .tgf-slides div,

  44. .tgf-container .tgf-slides a {

  45.   background: url(images/tgf-elegant-shadow.png) no-repeat bottom center;

  46.   padding-bottom: 13px;

  47. }

  48. .tgf-container .caroufredsel_wrapper {

  49.   margin: auto !important;

  50. }

  51. .tgf-container .tgf-controls-container {

  52.   background: url(images/tgf-elegant-bg-pag.jpg) bottom repeat-x;

  53.   border-radius: 5px;

  54.   box-sizing: border-box;

  55.   display: inline-block;

  56.   padding: 10px 25px 10px 35px;

  57.   position: relative;

  58. }

  59. .tgf-container .tgf-pagination img {

  60.   border: thin solid #d4d4d4;

  61.   margin-right: 10px;

  62. }

  63. a.tgf-next-button,

  64. a.tgf-prev-button,

  65. a.tgf-pag-next-button,

  66. a.tgf-pag-prev-button {

  67.   background-image: url(images/tgf-elegant-btns.png);

  68.   background-repeat: no-repeat;

  69.   display: block;

  70.   height: 0;

  71.   overflow: hidden;

  72.   padding-top: 39px;

  73.   position: absolute;

  74.   bottom: 41px;

  75.   width: 35px;

  76.   z-index: 5;

  77. }

  78. .tgf-container a.tgf-pag-next-button {

  79.   background-position: -35px 0;

  80.   right: -7px;

  81. }

  82. .tgf-container a.tgf-next-button:hover,

  83. .tgf-container a.tgf-pag-next-button:hover {

  84.   background-position: -35px -39px;

  85. }

  86. .tgf-container a.tgf-pag-prev-button {

  87.   left: -7px;

  88. }

  89. .tgf-container a.tgf-prev-button:hover,

  90. .tgf-container a.tgf-pag-prev-button:hover {

  91.   background-position: 0 -39px;

  92. }

  93. .tgf-container a.tgf-next-button {

  94.   background-position: -35px 0;

  95.   bottom: 170px;

  96.   right: -6px;

  97. }

  98. .tgf-container a.tgf-prev-button {

  99.   bottom: 170px;

  100.   left: -6px;

  101. }