Support » Plugin: Football Pool » Two Issues: Color and Size

  • Resolved ACHATalk


    First of all, Great Work! I am excited to see what this can do for my site. I am having two issues while trying to customize it for my site.

    1. The color: That purple heading color doesn’t go with my Theme, and I can’t locate anything in the css to change it. I’m a bit new to this, so that may not even be the right place to look. Thoughts>

    2. The Size: When viewing it on the mobile version, it cuts off half of the info. I’m sure that probably has to do with some settings outside of your creation, but any help would be great.

    Thanks in advance!

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author AntoineH


    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.

    Plugin Author AntoineH


    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:

    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.

    Plugin Author AntoineH


    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.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Two Issues: Color and Size’ is closed to new replies.