topic Re: Sprocket Theme - Form padding and style goes away on publishing in CMS Development

Sprocket Theme - Form padding and style goes away on publishing

karanmonga — Tue, 15 Sep 2020 16:41:44 GMT

I am using Sprocket.io to build landing pages using the SR-Theme

The picture below is how I want the form to look.

Desired

However, this is how the page looks when I publish it.

Current

Please note: The style setting can be seen before publishing however they get removed after publishing.

Re: Sprocket Theme - Form padding and style goes away on publishing

stefen — Tue, 15 Sep 2020 16:45:27 GMT

@karanmonga do you have a preview link? It's most likely an iframe background color being applied via CSS somewhere but it's hard to say without a link.

Re: Sprocket Theme - Form padding and style goes away on publishing

karanmonga — Wed, 16 Sep 2020 15:48:13 GMT

I can see that the sr-base.min.css script is getting overwritten by another property. Could you tell me how to remove that?

Re: Sprocket Theme - Form padding and style goes away on publishing

stefen — Tue, 15 Sep 2020 16:53:58 GMT

@karanmonga you can use the following CSS to override the white background:

form.hs-form { background: none; }

I also noticed there is a "bg-white" class on a parent div around the form. You'll want to remove that as well.

Re: Sprocket Theme - Form padding and style goes away on publishing

karanmonga — Tue, 15 Sep 2020 16:59:25 GMT

Thank you for the response.

Could you tell me where to edit the CSS inside the theme?

Since I am using Sprocket I am unable to change the design settings since I see this:

Is there a way to bypass this?

Re: Sprocket Theme - Form padding and style goes away on publishing

karanmonga — Tue, 15 Sep 2020 19:21:30 GMT

Hi Stefen, I found the css files however I am unable to find the sr-base.min.css file inside my design manager. Is that the same as the sr-base.css file?

Could you please help me find it?

Re: Sprocket Theme - Form padding and style goes away on publishing

Venki — Wed, 16 Sep 2020 12:41:54 GMT

Hi Karan,

This is an alternative solution to modify and update your CSS code snippets.

Once I encountered the same issue to edit the CSS and update it.
However I found a different solution to make it work.

Go to your Site page-->Edit Page-->Navigate to Setting Tab

Scroll Down and expand Advanced options

Go to Additional code snippets

Under Head Html

<style>

(Insert your css code snippets)

</style>

Once you done the changes click Publish.

Screenshot for your reference

Note: If you have the right class or id selector this method will work.
Let me know if it's worked on your end.

Regards,
Venki

Re: Sprocket Theme - Form padding and style goes away on publishing

karanmonga — Wed, 16 Sep 2020 15:47:25 GMT

Thanks a lot Venki! Your solution helped.

Cheers!

Re: Sprocket Theme - Form padding and style goes away on publishing

Venki — Wed, 16 Sep 2020 16:05:09 GMT

You are welcome Karan!

Hope you found the right code snippets for your

requirement.

In case if you want to apply CSS globally to all your pages, you can go to the

Design manager or Settings-->Website-->Pages and follow the same procedure
(It's only recommended for the global classes used all over the pages)

Regards,
Venki