Incorporating Custom CSS3 scripts...

Christie Widget Designer Version 6 - Q&A

Moderator: Moderator Group

Forum rules
When asking make sure to include the operating system and the revision of Widget Designer you are using.

Incorporating Custom CSS3 scripts...

Postby chrisr » Thu Jul 06, 2017 11:26 pm

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
p.normal {
    font-style: normal;

p.italic {
    font-style: italic;

p.oblique {
    font-style: oblique;

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


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!!
Last edited by chrisr on Wed Aug 16, 2017 7:48 pm, edited 2 times in total.
Thank You

SurfacePro3 - 2GHz i5 - 4GB ram - Windows 10 Pro - WD Pro 4.7 Rev2500 and WD v6
Sager Laptop - Intel 2.4GHz i7 3630QM - 16GB ram - Windows 7 Pro Svc Pack1 - Offline Manager v6
Posts: 143
Joined: Tue Jan 26, 2016 10:50 pm

Re: Incorporating Custom CSS3 scripts...

Postby Janina Baltaziewicz » Tue Jul 11, 2017 2:00 pm

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: ... 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.

Janina Baltaziewicz
Technical Support Specialist
User avatar
Janina Baltaziewicz
Posts: 50
Joined: Tue Jun 14, 2016 2:08 pm

Return to Widget Designer V6

Who is online

Users browsing this forum: No registered users and 1 guest