Blog, Website & Page Publishing

rickbyrd
Participant

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

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.

0 Upvotes
8 Replies 8
farhakhan
Member

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

Struggling to save some CSS code as its own file? You're not alone! I recently learned a handy way to do this.

 

Here's the trick:

1- Create a new webpage.
2- Paste your CSS code directly onto the page.
3- Save the page as a ".css" file (e.g., "mystyles.css").

 

That's it! You've got your CSS code saved in its own file, ready to use.

Big thanks to [invalid URL removed] for the example! They have a CSS file you can even try saving yourself (just right-click and choose "Save As").

Now, for those wondering how to add this CSS code to a webpage without any extra template stuff – that's a question for another day!

0 Upvotes
Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

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

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

 

Jnix284_0-1674493647660.png

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

rickbyrd
Participant

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

@Jnix284,

 

I did create a css file under the root domain - 

rickbyrd_0-1674495341148.png

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

 

0 Upvotes
Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

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

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

 

Jnix284_0-1674495627030.png

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

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

0 Upvotes
rickbyrd
Participant

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

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

 

0 Upvotes
Jnix284
Most Valuable Member | Elite Partner
Most Valuable Member | Elite Partner

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

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

Jnix284_0-1674497039853.png

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.

 


If my reply answered your question please mark it as a solution to make it easier for others to find.



Jennifer Nixon - Delivery Lead at Aptitude 8

connect with Jen on Linkedin

rickbyrd
Participant

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

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

rickbyrd_0-1674486693189.png

 

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.

 

0 Upvotes
franksteiner79
Key Advisor

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

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:

Screenshot 2023-01-20 at 17.16.52.png

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

 

I hope that helps.

Frank

Found my comment helpful? Great! Please mark it as a solution to help other community users.


Frank Steiner

Marketeer | HubSpot Expert | CRM Consultant

InboundPro

Let's Talk About Your Project