change css style of menu bar(Vuforia studio)

[IB_10645210]

Hi PTC Community,

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

Thank you!

[aletenti2]

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.

[IB_10645210]

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 ?

[aletenti2]

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

There you can write CSS code.

[IB_10645210]

@aletenti2 I am struggling with identifying CSS IDs from all Ionic elements.

Spent too much time yesterday trying to apply CSS to different IDs but I didn't really succeed.

I was able to identify only .menu-content ID.

Do you know the ID for the "Menu" and List of Views on the left side menu?

[aletenti2]

Hi, try to add the following code in the CSS section.

.bar-stable.bar.bar-header { 
    //CSS rules for Menu header
}

.list > .item {
    //CSS rules for Menu items
}

[IB_10645210]

@aletenti2 

For some reason, Typography hasn't changed the style.-only the background color changed.

Please advise how I can change CSS for the Typography of "Menu" and Views.

[aletenti2]

Try to use only these classes:

The result of my code is this:

Try to add CSS rules to customize your style

[IB_10645210]

I mean background color is changed-it works.

The Typography: font-family -doesn't change.

[IB_10645210]

Update: finally .button ID worked for styling menu buttons for list of Views on a left side.

But... "Menu" didn't work( ......yet

[aletenti2 · Accepted solution]

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

[IB_10645210]

@aletenti2 Thank you so much for your guidance. It helps a lot 🙂