Shortcodes on pages - missing styles

Bricks Version: 1.1.3
Browser: Chrome 91
OS: Windows
URL:

I just encountered a problem when placing a shortcode on a page. The Shortcode loads a slick-slider product carousel, but the styling does not get applied (see the bullets). If i do the exact same thing in a new post, it works as expected.

I am using the default templates, nothing custom.

See the video (left posts, right page): https://vimeo.com/573436117/07ae297d80

Hi @timmse,

Thank you for reporting this problem and providing a video.

It appears that you’re actually using Bricks v1.3.1 so just update that in the post if possible so that it doesn’t cause confusion.

Which plugin provides the shortcode you’re using? Are you using any Theme Styles? Theme Styles have conditions, so it’s possible that you have Theme Styles applied to posts but not pages.

Regards,
Bruno

Hi @ribarich ,

you´re right, the version is v1.3.1 - but i cannot edit my post… the edit button is gone :thinking:

The Plugin who provides the shortcode is an eCommerce Plugin (attached to a ERP system especially for motorcyle dealers), which is unfortunately not available for public (damn). No, I checked again to see if Theme Styles are applied, but neither posts nor pages have any applied.

Then i took a deep dive… and found the problem. The outer wrapper of the carousel get´s removed on pages (but not on posts, which is still strange), therefore the styles that refer to the outer wrapper are not applied.

The outer wrapper is built within a function inside the eCommerce Plugin:

public function wrap_content( $content = null ): string {
	if ( null === $content ) {
		$content = $this->gutenberg_template_post->post_content;
	}
...

If i change the if condition to

if ( is_null($content)) 

the outer wrapper will be inserted an everything is working as expected on bricks pages. Woohoo!

The problem really only shows up in bricks. I tested TwentyTwenty, TwentyTwentyOne and OceanWP (the recommended theme of the Plugin Developer), all of them work straight away without any plugin code changes…

I would really like to mark the post as solved… but there is still the problem with the edit button and the question, why does it work on posts, but not on pages?

Regards,
timmse

Hi @timmse,

This sounds hard to debug without taking a closer look.

If it is possible, please send us an email at help@bricksbuilder.io with a link to a site where this is happening and create a temporary admin account for us to use. Also link to this forum thread in the email.

I’d be happy to help figure out why this is happening.

Regards,
Bruno

Hi @ribarich ,

sorry for the delay. I just sent an email to help@bricksbuilder with the credentials.

Thank you very much!

Regards,
timmse

it’s happening to me also!

Version: 1.7

Any news on this?

Same problem, and don’t understand why it’s happening, because it is not happening with all shortcodes.

In my case is in a product page with a shortcode inside a term loop.

maybe it’s a problem of nesting shortcodes?

thanks

I found what is happening in my case.

The shordcode is render inside a loop, and the css style has only the id code: lile “#bricks-element-cdkknl” so if is looped, then the “.bricks-element-cdkknl” does not appear.

if I change condition in file /includes/templates.php line 163, to true, then the styles appears.

PROBLEM FOUND:
The problem is that i first used the component outside a loop and then used inside a loop, and this makes that as the first is loaded outside the loop the inline css is render with #bricks-element-id instead of .bricks-element-id, so then the ones inside the loop it does not render properly…

Please some fix for this!

Hi Mikel,

I haven’t dealt with my problem since then, so I don’t know if it works now or not.
What kind of shortcode are you dealing with? Where does it come from, what does it do?

Did you try to create a component and load it in the same page twice? one outside a loop, which prints #id only css and then load inside a loop, which does not apply #id to the element?

Nope, as I said, I haven’t dealt with my problem since then.