How to Rip CSS from a .html Template

How to Rip CSS from a .html Template

In case you wanted to rip the CSS from a blog template, I’ve written the following.
This assumes that you know how to make a separate CSS work with your newly stripped .html file.

  1. In the tree, create a .html file and name it (hopefully under a CSS folder), ie., myCSSFile.html
  2. Get a template with internal CSS.
  3. Open it from within KompoZer.
  4. Click KaZcadeS on menu.
  5. Hit rule or in KopmpoZer just hit the painter’s palette.
  6. Hit “Create Style rule”.
  7. Select the “export stylesheet and switch to exported version”.
  8. Delete the internal CSS if it still shows on the left pane.
  9. “Save as” the adapted template to the appropriate folder.
  10. (You’re almost done.) At this point you’ve created an absolute local link. You need a relative link, thus open up KompoZer’s Source feature and edit the href to reflect this (on line 10-16 or so). ie., href=”file:///Users/MYUSER/Sites/public_html/myCSSFile.html” to something like “href=”../../public_html/myCSSFile.html”. (Hint: “../” is key; It’s working backwards. “../” dictates to look backwards relatively from where it started. The path stops once you hit the same level as the folder that contains the CSS file [named as a .html file, else KompoZer will not open it if you name it with a .css extension]).

Congratulate yourself and wipe the sweat off your brow; You’re done!

How to Test a new stylesheet in KompoZer

  1. Create a “Rule”, creates an “internal stylesheet”
  2. “@import” and input CSS url
  3. Select “Create Import-At-rule”

Maurice Cepeda

This is licensed under the Attribution-NonCommercial-ShareAlike 3.0 Unported Creative Commons License. All brands mentioned are properties of their respective owners. By reading this article, the reader forgoes any accountability of the writer. The reading of this article implies acceptance of the above stipulations. The author requires attribution –by full name and URL– and notification of republications.


2 thoughts on “How to Rip CSS from a .html Template

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s