Navigation/Tab Style Mobile

Navigation/Tab Style Mobile

  

i want to make navigation tab mobile in picture 1, but i can't add css on navigation tab (result in picture 2).

what should i do ?

Hi Zainal,

You can change the CSS style applied to classes defined in the tabs component. You just need to figure out which classes they are and redefine the CSS to display the elements like you want. To find out what classes are used you can do either of:

a) inspect the page on your browser, making note of relevant classes you may want to override in your application/screens;

b) open the module where the tabs component is defined - SilkUI's Mobile Patterns, if I'm not mistaken (Service Studio will complain you cannot modify it but will offer to clone it for you), and you can then open the Component and see how it is implemented and what classes you need to override CSS for.

Jorge Martins wrote:

Hi Zainal,

You can change the CSS style applied to classes defined in the tabs component. You just need to figure out which classes they are and redefine the CSS to display the elements like you want. To find out what classes are used you can do either of:

a) inspect the page on your browser, making note of relevant classes you may want to override in your application/screens;

b) open the module where the tabs component is defined - SilkUI's Mobile Patterns, if I'm not mistaken (Service Studio will complain you cannot modify it but will offer to clone it for you), and you can then open the Component and see how it is implemented and what classes you need to override CSS for.


where i can add css if style class not exist 

Hi Zainal Abidin,

You can add the style to its page-level CSS to make the custom design for the tab(the only thing you should have good hands on in CSS).

go to the canvas top you will find CSS over there click on it. it will open up and put your custom style there.

Regards,

Pankaj.

Solution

You need to redefine/override classes that are already assigned to elements inside the Navigation\Tabs component. You do that by opening the CSS Editor, and selecting the Screen or Module CSS tab and adding your class definitions there. The tricky part is determining which classes you need to override.

Open the MobilePatterns module by right clicking on the Tabs pattern from the Elements Tree Area:

Accept to Clone the MobilePatterns module:

Service Studio will automatically display the Navigation\Tabs pattern on the new clone of MobilePatterns:

Examine the elements that make up the component and check what classes are applied to them:

In your own screen, override the CSS properties that you decide are relevant:


Solution

Jorge Martins wrote:

You need to redefine/override classes that are already assigned to elements inside the Navigation\Tabs component. You do that by opening the CSS Editor, and selecting the Screen or Module CSS tab and adding your class definitions there. The tricky part is determining which classes you need to override.

Open the MobilePatterns module by right clicking on the Tabs pattern from the Elements Tree Area:

Accept to Clone the MobilePatterns module:

Service Studio will automatically display the Navigation\Tabs pattern on the new clone of MobilePatterns:

Examine the elements that make up the component and check what classes are applied to them:

In your own screen, override the CSS properties that you decide are relevant:


then so that can be stored and used in my project how?


Zainal Abidin wrote:

Jorge Martins wrote:

(...)

Examine the elements that make up the component and check what classes are applied to them:

In your own screen, override the CSS properties that you decide are relevant:


then so that can be stored and used in my project how?


Hi Zainal, 

Just like Jorge said, after you identify the properties you want to change and overwrite, go to your application, open the screen where the 'Tabs' component is being used, click the 'CSS' Editor and write the CSS needed there.

Whatever you write on the Screen's Css page will overwrite the general look of the tabs component, as the Css is rendered in order: BaseTheme -> Phone Theme -> YourApp -> Screen

André Rodrigues wrote:

Zainal Abidin wrote:

Jorge Martins wrote:

(...)

Examine the elements that make up the component and check what classes are applied to them:

In your own screen, override the CSS properties that you decide are relevant:


then so that can be stored and used in my project how?


Hi Zainal, 

Just like Jorge said, after you identify the properties you want to change and overwrite, go to your application, open the screen where the 'Tabs' component is being used, click the 'CSS' Editor and write the CSS needed there.

Whatever you write on the Screen's Css page will overwrite the general look of the tabs component, as the Css is rendered in order: BaseTheme -> Phone Theme -> YourApp -> Screen


thank you andre and jorge

André Rodrigues wrote:

Whatever you write on the Screen's Css page will overwrite the general look of the tabs component, as the Css is rendered in order: BaseTheme -> Phone Theme -> YourApp -> Screen

Complementing what André described, CSS is rendered in the following order:

Block -> Base Theme -> Phone Theme -> Your App Theme -> Screen

This way the Block/Pattern look & fell will adjust to whatever the Theme defines, as the Block/Pattern's CSS style can be overriden by the Theme's CSS style.