How to add 3rd pty CSS in the head?


I use a 3rd party Mail Blast Thing. It works nicely but the layout of the Opt-in form could be better. The support recommends to add a style in the head of the website. But how can i do this?

The form itself is placed as external content.
I could save the files to my hard drive, edit the opt-in page and load it separately to the webspace. But i assume that the next sparkle publish sets it back to what it was.

Any advice?

Mr. F.

@Mr_Fozzie, Have you checked our Settings / Developer / Developer Options?
This will allow what you want to do without wiping it on the next publish…

OMG. This is € 110,- :flushed:

Way too much for a little fun.

Thank you anyway.

Mr. F.

You don’t need to have CSS in the page head necessarily. A regular embed will work fine.

Unfortunately it does not work. Therefore my question.
On canvas and in preview it was fine. The text appeared in the right size.
After uploading the page / project, the text was much smaller.
I can not provide the original code because i replaced the text with a PNG.

@duncan: in case you want to have a deeper look into this, please send me an email.

Mr. F.

I think this may have something to do with the way in which you’ve added the CSS and applied it the elements you’re styling.

Basically, there are two things to consider. First up is the CSS itself. These are a simple set of styling instructions, such as font, colour, font size borders, background colours etc. Secondly, there is the application of the styles to individual content elements on your page. At the simplest level. CSS instructions are given a name, which can be the name of the element you’re styling within the page. For example. A typical CSS instruction may look like this:

In this example, the CSS instructions are given the same name as the element being styled (body, h1, and p). If you simply add the css part of the above example to your sparkle page through an embed widget, the styles will be applied on all body, h1 and p elements in your page. To prevent this from happening, Sparkle allows you to paste a complete piece of code that includes the styling elements as well as the content to be styled all within its own html tags. This keeps the styling within the element you place on the page using the embed widget. This is how the above html code looks on a sparkle page:

I can now continue designing the page with other elements that are h1, body and p without having these same CSS styles applied to them.

From your original post, it sounds like you have a piece of styling code that has to be pasted in the head of your page (not a self-contained html element that includes the content). If I’m correct, I think you will have to combine the CSS AND the html content to be styled into a single piece of code that can be added as an embed widget. In pure CSS that is added independently of the content, each style will have a class name instead of an element name. So, instead of having h1 as the style name, you may see something like .heading followed by the styling parameters. For this type of code to work, you have to assign the style to individual elements on your page by adding the class name to the element you wish to style.

My guess is that you have probably got the CSS and the HTML as two separate pieces of code, so to add this successfully to Sparkle, add the embed widget and paste the CSS into the code box IMPORTANT: make sure the css code is wrapped in style tags. Then, immediately under the closing style tag, paste the HTML code. This should contain the content that is to appear on the page, complete with the style selectors already in place. This will create a piece of html code that is independent of any other page element and should appear on your screen within a single container that can be resized and moved just like any other element.

1 Like


When i have designed the opt-in form with the 3rd pty online editor, i have two options to transfer this code to my webpage: (a) as an iframe, what i don’t like (b) as HTML.

I copy the HTML code and paste it in one piece in the external content box.
The first part is the style sheet:

@font-face { font-display: block; font-family: Roboto; src: url(https://assets.sxxxx.woff2) format("woff2"), url(https://assets.sxxxx.woff) format("woff") } @font-face { font-display: fallback; font-family: Roboto; font-weight: 600; src: url(https://assets. and more lines (personal data deleted). A bit further down is the code for the form itself. As i said, on canvas and in sparkle preview it's fine. After publishing, some styles are not as in preview. No worries, i found a solution that works for me. I like it simple and i'm not a code guy. Mr. F.