XF 1.5 How to override/ignore CSS?

Status
Not open for further replies.

RobParker

Well-known member
I think this is a pretty simple question but I could do with some help.

I've included some bootstrap javascript inside an XF2 widget and included the bootstrap css:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css

Part of this is

Code:
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333;
  background-color: #fff;
}

which is overiding my body background colour and image as set in the XF style.

Is there any way to make it ignore this and leave it as it was?
 
Use !important if you want your CSS to be the "alpha male," so to speak.

That didn't seem to work (and I thought was bad practice).

Even sticking the bootstrap css in the header above where the XF css is linked didn't seem to let the XF one take priority.

A solution is just to copy the bootstrap stuff I want into extra.less but it'd still be good to know how to set a priority in something like this.
 
You mention this is for XF2 and using extra.less - this site is not yet ready for XF2 related questions so you should ask them on the demo site.
 
Status
Not open for further replies.
Top Bottom