[FEATURE] add options for each slide to have a transparent background (…

…#425)
t3kit · Jun 26, 2018 · c4a9317 · c4a9317
1 parent e954219
commit c4a9317
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/Configuration/ContentElements/Slider.pagets b/Configuration/ContentElements/Slider.pagets
@@ -29,10 +29,10 @@ TCEFORM.tt_content.pi_flexform.contentElementSlider.sDEF.captionAlign {
 }
 
 # This is for adding options in the selectbox in each slide.
-# TCEFORM.sys_file_reference.tx_themet3kit_slide_appearance {
-#      addItems {
-#          --div-- = Slider slide appearances:
-#          10 = Light text and right aligned text area
-#          20 = Dark text and centered aligned text area
-#     }
-# }
+TCEFORM.sys_file_reference.tx_themet3kit_slide_appearance {
+    addItems {
+        --div-- = Slider slide appearances:
+        10 = Light transparent background
+        20 = Dark transparent background
+    }
+}
diff --git a/Configuration/ContentElements/Slider.setupts b/Configuration/ContentElements/Slider.setupts
@@ -20,11 +20,11 @@ tt_content {
         }
         settings {
             defaultWidth = 1920c
-            # appearance {
-            # # Extend appearance for each slide for this element
-            #   10 = example-class
-            #   20 = example-class
-            # }
+            appearance {
+            # Extend appearance for each slide for this element
+               10 = _light-transparent-bg
+               20 = _dark-transparent-bg
+            }
         }
     }
 }
diff --git a/felayout_t3kit/dev/styles/main/contentElements/slider.less b/felayout_t3kit/dev/styles/main/contentElements/slider.less
@@ -94,6 +94,14 @@
     background: @carousel-control-color;
 }
 
+._light-transparent-bg .img-slider__caption {
+    background: rgba(255, 255, 255, 0.3);
+}
+
+._dark-transparent-bg .img-slider__caption {
+    background: rgba(0, 0, 0, 0.3);
+}
+
 @media (min-width: @screen-sm-min) {
     .img-slider__caption {
         padding: 30px 50px;