New Hype user having trouble with css classes

Elements Typography
1

Hi there,
Really enjoying playing with Hype.

I’m having a bit of trouble getting the css class name working in the inspector tab for text boxes.

Basically I’ve got a text box that I want to style using an external css class (the class, ‘unitNumber’, is defined in an external style sheet linked to my project).

I’ve unticked ‘Protect from external styles’ and selected the text box and entered ‘unitNumber’ (without quotes) in the class name of the inspector tab, but nothing happens on previewing.

The only way I can get it to work is if I enter the following directly into the ‘Edit Element’s Inner HTML’:

 <div class="unitNumber">My text here</div>

Is this expected behaviour? Is there any way to assign a css class to a text (or any) element without having to enter the div wrapper by hand?

Thanks in advance

2

maby this will help you?
classCss.hype.zip (21.2 KB)

1 Like
3

Thanks. I’ll take a look at that now :slight_smile:

4

Thanks for sending that over.

Bizarre, but that’s basically what I was doing with my doc.

To try and narrow down what was going wrong, I attempted to put a new styled text box within your doc and preview it on my iPhone 4.

The idea is to display text in Arial Black if available and in an alternative font if it’s not (on an iOS device, for example).

So the class I want to use is:

.unit-number { font-family:'Arial Black', 'Avenir Black', sans-serif;  }

I put this line in the attached CSS file, css_test.css, which is successfully showing your CSS styles on screen.

Then I try and call my class from within Hype. I change the on screen text box ‘Hype-Class’ box’s class from ‘farbcode’ to ‘unit-number’ (in the Identity tab/Class name box) and the farbcode green styling disappears, but the text doesn’t change to unit-number’s Arial Black. If I put this class directly into the element’s Inner HTML it does display on screen in Arial Black, but not when I send the preview to my iPhone.

I’ve tried simplifying it, just using a cross-platform, web and iOS-friendly font, Palatino:

.unit-number { font-family:‘Palatino’; }

But it still doesn’t show when I try and put it in the class box, does when I enter it in the Inner HTML, but doesn’t again when I preview the page on the iPhone.

I’m sure I’m doing something stupid here, but I can’t work out what!

Thanks

Alex

5

Could you share an simple example Hype Document that demonstrates the issue you are seeing? You can zip up a document and drag it into a forum reply.

6

Hi there,

Just created a new doc from scratch with an eternal stylesheet with a single class for red coloured text. The text box on the left is styled with the Inner HTML and works on screen, the box on the right is styled using the class name box on the identity panel, and doesn’t. Both should be referencing the same class on the external stylesheet.

Apologies in advance if I’m missing something obvious…

Thanks for looking into this.

Alex
red_text_test.zip (16.6 KB)

7

The issue is that any properties set in Hype will be set directly in javascript, so these inline styles end up taking precedence over your style-sheet’s selectors. We try not to set properties unless they have been modified, but text color is a case where we always set it.

You have a few options to style text color externally:

  1. Set important on the style so that it overrides the color we set. Depending on the rest of your site this may not be a good idea.

     .red-text {
     color:#cc0000 !important;
 }

  2. Create a regular rectangle element and set the innerHTML to be your text. This way we will not set the text-color and you can modify it externally.

2 Likes