How to create a page that can be saved as a CSS file

[rickbyrd]

I have been asked to create a page that contains specific code that can then be saved as a CSS file.

Here is an example of what I am trying to accomplish - https://toechok.com/toechok-injection.css

Go to that page and select Ctrl+S and you can save the file as a Cascading Style Sheet Document.

Also, how do I put this code on a page without any other code on the page? Any page I create contains all the code from our template and additional header code.

[Jnix284]

@rickbyrd to create a page that opens as CSS, you will need to create the CSS file in Design Tools and then use the file path to generate the link:

[rickbyrd]

@Jnix284,

I did create a css file under the root domain - 

How do I create a page with the file? When I go to the bigpictureloans.com/bigpictureloans-injection.css I get a 404 page.

[Jnix284]

@rickbyrd if it's under the root domain, it should work, did you check the path just to be sure?

The public URL will wrap it in a get_asset function, but you can also modify that to get the path.

[rickbyrd]

@Jnix284,

When I copy path I get /root/bigpictureloans-injection.css and when I public URL I get {{ get_asset_url('/root/bigpictureloans-injection.css') }}.

We use a template for our website so not sure if the CSS file is supposed to go somewhere else. Our Design Tools directory is quite muddled.

[Jnix284]

@rickbyrd since it isn't a file published on your website directly, you would need to include that file path with the directory information for your files in design tools.

Looking at the dev console, you have a CSS file here where you can copy the URL info from:

You'll have to figure out if this string changes based on whether it is in the subfolder or not, I've never tested this and I also have never attempted to share a direct link to a CSS file as you are, so it will take a little testing to narrow down the URL you need.

[rickbyrd]

@franksteiner79,

Unfortunately, that will not solve the problem.  Putting the CSS code in the header or footer will not change the fact that I need to be able to save the page as a CSS file.

If you go to the example URL I gave and click CRTL + S you can save the page as a CSS document - 

That is part of what I need to do. The other part is having a page with only the code, with nothing else on the page. I can not do that because our website uses a theme and other script codes for tracking purposes.

[franksteiner79]

Hi @rickbyrd 

You can add custom code snippets to specific pages by going to that page in HubSpot, click edit page, the go to the settings tab and expand the "advanced options". You will see this:

You can then add the additional code either in the header or footer.

I hope that helps.

Frank