Football Pool
[resolved] Two Issues: Color and Size (7 posts)

  1. ACHATalk
    Posted 2 years ago #

    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!


  2. AntoineH
    Plugin Author

    Posted 2 years ago #

    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.

  3. ACHATalk
    Posted 2 years ago #

    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.

  4. AntoineH
    Plugin Author

    Posted 2 years ago #

    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: http://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; }
  5. ACHATalk
    Posted 2 years ago #

    That worked well for the tables, thank you.

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

  6. ACHATalk
    Posted 2 years ago #

    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.

  7. AntoineH
    Plugin Author

    Posted 2 years ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Football Pool
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic


No tags yet.