1

I have the following situation:

  1. I have implemented a plugin ChessTempoViewer that displays a chess game in a Wordpress page.
  2. This plugin is working well in the themes 2010, 2012, 2014 but not in Twentythirteen.
  3. The reason for that are the rules in style.css of that theme.

What are my options to remove these rules from the theme?

Details to the problem

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

This leads to the following display of the chess board.

enter image description here

When i open the page e.g. in Chrome, and inspect there the HTML page, I am able to deselect the corresponding CSS rules, which results in a correct display.

enter image description here

Deselected the rules

enter image description here

Now displayed correct.

However, I am not able to add rules in my own CSS file that allow to suppress the rules. I have tried the following, but without effect.

.ct-black-square
{
    background-color: #88a0a9;
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
}

.ct-white-square
{
    background-color: #fdfdfd;
    box-sizing: inherit;
    -webkit-box-sizing: inherit;
    -moz-box-sizing: inherit;
}

What other options do I have to correct the behavior of my plugin in the theme Twentythirteen?

1

The default behavior for box-sizing is content-box. This is applied when you deselect the rules in Chrome. Have you tried applying box-sizing: content-box in your own CSS file instead of inherit?

.ct-black-square
{
    background-color: #88a0a9;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

.ct-white-square
{
    background-color: #fdfdfd;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
}

box-sizing

  • I have tried it, but I don't get any difference in display. When I check the rules, the rules are applied to the board. So there seems to be a difference in not defining box-sizing to defining it with the value content-box. – mliebelt Oct 3 '14 at 11:13
  • 1
    This might be the solution: core.trac.wordpress.org/ticket/24306#comment:5. I've tested this solution here: chesstempo.com/game-database.html. Setting box-sizing to content-box on the #board-boardBorder div worked. – Mars Oct 3 '14 at 11:39
  • Thank's a lot, that is the answer. I have added the following: .ct-black-square, .ct-white-square, .ct-board, .ct-board-boarder with your rules, and then the display worked in all themes. – mliebelt Oct 3 '14 at 11:49
  • 1
    See wordpress.org/plugins/chesstempoviewer/changelog for my change. Hope the new version 0.9.4 will be published soon :-) – mliebelt Oct 3 '14 at 11:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.