Amend CSS of Wordpress Plugin?

Question

I'm using WordPress, a Forum plugin and a Syntax Highlighter plugin.

At the moment the Syntax Highlighter styles render fine in a 'native' WordPress post/page. However they don't render correctly on the Forum plugin pages. This is due to the Forum CSS overriding some of the Syntax Highlighter CSS.

Consider this 'simplified' example: https://jsfiddle.net/2vkzx1js/

<div id="forum">
  <div class="post">
      <div class="syntaxhighlighter">
          <span>This should be red</span>
      </div>
  </div>
  <div class="post">
      <div>
          <span>This should be blue</span>
      </div>      
  </div>
  <div class="post">
      <div>
          <span>This should be blue</span>
      </div>
  </div>
</div>

and

#forum .post span
{
    color:blue;
}

.syntaxhighlighter span {
  color:red;
}

I know that if I add '#forum' to the start of the CSS declarations in the Syntax Highlighter plugin it would render ok:

#forum .syntaxhighlighter span {
  color:red;
}

But I don't want to start overwriting plugin files for obvious reasons.

What are the most feasible options to fix this?

Answer 1

You don't need to make modifications to the plugin css files, you can just make those modifications in your own custom css file. The problem, as you've already discovered, is the selector process. You can just remove #forum from the first line and it works just fine: https://jsfiddle.net/vuc6ybt4/