So, I’ve been trying to visually integrate my WordPress site and PunBB forum for the past few days, and I’ve hit a wall with the CSS. Currently, I’ve got the forum wedged in between the header and footer from WordPress, but the CSS style sheets from WordPress seem to be conflicting with the sheets from PunBB in a way a didn’t expect.
As per recommendations found here on Stack Overflow, I went ahead and took advantage of the fact that everything in from the forum falls within a <div id="mid-inner"> and added #mid-inner to every CSS rule in the forum style sheet, giving this:
...
#mid-inner body {
background:url(../bg.png) repeat-x #6a0a0a;/*#213f53;*/
color: #222;
}
#mid-inner a:focus {
outline: 0;
}
#mid-inner a:link,
#mid-inner a:visited,
#mid-inner .js_link {
color: #387ca6;
text-decoration: none;
}
#mid-inner a:hover,
#mid-inner a:active,
#mid-inner a:focus {
color: #CD0021;
text-decoration: underline;
}
...
However, this didn’t work out so well; for some reason, the WordPress theme insists on overriding the CSS of the PunBB theme, and I can’t figure out what I’m missing—probably something to do with precedence though. Here’s an quick album of the WordPress theme, the PunBB theme, and the messed-up hybrid theme: Imgur link. Anyway, I’m sure I’m forgetting something, but the WordPress Stack Exchange has been much help yet. Let me know if I need to add more information, and thanks in advance!
See the rules for cascading (in particular the section on specificity), make sure your CSS is valid and use the tools provided by browsers (Chome Developer Tools, the Firebug extension for Firefox, etc) to see which rules are being applied to the elements you care about in which order.