Sprocket Theme - Form padding and style goes away on publishing

[karanmonga]

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.

[stefen]

@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.

[karanmonga]

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

[stefen]

@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. 

[karanmonga]

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?

[Venki · Accepted solution]

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

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

[karanmonga]

Thanks a lot Venki! Your solution helped. 

Cheers!

[Venki]

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

[karanmonga]

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?