Custom CSS doesn't seem to want to "stick". | Community
Skip to main content
A
Anonymous
September 4, 2013
Solved

Custom CSS doesn't seem to want to "stick".

  • September 4, 2013
  • 9 replies
  • 2057 views
I'm trying to link to a custom CSS file to gain some additional styling control over my iframed form. 

I added a call in the <head> to load the CSS in the markup for the template that I'm using, but even after it saves the call to the CSS disappears when previewing the template or viewing the source.

So I then added a HTML snippet to the Landing Page that called the CSS and save it, but again when previewing and looking at the source of the completed form, there is nothing there.

Am I missing a step or doing something wrong? 


This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by
Do you have inline CSS in the BODY section of your iframed landing page that is over-riding the CSS that you added in the HEAD section of the template that you are using for your iframed landing page? Also be sure that you are approving the landing page drafts that are created when you modify the template upon which they are based.

9 replies

A
Anonymous
Accepted solution
September 5, 2013
Do you have inline CSS in the BODY section of your iframed landing page that is over-riding the CSS that you added in the HEAD section of the template that you are using for your iframed landing page? Also be sure that you are approving the landing page drafts that are created when you modify the template upon which they are based.
A
Anonymous
September 5, 2013

Hi Matt,

Are you testing the approved page, or only the preview? From what I understand, the CSS isn't even in the page after it's saved - so can I also ask for the line of code that you're using to link to the CSS file and exactly where you're placing it?

Thanks,
Brody

A
Anonymous
September 5, 2013
Was a two step problem. I was calling the CSS strangely and not approving the changes. This seemed to work in an HTML element:

<style media="screen" type="text/css">
@import "http://[url]/custom.css";  
</style>

Thanks!
A
Anonymous
September 5, 2013

Great, glad you sorted it out Matt.

Also, you're much better to link to a CSS file than to use @import, as this method can cause the CSS to load later than the standard link method - unless you have a particular reason for doing so ;)

Regards,
Brody

A
Anonymous
September 5, 2013
So if I add this to the HTML element instead:

<link rel="stylesheet" type="text/css" media="screen" href="http://[url]/custom.css" />

It would be automatically placed into the <head>?
A
Anonymous
September 5, 2013
Hi Matt,

When editing a landing page, you can add to the head tag in the Meta Tags editor. Add the above link to your css in this area and it should achieve your goal.





Does that help?

Thanks,
Brody
A
Anonymous
September 5, 2013
Awesome suggestion, Brody. I hadn't noticed that option. 
A
Anonymous
September 5, 2013
This is good for one-off changes, but if you need it to be in every landing page, its better to put it in the HEAD section of the landing page template.
A
Anonymous
September 5, 2013
No problem Matt,

And as Elliott has stated, this is the best solution for one-offs, but definitely add it to a template if you need this to be on multiple pages.

Good luck with your project!
Brody
Terms & ConditionsAccessibility statement

Loading footer...