CSS Hat
shares

I can’t find my download link. Where do I get it from?

You can download CSS Hat in your Source Profile, the license is automatically activated as you make the purchase. If you can’t access your account, please contact us.

If you purchased CSS Hat 1 before the launch of madebysource.com, you can retrieve your license here: Account retrieval.

The plugin is stuck on loading screen

CSS Hat 2 loading

This usually mean you don't have Generator enabled. To fix this, go to Photoshop->Preferences->Plug-Ins... and check the "Enable Generator" option. On Windows, it's located in Edit->Preferences->Plug-Ins....

There is a problem with Generator

Generator Error

If you experience this error, please send all generator log files that can be found here to team@madebysource.com:

With 2014.2 update the path has changed, you can find out your exact version of Photoshop in the first line of menu Help -> System Info...

OSX (2014.1 and older): ~/Library/Logs/Adobe/Adobe Photoshop CC/Generator
OSX (2014.2 and newer): ~/Library/Logs/Adobe/Adobe Photoshop CC 2014/Generator
(You can press cmd+shift+G in any finder window and copy the directory path there)

Windows (2014.1 and older): %AppData%\Adobe\Adobe Photoshop CC\Generator\logs
Windows (2014.2 and newer): %AppData%\Adobe\Adobe Photoshop CC 2014\Generator\logs
(You can press ctrl+L in file explorer window and copy the directory path)

I purchased CSS Hat 1, am I eligible for a free upgrade to CSS Hat 2?

Customers who purchased CSS Hat after August 11, 2013 are eligible for a free upgrade. All the customers who bought CSS Hat prior to this date get a 50% discount. To take the advantage of this offer, please enter your e-mail below. We’ll send you an email with more information.

How many machines can I use CSS Hat on with 1 license?

You can use CSS Hat on up to two machines at the same time with one license.

What can CSS Hat do?

CSS Hat is a Photoshop Plugin that lets you easily translate layer styles into CSS. Just select any layer and the code will appear in the panel. It even works when you select multiple layers – you will get the CSS code with selector for each layer.

On the export side, CSS Hat outputs pure standards-based CSS3 (and optionally vendor-prefixed properties for all major browsers), LESS, SASS and Stylus. You can also create your custom templates for your preferred languages.

Which layer styles does CSS Hat support?

CSS Hat supports these layer styles:

CSS Hat 2 supported layer styles

Other styles are not supported simply because of the fact that they are almost impossible to recreate using CSS. However, we are always innovating and trying to find other ways around.

What’s new in the latest version?

We have added multiple layers export, better support for text layer styles, custom output templates, middleware system, syntax highlighting… and many more features and bug fixes. You can read all about it on our landing page or in the change log.

Does CSS Hat work with text layers?

CSS Hat works great with text layers! The support for text layers has been dramatically improved in the latest update. CSS Hat can now give you properties like font-size, font-style, font-weight and text-decoration like line through, uppercase, small caps and underline.

CSS Hat also detects if there are more font styles in one text layer and automatically makes respective CSS selectors for each of them.

Which operating systems and Photoshop versions does CSS Hat support?

CSS Hat works on both Mac OS (10.7+) and Windows (XP+) machines with Photoshop CC2014 (15.0 or higher) installed. Unfortunately, the latest version does not support CS6 and lower. However, you can still download the old version which is compatible with CS4, CS5, CS6 and CC.

I do not have Photoshop CC, how can I access older version of CSS Hat?

You can access all of the previous CSS Hat versions directly in your Source Profile. Just click the link “Version 2.0” and a pop-up with the change log should appear. All of the version are available to download from there.

Can I purchase the older version compatible with Photoshop CS4+?

We offer a 50% discount to all users without Photoshop CC. Just click here to get this offer.

Do I have to buy Mac OS X and Windows version separately?

No, you automatically get both versions with every CSS Hat purchase.

I need an invoice for my purchase. Could you send it to me?

No problem. If the receipt from Paypal is not enough, send us an email to team@madebysource.com and we will send you the invoice.

The installation of CSS Hat failed. What should I do?

This issue occurs when the installer doesn’t have the permission to write in Photoshop folder. Please download the “.zip” from your Source Profile and follow these steps:

  1. Unzip the archive
  2. Follow the steps in the README file
  3. If you encounter any kind of problems or bugs, don’t hesitate to contact us at team@madebysource.com

Where can I find CSS Hat in Photoshop after installation?

After a successful installation, CSS Hat will be available in Photoshop. To locate CSS Hat in Photoshop please go to Menu Bar > Window > Extensions > CSS Hat.

How do I get updates?

We always inform our customers about all updates for CSS Hat. The update notification will be delivered directly to your Photoshop panel or via email. You can then get the update through your Source Profile.

What is the latest version of CSS Hat?

The latest version of CSS Hat is 2.0.

I am a designer — what can I do to make my designs easier to code?

Who is behind the hat?

CSS Hat is made by Source - https://madebysource.com.

I have another question

If you haven’t found what you were looking for in any of the answers above, feel free to contact us at team@madebysource.com.