Two Issues: Color and Size

To answer your questions:

1. The two CSS classes you are looking for are matchtype and matchdate. Best way to change this, is to ‘overrule’ the plugin’s CSS with definitions in your theme’s CSS. So don’t change the plugin’s CSS files. Otherwise you have to redo the changes every time there is an upgrade for the plugin.
2. The plugin is not optimized for mobile. The matches table and predictions are in an HTML-table and for mobile to work I have to rewrite that part of the code to a more responsive/adaptive layout. I never used a mobile template myself so it never was high on my priorities list. And I am no HTML guru, so it won’t be easy for me to change the layout.

Tip: use Chrome (right click an element and choose “Inspect element”, or Firefox with the Firebug addon, to quickly see what styling is used on a particular part of the page.

Thanks for the response. Can you provide an example of how to overrule with definitions? I honestly don’t know where to insert it, or what it should look like.

There are some complicated CSS rules that define the style for a particular tag. At least, if you are new to the subject. But it basically boils down to this:

1. Make sure your own definition is placed after the plugin’s CSS (cascade order).
2. Make sure you use the same specificity/weight when declaring your style, or make it more specific to make the rule more ‘important’ than my plugin’s styling.
3. Or, a somewhat dirty method, place “! important” after all your own style definitions.

More info on the cascading rules and specificity: https://reference.sitepoint.com/css/inheritancecascade

The basic styling for the plugin is in the pool.css file. Copy the lines you want to change to your own CSS file and change the colors etc. to your theme’s style.

The part to look for in the pool.css for the table colors is:

td.matchtype { color: #fff; background-color: #330039; font-weight: bold; font-size: .8em; line-height: 1.8em; vertical-align: middle; text-align: center; }
td.matchdate { color: #fff; background-color: #990288; font-weight: bold; font-size: .8em; line-height: 1.8em; vertical-align: middle; }

That worked well for the tables, thank you.

I am still not able to change the widgets color however. Thoughts?

Can you also point me in the direction of change the joker logos? both the clicked and unclicked? I am going to use this for hockey, not football.

As I said: use Chrome or Firefox the quickly determine the style. Much faster than waiting for me to answer. I am not always online ??

The widgets are styled with #sidebar h3, #sidebar h4.

Or if you want to replace every purple color, search for lines with the color codes ‘#330039’ and ‘#990288’.

The classes fp-joker and fp-nojoker define the background-image for the joker.