How to override css?

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
exalif
Posts: 15
Joined: 08 Jun 2017, 02:23

09 Jan 2018, 01:18

Hi there. I try to override the top bar badge style when the layout is mobile (but the bug occurs whenever I try to override anything).

I tried to add a component scss file containing that code:

Code: Select all

:host {
  @media (max-width: 1024px) {
    .topbar-badge {
      padding: 4px 5px 3px 5px;
      font-size: 14px;
      font-weight: bold;
    }
  }
}
but this doesn't override the global Ultima template. Here is the produced chrome style inspect:

Image

As you can see the global style takes the lead for the already defined properties and my override is quite canceled.

I tried to add a class to be more specific and it didn't work either:

Code: Select all

:host {
  @media (max-width: 1024px) {
    .topbar-badge {
      &.big {
        padding: 4px 5px 3px 5px;
        font-size: 14px;
        font-weight: bold;
      }
    }
  }
}
Image

How to override the global UltimaNG theme?

Please note I don't want to have to use !important keyword as it sounds not to be a proper solution to me, nor a good practice.

Thanks and have a nice day!

merve7
Posts: 861
Joined: 12 Sep 2017, 10:44

18 Jan 2018, 09:16

Please use like this(remove :host) ;
in style.scss

Code: Select all

@media (min-width: 1024px) {
    .layout-container {
      .topbar-items {
        > li {
          > a {
            .topbar-badge {
                padding: 4px 5px 3px 5px;
                font-size: 14px;
                font-weight: bold;
            }
          }
        }
      }
    }
  }

then generate sass file

Code: Select all

sass -w src --sourcemap=none
and check .angular-cli.json

Code: Select all

"styles": [
        "../node_modules/primeng/resources/primeng.min.css",
        "../node_modules/fullcalendar/dist/fullcalendar.min.css",
        "../node_modules/quill/dist/quill.snow.css",
          "../node_modules/nanoscroller/bin/css/nanoscroller.css",
        "styles.css"
      ],

Post Reply

Return to “Ultima - PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests