Component Shortcodes do not render selected colors

[Jmot]

I’m finding that when I use Component Shortcodes, none of the styling selected for the various backgrounds and elements are being rendered on the front end. They just use default black and white, and the default site link color for links.

It’s ignoring seemingly all styles including font styles, line-height, etc (seen in all of the headlines and text). Here are screenshots for comparison, the first being what it looks like in Cornerstone, the second what it looks like rendered on the front end via the Component shortcode:

The Component shortcode is being used inside of a Tab Element.

[prakash_s]

Hello @Jmot,

Thanks for writing to us.

In order to help you with your concerns we need to check your settings I would request you, please share the admin login details meanwhile I would suggest you troubleshoot a few of the common issues before we investigate your settings. Please share your details in a secure note. Please provide the following details

• WordPress Login URL
• Admin-level username and password

You can find the Secure Note button at the bottom of your posts

Thanks

[Jmot]

Thanks @prakash_s, I updated the secure note above with admin login credentials.

Also, I did run through the common issues/troubleshooting and nothing fixed it. I appreciate your help looking into this.

[prakash_s]

Hello @Jmot,

Thanks for sharing the login details I went ahead and checked your settings it seems that your Palette color or accent font is not rendering properly on the site.

I would suggest you please manually add the color code in the RGB format on the element, I suspect this could be a bug and have reported it to the developers for investigation.

Thanks for understanding

[Jmot]

Thank you for the followup @prakash_s. Please also note in your bug report that the headline font selections are not working, nor is the link styling following the style parameters set for for that element.

I hope this can be fixed quickly, as I’m presently building a massive site and will have many, many instances of this use case and my only other option is to hand-code everything, which I just can’t afford to do at this point.

[Jmot]

Here’s the latest happenings with Component Shortcodes being pasted into Tab elements. The first image is what it looks like in the builder, the second image is what it looks like on the front end.

There’s just so much that’s not rendering properly when it comes to component shortcodes. I critically need these to work right and I can’t wait weeks. Working in the new Cornerstone has been so buggy I’m operating at a fraction of my normal speed and it’s costing me a lot of time and money missing deadlines which, historically, I just don’t do.

Not mad at anyone, this is just a very difficult situation and I really hope you can help speed up these fixes.

[ruenel]

Hey @Jmot,

On which page you have added that Component that is shown in the screenshot above? Could please save it as a template and send it to us so we can test it on our local testing server as well?

Meanwhile, we have escalated the issue already. I will bump it again so our developers will make it a priority.

Thanks.

[Jmot]

Hi @ruenel, you can find that in the “WHAT TO EXPECT” tab on this page: https://streamsstaging.wpengine.com/streams-healing-house/

The Component content is in this page: https://streamsstaging.wpengine.com/cornerstone/edit/460

Not sure what parts you want me to save as a template… but you’re welcome to grab whatever you need. The login credentials are listed previously in the thread in a hidden note. Thank you for continuing to escalate the issue.

[ruenel]

Hello @Jmot,

In each of your Row element settings, you will have to set a width that should be at least 100% so that the Row will occupy the current width of the Row element container.

Hope this helps.

[Jmot]

@ruenel did you happen to test that before sending this note? Unfortunately all what that does is make it a different form of broken. See screenshot.

But here’s the larger point—none of us users should have to make additional changes in order for a cornerstone Component shortcode to display properly. That shortcode should display the content exactly as it is seen in the builder. To have to troubleshoot, adjust, re-adjust, double-check, and tweak until what displays on the front end matches what it looks like in the builder is simply a bad experience.

I realize that at this point I can, for some things, keep tweaking until it gets there (in this case, change it to a vertical flexbox layout, but even when I do that I discover that the bullets are all ignoring their styling and all of the spacing there has disappeared). It’s a cat-and-mouse game that shouldn’t exist and that presently is killing the speed in which I typically build sites. That’s the point. It needs to work like global block shortcodes worked.

Again, not mad at you, we just need stuff like this to work. We depend on it. I appreciate your continued help.

[charlie]

Unfortunately the component shortcode has some limitations right now that we will address, but I think I can get you some solutions for the meantime.

The global shortcode is still available. Whatever your ID for the component is (cornerstone/edit/THE_ID) you can use that for a shortcode [cs_gb id="THE_ID"]. It will output the entire component workspace is the difference between the two. I do wish there was a UI indicator for this so I’ll make a note.

Since you’re using the tab element, in the current Beta (6.2.0-beta1) we have support for using elements inside the tab content and not just raw HTML. You can try that out or wait till the full release next month, I found no limitations with it. It was a common workaround to use the shortcode here and accordion so you can get around that entirely and just use the component directly in your tab.

Let us know if that helps and have a great day!

[Jmot]

I missed your response here—thanks for taking the time, @charlie. I’ll see what I can do with the cs_gb shortcode from before.