Skip to main content
13-Aquamarine
July 11, 2023
Solved

change css style of menu bar(Vuforia studio)

  • July 11, 2023
  • 1 reply
  • 4346 views

Hi PTC Community,

Please, advise how I can set CSS for the prebuilt navigation menu tab. 

IB_10645210_0-1689101727929.png

Thank you!

 

Best answer by aletenti2

To change font properties you should use this classes:

 

.list > .item > .button {
 font-size: 20px; 
 font-family: Poppins-ExtraLight;
}

 

 

"Poppins" font is not a default font, so you need to import it into Vuforia Studio. To do that, you should do the following steps:

  1. Create a "Fonts" folder in "..\PROJECT_NAME\src\phone\resources" folder
  2. Import all the .ttf files of the font
  3. Add this CSS code:

 

@font-face {
 font-family: Poppins-ExtraLight;
 src: url('#{$resources}/Fonts/Poppins-ExtraLight.ttf');
}โ€‹

 

In my example I selected the "ExtraLight" font version

 

1 reply

12-Amethyst
July 12, 2023

Hello,

you can go to the preview mode, right click on the menรน and select "Inspect". From there you will see the HTML code of the webpage, in particular the code of the menu. You can play with the existing classes and then add in the CSS section in Vuforia Studio.

aletenti2_0-1689157967221.png

 

13-Aquamarine
July 12, 2023

Hi, I tried to change the style within the app-theme.css file but the app-theme.css file reset all changes to the original settings and never saves my changes.

Every time I restart the Vuforia Studio project it resets the app-theme.css file to original fonts and etc.

How do you change the CSS ?

12-Amethyst
July 12, 2023

You don't need to edit any file in the project folder. You can just click on the "Styles --> Application" menu in Vuforia Studio.

aletenti2_0-1689172152486.png

 

There you can write CSS code.

aletenti2_1-1689172196972.png