Sprocket Theme - Form padding and style goes away on publishing

SOLVE
Highlighted
New Contributor

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

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

DesiredDesired

 

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

CurrentCurrent

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Contributor

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 referenceScreenshot 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

 

Reply
0 Upvotes
8 Replies 8
Highlighted
Regular Advisor | Partner

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

Stefen Phelps, Community Champion, Kelp Web Developer
Highlighted
New Contributor

 

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

form-3.PNG

Reply
0 Upvotes
Highlighted
Regular Advisor | Partner

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

Stefen Phelps, Community Champion, Kelp Web Developer
Highlighted
New Contributor

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:

 form-4.PNG

Is there a way to bypass this?

Reply
0 Upvotes
Highlighted
New Contributor

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?

Reply
0 Upvotes
Highlighted
Regular Contributor

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 referenceScreenshot 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

 

Reply
0 Upvotes
Highlighted
New Contributor

Thanks a lot Venki! Your solution helped. 

Cheers!

Reply
0 Upvotes
Highlighted
Regular Contributor

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


 

Reply
0 Upvotes