cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Learn all about the Community Ranking System, a fun gamification element of the PTC Community. X

CSS Example

LS_9776545
12-Amethyst

CSS Example

Hi everyone, 

My project need some restyle to be distribued. 

 

I want to be able to style the 2D Overlay, defining the position and style of all the components (top panel, center panel..)

 

Anyone has some experience example?

 

Thank you

1 REPLY 1

Hello @LS_9776545 ,

I am  no sure what are here the  requirements but I do not think that there will be possible to have one general css style definition which will solve the position of 2D overlay and for all widgets  of all possible definintions. Therefore we have in Vuforia Studio different kind of widget which could be add in different containers like panels, Grid, Header, Tabs, popups etc.

The first point is to try to use a specific widget and to set all possible properties for alignment , Justification, Color etc. In case that you could not achieve some behavior with the available functionality  – for this particular case you can try to find a css solution. Here we need to pay attention that some css definition could work be specific for some platforms. Example, hover , mouse event handling is something what works fine in Preview mode in chrome but will not have any effect on the end device.

I think there is definitely a lot of examples for css styles which  could be used e.g. for button , label appearance etc.  with some dynamic features like flip , fade in … etc.  and hopefully somebody could share such example here (there are also some post in the community handling css ). You check also  in general programming and web forums about css design (good reference are : https://www.w3schools.com/html/html_css.asp,

https://wiki.selfhtml.org/wiki/CSS,

https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics ...)

also in the PTC Help you can find some css definition which are directly intented for Studio like http://support.ptc.com/help/vuforia/studio/en/#page/Studio_Help_Center%2FStylesTab.html

But also for the most windgets there are provided  some css example in the help. Example buttons http://support.ptc.com/help/vuforia/studio/en/#page/Studio_Help_Center%2FWidgetGridLayout.html%23

 

Eventually  you  need to make your request more specific and describe the particular case where you have a problem on specific platform where some thing is not working and additional functionality is required to get the desired behavior.  

Announcements

Top Tags