HELP! Linking to a CSS file


(Kathleen Lota) #1

Hi there -

Hope someone can help me because I am sooo confused and am on a deadline of course! I see there was a similar question posted but I don’t quite understand.

I need to link my HYPE file to a very detailed stylesheet. The fonts have already been brought into the file and were working as a stand-alone. Meaning if I just type and clicked on the Font menu I could see and add what I wanted, but I have a large job with lots of styles for multiple headers, bullets, etc. I’ve tried adding the CSS to the head section, and adjusting it for the resources folder but I’m definitely doing something wrong.

I’m attaching a screen shot of my folder structure. The CSS file exists in the HTML folder.
I’m also attaching a screen shot of HYPE, where you can see the CSS has also been added to my resources. And just for the hell of it, I will also add my actually CSS file. Oh I can’t :slight_smile: Then a screen shot of the amount of CSS detail I am looking to do.




#2

So you have three fonts that you need to inform Hype about:

KarbonRegular

KarbonSemibold

KarbonBold

In the ‘Add Custom CSS’ panel you have open, place this in the fields:

For KarbonRegular:

Display Name: Karbon Regular
CSS Font-Family: KarbonRegular
(The font-family should match the value within quotes that you defined in your stylesheet)

For Karbon Semibold:
Display Name: Karbon Semibold
CSS Font-Family: KarbonSemibold

For Karbon Bold:
Display Name: Karbon Regular
CSS Font-Family: KarbonBold

You may have seen that you need to use ${resourcesFolderName} to access fonts in your resource folder, but this won’t be necessary in your case because your CSS file is in the same folder as your fonts. There’s no need to insert folder names or variables.

To get your h1, h2, etc to work, you’ll need to uncheck ‘Protect from external styles’ in the Document inspector prior to exporting. You should see this take effect in your document if you are using <h2>H2 Text</h2> tags in your inner HTML.


(Kathleen Lota) #3

Thank you Daniel! That was fast :slight_smile:

I hope you can continue to help me work through this. I did add the fonts the way you asked. My resources now have a slew of these fonts - I’m thinking I should delete the older versions… the top 4 are what I just added.

I did also uncheck that very important box in the Document Inspector. But I don’t see the styles taking effect. Here’s what I am seeing vs what I am hoping to see.

Thanks!
Kathleen


#4

If you control + click on the text in Safari when you preview, you can see exactly the CSS styles that are taking effect in the CSS inspector.

I’m not sure how you’re setting ul/li styles, but you may need to adjust how you do that.


(Hans-Gerd Claßen) #5

do you like to share the fonts and css … may be someone can point you in the right direction …


(Kathleen Lota) #6

Sorry for my delay. I’m juggling! I think this works now but I wont hesitate to reach out again if there are more issues.