Reply To: Wrapper class to flexible content fields

• Jonathan

• June 28, 2015 at 7:23 pm

Hi @smeisinger

I would not recommend hacking the core plugin. You wont be able to update without redoing your hack again each time an update is available.

If we take a look at the outer element for each flexible field content you’ll find that it contains a data-attribute with the flexible fields name. We can use that to target each specific type. Here’s an example that should be enough for you to go on! I haven’t tested this live.

.layout[data-layout="flexiblefieldname1"] {
    position: relative;
}

/* An example of how you might add your custom icons. This example is using an imaginary icon-font but you could do it differently */
.layout[data-layout="flexiblefieldname1"]:after {
    content: 'a'; /* our textfield icon for example */
	text-transform: none !important;
	font-weight: normal !important;
	font-style: normal !important;
	font-variant: normal !important;
	font-family: "Name of your icon font" !important;
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale; 
	position: absolute;
	right: 70px; /* make sure the icon appears to the left of the hover icons */
	top: 5px;
}