Styling

The Next Game Module for the FootballManager comes with two predefined styles, one is the default layout "simple" and the other is the slightly extended "run" layout. For both designs you can make various settings in the module backend and we will take care of these now.

As already mentioned, the module comes in the current version including 2 basic layouts. The run and the simple layout. This can be selected directly as the first in the styling tab.

In addition to the basic styling, you can assign your own CSS classes for the DIV container of the module in the next field "Module Content Classes". You can then target this module with your own CSS classes and, with a little CSS magic, adjust the styling according to your wishes.

Since there are many opinions on whether the home team should be displayed on the left or right side, we have simply given you the option to define this yourself with the Position Hometeam option.

You can also choose whether the logos of the teams should be displayed or not - this can be defined via the Show Logos option.

For a better mobile display you can also choose whether the team names should always be displayed, never or only on large screens. You can do this with the Show Teamname parameter.

Using the Show League option you have the possibility to show or hide the league in which this game takes place. Hiding the league can be advantageous if, for example, you only present games from one league on your site.

Next, we already have the first "advanced" function in front of us. With the field "Customfield for Headline" you can display a custom field of the games as a headline within the module. I use this option for example like this: I have created the custom field "Headline" for the games in the FootballManager component. If the corresponding game is a semi-final, final match or a charity game, I enter this for the respective event. This information is then displayed in the frontend:

The picture above shows the creation mask for a Customfield within the FootballManager

In the next step, the respective field must of course also be populated with content so that an output takes place. If we now switch to the Fields tab in the corresponding event / game, we can now store this information for this game.

As you can see I have defined the headline "Charity Event". Now we are ready and can select the custom field in the module settings:

The Headline custom field is automatically available for selection when we create it.
If the corresponding field (Headline in this case) contains information, it will be output in the module.

And this is what the whole thing looks like:

Headline Informationen blank & ohne Styling

Uuuh no, wait, what? I didn't pay for that! True but as already mentioned we are talking about an "Advanced" function of the module, so we can also use "Advanced" functions. When we have selected a Customfield a new setting appears directly below, with this we can style the content with our own Custom CSS classes.

After setting some simple UIkit CSS classes the whole thing looks a bit different:

Our module after the headline field has received some CSS rules...

The CSS classnames used above are: "uk-card uk-card-primary uk-text-center uk-padding-small uk-text-large". If you use a custom field type that is not just a text field, but for example an editor field, you can add additional styles. Alternatively, you could also use an image instead of a text field and include it as a header... the possibilities are endless.

Note: Thanks to the integration of UIkit, all CSS class names of the UIkit 3 framework are available to you.

Styling

Other Articles