Bootstrap Theme - Overwrites Application Style #1624

Closed
thaoula opened this Issue Dec 20, 2016 · 3 comments

Projects

None yet

3 participants

@thaoula
thaoula commented Dec 20, 2016

Hi Guys,

The new Bootstrap theme stylesheet introduced in 1.1 seems to break the styling of my application.

This is caused by the addition of the Body selector in the stylesheet. Why is required, the components seem to work just find when you remove this selector.

body {
font-size: 1em;
color: #373a3c;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Also, why are you setting the font and why is everything have to prefixed with body?

body .ui-widget,
body .ui-widget .ui-widget {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
text-decoration: none;
font-size: 1em;
}

Regards,
Tarek

@wujitouch

I had the same issue. I just moved primeng's css files before mine.

@cagataycivici cagataycivici added this to the 1.1.1 milestone Dec 20, 2016
@cagataycivici cagataycivici self-assigned this Dec 20, 2016
@cagataycivici cagataycivici added a commit that closed this issue Dec 20, 2016
@cagataycivici cagataycivici Fixed #1624 efb87cf
@cagataycivici
Member

Removed the body {} style to fix this, still rest is untouched, we use the body prefix trick to override the structural css defined in primeng.css which should be placed after the theme.

@wujitouch

I feel like this is the wrong way to theme it. Typically it's base styles, then theme styles. This allows you to easily override styles as intended in CSS.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment