Title: Output gallery CSS inline
Last modified: February 4, 2026

---

# Output gallery CSS inline

 *  Resolved [Dumel](https://wordpress.org/support/users/dumel/)
 * (@dumel)
 * [2 months, 1 week ago](https://wordpress.org/support/topic/output-gallery-css-inline/)
 * Greetings 🙂
   I’m trying to embed a gallery into an Elementor Pro tabs widget.
   I use the Advanced Tabs widget by Essential Addons for Elementor but while I 
   can see the gallery, I also see the raw CSS e.g.:#foogallery-gallery-28342.fg-
   justified .fg-item { margin-right: 2px; margin-bottom: 2px; } #foogallery-gallery-
   28342.fg-justified .fg-image { height: 200px; } #foogallery-gallery-28342_1.fg-
   justified .fg-item { margin-right: 2px; margin-bottom: 2px; } #foogallery-gallery-
   28342_1.fg-justified .fg-image { height: 200px; } Is there a way that I can prevent
   this from happening?

Viewing 8 replies - 1 through 8 (of 8 total)

 *  Plugin Support [elviiso](https://wordpress.org/support/users/elviiso/)
 * (@elviiso)
 * [1 month, 3 weeks ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18823344)
 * Hi [@dumel](https://wordpress.org/support/users/dumel/)
 * Can you share a link to a page or post where this is occurring so that we can
   analyse it and advise on what to do to prevent this? Thanks.
 * Regards,
   Elvis
 *  Thread Starter [Dumel](https://wordpress.org/support/users/dumel/)
 * (@dumel)
 * [1 month, 3 weeks ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18823360)
 * Hi Elvis
 * I’m now using the Elementor Pro Tabs widget (that comes standard with Elementor
   Pro) to display a dynamic ACF field. In this rich text ACF field I added text
   and a FooGallery shortcode. Everything works except that some raw CSS styles 
   are visible:
   [https://pemburytours.com/tour/11-day-east-africa-adventure/](https://pemburytours.com/tour/11-day-east-africa-adventure/)
   This page is not meant to be public yet so I hope that your next response doesn’t
   also take so long because I don’t really want Google to index it yet 🙂
 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [1 month, 3 weeks ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18824700)
 * Hi [@dumel](https://wordpress.org/support/users/dumel/)
 * I had a look and it looks like the widget is stripping the style tags from our
   gallery output which results in the CSS code showing. I am not sure why that 
   is happening.
 * I tested the tabs built into Elementor, and it showed the gallery without this
   problem, so I think it has something to do with the way you have setup ACF with
   the shortcode.
 * Please can you explain your config setup with ACF in more detail, so I can reproduce
   the issue on my end, and ultimately find a solution for you?
 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [1 month, 3 weeks ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18824744)
 * [@dumel](https://wordpress.org/support/users/dumel/) just an update on my testing…
 * I setup ACF with a page field called FooGallery, and then I edited my page with
   the tabs and set that value to a justified gallery I had already created. I then
   added a text editor to the tab content with a dynamic field and set it to my 
   foogallery ACF field.
 * Then for the dynamic field under advanced, I set Before to `[foogallery id="`
 * Then I set After to `"]`
 * And it showed the dynamic gallery without any issues. So my next guess as to 
   why it’s a problem on your side is a plugin that is doing some form of minification
   or caching when it comes to the inline styles. To test this theory, disable CSS
   minification in your caching/speed plugin and see if you still have the problem
 *  Thread Starter [Dumel](https://wordpress.org/support/users/dumel/)
 * (@dumel)
 * [1 month, 3 weeks ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18825870)
 * [@bradvin](https://wordpress.org/support/users/bradvin/). Thank you for the quick
   reply.
 * If I change the ACF field to text or textarea with [foogallery id=” before and“]
   after, then my gallery also works. Even if I use the full shortcode eg [foogallery
   id=”28353”], the gallery still works. It also works if I add text before and 
   after the full shortcode.
 * The problem comes in where I change the ACF field to WYSIWYG so that I can format
   my text. The problem is that I need to have text and galleries intermingled, 
   and the text need to be formatted into level headings etc. so the ACF field needs
   to be WYSIWYG.
 * My caching plugin is not minifying.
 *  Thread Starter [Dumel](https://wordpress.org/support/users/dumel/)
 * (@dumel)
 * [1 month ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18850505)
 * [@bradvin](https://wordpress.org/support/users/bradvin/) Just wondering if you’ve
   had a chance to look at this again? I’m quite anxious to go live with new page
   layouts 🙂
 *  Plugin Author [bradvin](https://wordpress.org/support/users/bradvin/)
 * (@bradvin)
 * [4 weeks, 1 day ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18851415)
 * hi [@dumel](https://wordpress.org/support/users/dumel/)
 * I dug into the elementor code to see how it was handling ACF wysiwyg fields. 
   Elementor calls
 * `echo wp_kses_post( $value );`
 * For the ACF wysiwyg field, which strips the style tags that we generate for a
   gallery. To get around this, the fix is quite elegant. All you need to do is 
   override the built in allowed_html tags that wp_kses_post uses and then the tag
   is no longer stripped. You will need to add this custom code to your functions.
   php or code snippet or similar:
 *     ```wp-block-code
       /** * Overrides the allowed html tags used for wp_kses_post.  */add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {	if ( 'post' === $context ) {		$tags['style'] = true;	}	return $tags;}, 99, 2 );
       ```
   
 * I have tested this locally and it no longer strips the tag, so you no longer 
   see the CSS output on the page.
 * I also want to point out that this is not a bug with FooGallery. This is not 
   even a bug in Elementor or ACF – they are doing what they should be doing. This
   was an unfortunate outcome from plugins trying to do the right thing (strip unwanted
   HTML from the output) and the gallery output (which includes style tags) was 
   being caught in the middle.
 *  Thread Starter [Dumel](https://wordpress.org/support/users/dumel/)
 * (@dumel)
 * [4 weeks, 1 day ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18851614)
 * [@bradvin](https://wordpress.org/support/users/bradvin/) – This is such a relief,
   thank you very much for finding a solution. Your code didn’t work for me but 
   put me on the right track and this did the trick for me:
 *     ```wp-block-code
       add_filter( 'wp_kses_allowed_html', function( $tags, $context ) {    $tags['style'] = true;    return $tags;}, 99, 2 );
       ```
   

Viewing 8 replies - 1 through 8 (of 8 total)

You must be [logged in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Foutput-gallery-css-inline%2F%3Foutput_format%3Dmd&locale=en_US)
to reply to this topic.

 * ![](https://ps.w.org/foogallery/assets/icon-256x256.gif?rev=2602542)
 * [Gallery by FooGallery](https://wordpress.org/plugins/foogallery/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/foogallery/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/foogallery/)
 * [Active Topics](https://wordpress.org/support/plugin/foogallery/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/foogallery/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/foogallery/reviews/)

 * 8 replies
 * 3 participants
 * Last reply from: [Dumel](https://wordpress.org/support/users/dumel/)
 * Last activity: [4 weeks, 1 day ago](https://wordpress.org/support/topic/output-gallery-css-inline/#post-18851614)
 * Status: resolved