CMS Development

karanmonga
Participant

Sprocket Theme - Form padding and style goes away on publishing

Résolue

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.

0 Votes
1 Solution acceptée
Venki
Solution
Contributeur

Sprocket Theme - Form padding and style goes away on publishing

Résolue

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

 

Voir la solution dans l'envoi d'origine

0 Votes
8 Réponses
stefen
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Sprocket Theme - Form padding and style goes away on publishing

Résolue

@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
karanmonga
Participant

Sprocket Theme - Form padding and style goes away on publishing

Résolue

 

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

0 Votes
stefen
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

Sprocket Theme - Form padding and style goes away on publishing

Résolue

@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
karanmonga
Participant

Sprocket Theme - Form padding and style goes away on publishing

Résolue

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?

0 Votes
Venki
Solution
Contributeur

Sprocket Theme - Form padding and style goes away on publishing

Résolue

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

 

0 Votes
karanmonga
Participant

Sprocket Theme - Form padding and style goes away on publishing

Résolue

Thanks a lot Venki! Your solution helped. 

Cheers!

0 Votes
Venki
Contributeur

Sprocket Theme - Form padding and style goes away on publishing

Résolue

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


 

0 Votes
karanmonga
Participant

Sprocket Theme - Form padding and style goes away on publishing

Résolue

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?

0 Votes