Since 0.19.0, Football Leagues prints a second set of CSS classes on its blocks and on the elements inside them. They all start with fls- (FL Style): fls-standing, fls-team-name, fls-score. They’re there for one reason – so your CSS has something to hold on to that won’t move when we change a template. This page lists every one of them and shows how to use them in Additional CSS, a child theme or an add-on.
The hooks are in the free plugin. The PRO Style Editor is a point-and-click editor built on the same classes, and free sites get them as the class list in SiteOrigin CSS’s Football Leagues Mode.
The promise
An fls- class is never renamed or removed. If the markup changes, the class moves to the matching new element. The plugin’s other classes – standing-table__club, anwp-fl-lb__record-row and the rest – are internal and can change in any release. Write new CSS against fls- classes wherever one exists.
🚀 Three kinds of class
| Class | Where it is | Use it for |
|---|---|---|
fls-block | The outer wrapper of every block | Every block at once: .fls-block { border-radius: 12px; } |
fls-{block} | The same wrapper, naming the block type: fls-standing, fls-match-slim, fls-player-header | One block type, and scoping an element to it |
fls-{element} | An element inside a block: fls-team-name, fls-score, fls-row | The element. Names are shared, so fls-team-name is the team name in a standing, a match list and a header alike |
On a standing table it looks like this. The fls- classes sit next to the plugin’s own classes, which are still there and still styled as before:
<div class="standing standing--shortcode ... fls-block fls-standing">
<div class="standing-table__rank ... fls-rank">1</div>
<a class="club__link fls-team-name ...">Arsenal</a>
<div class="standing-table__cell-number standing-table__points fls-points ...">54</div>A few rules hold for every class on this page:
- Football Leagues never styles them. The plugin’s own stylesheets don’t contain a single
.fls-selector. Adding the classes changed nothing on your site, and a plugin update can’t fight a rule you write against them. - One element class per element. An element is a team name or a score, never both.
- No state classes. There’s no
fls-live,fls-winorfls-active. LIVE colours, win / draw / loss colours, promotion zones and the selected tab come from Settings & Tools > Settings > Appearance, so a rule onfls-form-itemorfls-tabshould leave colours alone or it paints every state the same.
🎯 Writing a rule
Put the CSS where you’d put any custom CSS – CSS Recipes covers Additional CSS on classic and block themes. Then scope the element to its block type:
/* Team names in standing tables only */
.fls-standing .fls-team-name {
font-weight: 700;
}
/* Team names everywhere: tables, match lists, headers */
.fls-team-name {
text-transform: uppercase;
}
/* Every Football Leagues block */
.fls-block {
border-radius: 12px;
}Prefer the two-class form. The plugin and your theme often style an element with a selector longer than one class. A one-class rule like .fls-team-name works for anything they leave alone – text-transform here – but can lose on a property they already set. Scoped with the block class it has two classes, which beats most of them, and Additional CSS wins a tie because it prints later.
One block, not the whole type. In Layout Builder (PRO), open the block’s settings, go to the Advanced tab and add your own name under CSS Classes, say home-table. Then .home-table .fls-team-name styles that block only.
Over a Style Editor style (PRO). Style Editor rules are written with an extra wrapper class so they beat the plugin and the theme, and you can still beat them: click the element in the Style Editor, copy the selector it shows under CSS selector, and paste that into Additional CSS. Same strength, later in the page – your rule wins.
Element classes
Scope is how the Style Editor offers the element. “Block type” elements are styled inside one block type at a time (every row on a site is never what anyone means). “Block type or everywhere” elements can also be styled site-wide in one rule. In your own CSS you can of course write either.
| Class | Element | Kind | Scope | Group |
|---|---|---|---|---|
fls-title | Title | Text | Block type or everywhere | Block chrome |
fls-subtitle | Subtitle | Text | Block type or everywhere | Block chrome |
fls-header | Header | Box | Block type or everywhere | Block chrome |
fls-tabs | Tabs | Box | Block type or everywhere | Block chrome |
fls-tab | Tab | Control | Block type or everywhere | Block chrome |
fls-pill | Pill | Control | Block type or everywhere | Block chrome |
fls-button | Button | Control | Block type or everywhere | Block chrome |
fls-empty | Empty Message | Text | Block type or everywhere | Block chrome |
fls-row | Row | Box | Block type | Tables and lists |
fls-table-head | Table Head | Box | Block type | Tables and lists |
fls-rank | Rank | Text | Block type | Tables and lists |
fls-cell | Cell | Text | Block type | Tables and lists |
fls-points | Points | Text | Block type | Tables and lists |
fls-form-guide | Form Guide | Box | Block type | Tables and lists |
fls-form-item | Form Item | Chip | Block type | Tables and lists |
fls-notes | Notes | Text | Block type | Tables and lists |
fls-card | Card | Box | Block type | Tables and lists |
fls-team-name | Team Name | Text | Block type or everywhere | Teams, players, competitions |
fls-team-logo | Team Logo | Image | Block type or everywhere | Teams, players, competitions |
fls-player-name | Player Name | Text | Block type or everywhere | Teams, players, competitions |
fls-player-photo | Player Photo | Image | Block type or everywhere | Teams, players, competitions |
fls-competition-name | Competition Name | Text | Block type or everywhere | Teams, players, competitions |
fls-competition-logo | Competition Logo | Image | Block type or everywhere | Teams, players, competitions |
fls-score | Score | Text | Block type or everywhere | Games |
fls-date | Date | Text | Block type or everywhere | Games |
fls-time | Time | Text | Block type or everywhere | Games |
fls-venue | Venue | Text | Block type or everywhere | Games |
fls-referee | Referee | Text | Block type or everywhere | Games |
fls-status | Status | Text | Block type | Games |
fls-round | Round | Text | Block type | Games |
fls-xg | xG | Text | Block type | Games |
fls-scorers | Scorers | Box | Block type | Games |
fls-label | Label | Text | Block type | Stats |
fls-value | Value | Text | Block type | Stats |
fls-bar | Bar | Bar | Block type | Stats |
fls-social | Social | Box | Block type | Other |
The kind decides what the Style Editor lets you change:
| Kind | Style Editor controls |
|---|---|
| Box | Background, padding, margin, border, radius, hide |
| Text | Colour, font size, weight, transform, hide |
| Image | Size, radius, border, hide |
| Bar, Chip | Background, radius, hide. Win / draw / loss colours stay with the Appearance settings |
| Control | Font size, weight, transform, padding, radius, hide – no colours, so the selected tab or pill stays visible |
Block classes
Every block root carries fls-block plus one of these. The header classes are shared on purpose: the classic player header and the Layout Builder Player Header block are both fls-player-header, and the classic match header, the PRO scoreboard and the Layout Builder Game Header are all fls-game-header. A rule written for one keeps working when you move a page to Layout Builder.
| Class | Block |
|---|---|
fls-block | Block |
fls-standing | Standing |
fls-match-slim | Match – Slim |
fls-player-header | Player Header |
fls-team-header | Team Header |
fls-game-header | Game Header |
fls-player-matches | Player Matches |
Layout Builder blocks (PRO)
Every Layout Builder block type has its own class, made from its internal name with _ turned into -. Those names are stored in your saved layouts, so they never change either.
| Class | Layout Builder block |
|---|---|
fls-competition-bottom-content | Competition Bottom Content |
fls-competition-bracket | Competition Bracket |
fls-competition-club-stats | Competition Club Stats |
fls-competition-fixtures | Competition Fixtures |
fls-competition-stats-overview | Competition Goals & Results Breakdown |
fls-competition-header | Competition Header |
fls-competition-matches | Competition Matches |
fls-competition-matches-compact | Competition Matches – Compact |
fls-competition-matchweek-slides | Competition Matchweek Slides |
fls-competition-player-stats | Competition Player Statistics |
fls-competition-results | Competition Results |
fls-competition-results-matrix | Competition Results Matrix |
fls-competition-scorelines | Competition Scorelines & Goals |
fls-competition-leaders | Competition Season Leaders |
fls-competition-standings | Competition Standings |
fls-competition-transfers | Competition Transfers |
fls-game-away-club-header | Game Away Club Header |
fls-game-booking-risk | Game Booking Risk |
fls-game-bottom-content | Game Bottom Content |
fls-game-commentary | Game Commentary |
fls-game-common-opponents | Game Common Opponents |
fls-game-events-summary | Game Events Summary |
fls-game-form-ppg | Game Form & Points per Game |
fls-game-gallery | Game Gallery |
fls-game-goals-for-against | Game Goals Scored & Conceded |
fls-game-goal-timing | Game Goal Timing |
fls-game-halves | Game Halves & Game State |
fls-game-h2h-record | Game Head to Head |
fls-game-home-club-header | Game Home Club Header |
fls-game-latest | Game Latest Games |
fls-game-likely-scorers | Game Likely Scorers |
fls-game-lineups | Game Lineups |
fls-game-live-stats | Game Live Stats |
fls-game-goals-ou | Game Match Goals |
fls-game-match-totals | Game Match Totals |
fls-game-missing-players | Game Missing Players |
fls-game-live-momentum | Game Momentum |
fls-game-player-stats | Game Player Stats |
fls-game-prediction-api | Game Prediction (API) |
fls-game-referees | Game Referees |
fls-game-schedule-context | Game Rest & Schedule |
fls-game-result-context | Game Result in Context |
fls-game-standings | Game Standings |
fls-game-prediction-stats | Game Stats Prediction |
fls-game-streaks | Game Streaks |
fls-game-summary | Game Summary |
fls-game-team-comparison | Game Team Comparison |
fls-game-stats | Game Team Stats |
fls-game-timeline | Game Timeline |
fls-game-top-performers | Game Top Performers |
fls-game-video | Game Video |
fls-game-xg-summary | Game xG & Finishing |
fls-global-html | HTML Block |
fls-player-bottom-content | Player Bottom Content |
fls-player-career | Player Career |
fls-player-career-chart | Player Career Chart |
fls-player-club-standings | Player Club Standings |
fls-player-description | Player Description |
fls-player-discipline | Player Discipline |
fls-player-form-trends | Player Form Trends |
fls-player-gallery | Player Gallery |
fls-player-game-log | Player Game Log |
fls-player-goal-analysis | Player Goal Analysis |
fls-player-missed | Player Missed Matches |
fls-player-next-game | Player Next Game |
fls-player-season-record | Player Season Record |
fls-player-stats | Player Season Statistics |
fls-player-splits | Player Splits |
fls-player-stats-panel | Player Stats Panel |
fls-player-teammates | Player Teammates |
fls-player-top-performances | Player Top Performances |
fls-player-transfers | Player Transfers |
fls-player-vs-opponents | Player vs Opponents |
fls-global-shortcode | Shortcode Block |
fls-team-subteam-squad | Team Combined Squad |
fls-team-description | Team Description |
fls-team-fixtures | Team Fixtures |
fls-team-form-trends | Team Form Trends |
fls-team-gallery | Team Gallery |
fls-team-match-breakdown | Team Match & Goals Breakdown |
fls-team-player-stats | Team Player Stats |
fls-team-rankings | Team Rankings |
fls-team-results | Team Results |
fls-team-roster | Team Roster |
fls-team-schedule | Team Schedule |
fls-team-scorelines | Team Scorelines & Goals |
fls-team-season-record | Team Season Record |
fls-team-season-stats | Team Season Statistics |
fls-team-squad | Team Squad |
fls-team-standings | Team Standings |
fls-team-subteam-schedule | Team Subteam Schedule |
fls-team-subteam-stats | Team Subteam Statistics |
fls-team-leaderboards | Team Top Players |
fls-team-trophies | Team Trophies |
fls-global-text | Text Block |
Where the hooks are printed
- Classic pages and shortcodes: standing tables (all layouts), match lists, the match header and PRO scoreboard, the club header and the player header. Other classic sections – lineups, stats tables and so on – have no hooks yet.
- Layout Builder (PRO): every block, its title, header, tabs, pills and empty-state text, and the elements inside almost every block. A few blocks print another shortcode inside them and have hooks on the block and its title only: Team Squad, Team Player Stats, Team Season Statistics (the stats table), Team Form Trends, Competition Header, Competition Player Statistics, Competition Bracket, Competition Results Matrix, Competition Matchweek Slides and Competition Transfers.
- Template overrides in your theme copied before 0.19.0 don’t print the classes, because the copy is older than the hooks. Copy the template again, or add the classes to your copy by hand. (The Style Editor still reaches most of that markup: its rules for classic elements also match the old plugin class.)
Register your own hooks (add-ons)
An add-on or kit that prints its own markup can put fls- classes on it and register them, so the Style Editor can pick and style them like the plugin’s own. Use the anwpfl/style_hooks/parts filter. Entries are keyed by the name without the prefix:
add_filter( 'anwpfl/style_hooks/parts', function ( $parts ) {
// Block root: print class="fls-block fls-my-fixtures" on the wrapper.
$parts['my-fixtures'] = [
'role' => 'block',
'kind' => 'box',
'label' => 'My Fixtures',
'group' => 'blocks',
];
// Element: print class="fls-sponsor" on the element.
$parts['sponsor'] = [
'role' => 'element',
'kind' => 'text',
'label' => 'Sponsor',
'group' => 'other',
];
return $parts;
} );| Key | Required | Value |
|---|---|---|
role | yes | block (a block root) or element |
kind | yes | box, text, image, bar, chip or control – see the kinds table above |
label | no | The name shown in the Style Editor. Defaults to the key |
group | no | A group slug, such as blocks, chrome, table, match, stats, other |
global | no | true lets an element be styled “everywhere”, not only inside one block type |
fallback | no | An older selector for the same element, for markup that doesn’t have the class yet. Class and tag names joined by a space, > or , only |
retired | no | true when the element no longer exists. Saved styles are kept but print nothing |
- Names are lowercase words joined by single dashes (
my-fixtures, notmy_fixturesormyFixtures). Built-in names can’t be replaced, and an entry that fails any check is dropped without an error. - Once a name is out, keep it. Customers’ saved styles point at the name. If your add-on drops the markup, mark the entry
retiredinstead of deleting it. - Switching your add-on off doesn’t delete styles. The Style Editor keeps rules for names that aren’t registered right now and prints nothing for them until the add-on is back.
📚 Related
- Style Editor (PRO) – click an element on your site and style it, built on these classes.
- CSS Recipes – where to put custom CSS, and tested snippets.
- Hooks – PHP filters and actions.