I am looking for a way to add a wrapper class to .flex-caption within flexslider fields? I had a quick look at the module code but a solution was not obvious to me.

I am just looking for an extra level of flexibility for styling a caption background across the full width of my flexslider, whilst keeping the caption text aligned within an internal container.

I hope to achieve something like this;

.flex-caption-wrapper {;
	width: 100%;
	background: rgba(black, 0.5);
	top: 10%;
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
}
.flex-caption {
	font-size: 36px;
	max-width: 1200px;
	color: white;
	top: 10%;
}

Comments

MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented
Issue summary: View changes
jeanpaulbouvet’s picture

jeanpaulbouvet CreditAttribution: jeanpaulbouvet commented

I suppose you use views for you flexslider
You can rewrite the result and add a <div> around it

example : you use Content:Body as Caption Field
In Configure field: Content: Body
In REWRITE RESULTS -> Rewrite the output of this field :
<div class="flex-caption-wrapper">[body]</div>

MrPaulDriver’s picture

MrPaulDriver CreditAttribution: MrPaulDriver commented

@johnpaul Actually no, I wasn't thinking of views and yes, I know you can do whatever you want with views rewrite.

I was thinking with flexslider fields, as I find this method much better if you don't need the extra functionality which views can bring.

candelas’s picture

candelas CreditAttribution: candelas commented
Status: Active » Closed (fixed)

I am using Views and what I made to get a wrapper was to not assign a caption in Format: FlexSlider | Settings. Then in the title field (my caption) in Style settings, Customize field HTML as a div with class flex-caption and Customize field and label wrapper HTML with div and class flex-caption-wrapper. I also rewrited the output to make it to have a link from other field.

I close the issue, since it is old.