Home Forums Add-ons Flexible Content Field Wrapper class to flexible content fields Reply To: Wrapper class to flexible content fields

  • 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;