Basic styling of elements

1

Hello all

I’m a brand new Hype user so apologies that this is very much a noob question, but I’m not having much luck in the documentation or via forum searches as it’s mostly more advanced than the stage I’m at.

I’d like to start editing some of the basic styling in my project: specifically just now I have a text box with scrollbar (white text on a semi-transparent black background). The scrollbar isn’t very visible so I’d like to make it a brighter colour. Would I head to the ‘edit Head html’ section to play with this?

Any pointers appreciated!

2

There’s a few different ways to accomplish this, but the most “Hype-like” way would be:

  1. Make an element that has content which will extend beyond its bounds
  2. Set an element’s Content Overflow to Scrollbars in the Metrics Inspector
  3. Add a Class Name to your element in the Identity Inspector; I am using “myscrollable”
  4. In the Head HTML, add <style> code for this class (copied from css-tricks):
    <style>
.myscrollable::-webkit-scrollbar {
  width: 1em;
}
.myscrollable::-webkit-scrollbar-track {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
.myscrollable::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}
</style>

Here’s a small sample file:
myscrollable.hype.zip (19.3 KB)

1 Like
3

Thanks Jonathan, that works perfectly!

1 Like