Page 1 of 1

Incorporating Custom CSS3 scripts...

PostPosted: Thu Jul 06, 2017 11:26 pm
by chrisr
All, so I was told via support that I could incorporate some CSS into a textbox to fix a scroll bar issue I'm having.

I can follow the CSS_3. I'm not even close to an HTML pro or CSS person. But I can write simple CSS. For example. Here are some lines of HTML with CSS. This results in three lines of text

"This is, normal"
"This is, italic"
"This is, oblique"


Code: Select all
<html>
<head>
<style>
p.normal {
    font-style: normal;
}

p.italic {
    font-style: italic;
}

p.oblique {
    font-style: oblique;
}
</style>
</head>
<body>

<p class="normal">This is, normal.</p>
<p class="italic">This is, italic.</p>
<p class="oblique">This is, oblique.</p>

</body>
</html>


But how do I take something like this and mark it up so Widget can use it? This is where I am dropping the ball. Here is a snippet of CSS from widget designer This does a hover and scale:

Code: Select all
<<Meta|Description=Resize the element on Hover. Requires TransitionSettings style to be added and activated.|Elements=Widget>>
.RunMode .<<Selector>>:hover{
   transform: scale(<<Factor=1.1>>);


With standard CSS, you start with a header.... With Widget, there is some stuff I'm not familiar with that lead the CSS scripting.

Can anyone shed some light on this?

Thanks so much!!

Re: Incorporating Custom CSS3 scripts...

PostPosted: Tue Jul 11, 2017 2:00 pm
by Janina Baltaziewicz
Hi Chris,

That's a nice question, I hope I'll be able to explain it adequately as I'm not a CSS/HTML pro either...

The template you have from the WD refers to effects and animations, please have a look at this page in the helpfile which illustrates how those templates are generated:
http://www.coolux.de/root/downloads/sup ... ons_wd.htm
The templates are only able to interpret CSS data, so the HTML-file you have there wouldn't really work.

What you can try, is the Window's Custom HTML Header (not in the helpfile yet...), you'll find it in the Window properties dialog. There you can import complete HTML/CSS structures to be applied on the Window. If you only want to affect a specified part (like all Labels, or only Fader1, or whatever), you will need the respective selector.
Easy way finding it out: load your page in a browser and open the developer tool there (e.g. F12 for Chrome). The tool should have an option where you can mouse-over certain areas in you browser page and can see the code for the items you touch, the specifier are also declared there.

I hope this is helpful for the moment.
Cheers,

Janina