Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

How to adjust the height of header and footer in Angular? #7035


User avatar
0
dzungle created

Hello support team,

We are using the ASP.NET Core & Angular project. Could you please tell us how to adjust the height of the header, the footer and the image icon of the user in the upper-right corner of the header (theme 12).

Thank you in advance.

Dzung Le


8 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @dzungle

    All those items have specific css classes. You can write a custom css in metronic-customize.less file for theme12 and it should work.

  • User Avatar
    0
    dzungle created

    Hi @ismcagdas,

    We don't want to write custom css. We just want to modify the current css classes for the header, footer and user's image icon. Is that possible? And could you show me where to modify these css classes to adjust the height?

    Thank you.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @dzungle

    If I understand you correctly, that is not possible. Could you share a screenshot of what you are trying to achieve ? Maybe we can help you better in that way.

    Thanks,

  • User Avatar
    0
    dzungle created

    HI @ismcagdas

    This is my screenshot that I want to achieve.

  • User Avatar
    0
    ismcagdas created
    Support Team

    @dzungle Thanks. Then, you have two options.

    1. You can do it like above as I explained before.
    2. Or, you can add new css classes to those items and write custom css for the added css classes.
  • User Avatar
    0
    dzungle created

    Hi @ismcagdas,

    I'm newbie to .less file. I can't find the css classes that control those items. Can you show me the specific css classes in the metronic-customize.less file for theme12 as well as how to write custom classes to achieve what we want?

    Thank you very much.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    You can check image I shared below and see how to learn the css class of an item. After finding the css class of the item, you can add it to your css or less file and override the height value.

    By the way, for user profile image, you can go to topbar.component.html and directly set height on the img element.

  • User Avatar
    0
    dzungle created

    Thank you very much, @ismcagdas.