$select->setAttrib('data-name', 'selected-type');
$this->addElement($select);
+ $bg_color = new CubeIT_Form_Element_Color('bg_color');
+ $bg_color->setLabel('Block background colour (leave blank for default)');
+ $this->addElement($bg_color);
+
+ $text_color = new CubeIT_Form_Element_Color('text_color');
+ $text_color->setLabel('Text colour (leave blank for default)');
+ $this->addElement($text_color);
+
$margin = new CubeIT_Form_Element_Int('margin');
$margin->setLabel("Décalage vertical du bloc (en pixels)");
$this->addElement($margin);
$this->setNewLegend('Nouveau contenu');
}
-}
\ No newline at end of file
+}
$res = '<div class="case">';
$res.='<div class="casestudies-detail-header" style="background-image:url('. $header_image .')">';
- $res.='<h1 class="casestudies-detail-title">' . $studie->titre . '</h1>';
- $res.='<h2>' . $studie->legende . '</h2>';
+ $res.='<h1 class="casestudies-detail-title wow fadeInUp">' . $studie->titre . '</h1>';
+ $res.='<h2 class="wow fadeInUp">' . $studie->legende . '</h2>';
$res.='</div>';
// $res .= '<div class="casestudies-detail-visuel">';
$zindex = 'z-index:' . $bloc->zindex . ';';
}
+ $colours = '';
+
+ if ($bloc->bg_color != '') {
+ $colours .= 'background-color:'. $bloc->bg_color .';';
+ }
+ if ($bloc->text_color != '') {
+ $colours .= 'color:'. $bloc->text_color .';';
+ }
+
+
+ // TODO: Manage padding better so it can be disabled for blocks that have the same colour where we don't want a double gap between them.
+
+ $res .= '<div class="detail-block" style="'. $colours .'">';
+
+ //--------------
+
if ($bloc->selectedtype == "text") {
- $res .= '<div class="detail-text content" style="' . $margin . '' . $zindex . '" >';
+ $res .= '<div class="detail-text" style="'. $colours . $margin . $zindex .'">';
$res .= '<div class="titre">' . $bloc->titre . '</div>';
$res .= $this->markupDotclear($bloc->texte);
$res .= '</div>';
$res .= '<div style="z-index:10;position:relative">' . $video . '</div>';
$res .= '</div>';
}
+
+ $res .= '</div>'; // .detail-block
}
$res .= '</div>';
$res .= '</div>';
}
.casestudies-detail-content {
- text-align: center;
background-color: #0194d5;
- padding: 50px 0 0px 0;
+
+ .detail-block {
+ .constrain(padding-top, 7.5vw);
+ .constrain(padding-bottom, 7.5vw);
+ .constrain(padding-left, 10vw);
+ .constrain(padding-right, 10vw);
+ }
.detail-text {
color: #fff;
- max-width: 708px; // 640 + 34*2
- margin: auto;
+ max-width: 850px;
+ margin: 0 auto;
position: relative;
z-index: 10;
}
.detail-text .titre {
- font-size: 32px;
- padding-bottom: 10px;
+ font-size: 60px;
+ line-height: 1.1;
+ margin-bottom: 0.5em;
}
.detail-text .dotclear {
.detail-visuel {
// padding: 0px 0 50px 0;
// z-index: 1;
- padding-left: 34px;
- padding-right: 34px;
- max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images
+ //padding-left: 34px;
+ //padding-right: 34px;
+ //max-width: 1268px; // Max image width + horizontal padding (this must be set so % margins scale properly on images
margin: 0 auto;
img {