Customizing your website with the HockeyTech Jellyfish theme

Customizing your website with the HockeyTech Jellyfish theme

With the HockeyTech Jellyfish theme, your website will have a clean, consistent look and feel that is customized for your team or league.

Change your WordPress settings
In order for your theme to appear correctly, you need to change some WordPress settings.
  1. On the WordPress dashboard, in the menu on the left of the screen, click Settings.
  2. Do all of the following:
    • Click Permalinks. Select Custom Structure. If necessary, in the Custom Structure field, delete the slash (/) from the end of the text.
    • Click Discussion. Clear the Allow people to post comments on new articles check box.
    • Click Reading. Select A static page. In the Front Page drop-down list, select Home Page.

Customizing the look and feel of your website

When you customize any element in the theme, you can see the changes you make in the live preview window to the right of the theme customization menu.

Customize your website title and basic info
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click Site Title & Tagline.
  4. Change any of the settings or options on the screen.
  5. Click Save & Publish.
Customize the menu on your website

The main menu appears beneath the title banner of your website.
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes (figure 1).
  2. Below the Jellyfish theme, click Customize (figure 1).
  3. Click Menus.
  4. Click a menu.
  5. Do any of the following:
    • To reorder items in the menu, click Reorder. Use the directional buttons to move items to a different spot in the menu.
    • To add an item in the menu, click Add Items. Click a post, page, or recent category to add to the menu.
  6. Click Save & Publish.

Figure 1.

Customize widgets on your website


There are two widget locations – the far right sidebar of your website, and the footer at the bottom of the home page. You can add widgets, remove widgets, or change widgets in these two locations.
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click Widgets.
  4. Click a widget area.
  5. Do any of the following:
    • To change a widget, click a widget (figure 2). Complete the instructions on the screen to change the widget type, appearance, or content.
    • To reorder widgets, click and drag a widget to the new location within a widget area.
    • To add a new widget, click Add a Widget. Complete the instructions on the screen to set up the widget type, appearance, and content.
    • To delete a widget, click a widget. Click Remove.
Tips and tricks - widgets
Some widgets are specifically designed for websites powered by HockeyTech. In some cases, you might not be able to change the widget type, appearance, or content.
  • The HockeyTech Standings and HockeyTech Leaders widgets are required. You can only change the title of these widgets.
  • To customize the HockeyTech FastHockey Ad widget, click the widget. Enter your FastHockey ID. In the Ad Type drop-down list, select your website type (league or team).
  • To customise the HockeyTech Twitter widget, click the widget. In the Twitter username field, type your team or league’s Twitter username.
  • You can add up to four widgets to the footer at the bottom of the home page.

Figure 2.

Customize the home screen

You can change the layout, appearance, and content on the home screen.
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click HockeyTech – Home Page.
  4. Change any of the settings or options on the screen (Figure 3).
  5. Click Save & Publish.

Figure 3.

Change the team logo on the home screen banner

Your team logo must be saved as a png file type with a transparent background.
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click HockeyTech – Team logo or header background.
  4. Click Change Image.
  5. Do one of the following:
    • If you already added the team logo to WordPress, in the Media Library tab, click the team logo image. Click Choose Image.
    • To add the team logo, in the Upload Files tab, click Select Files. Select the image you want to upload and click Open.
  6. Click Save & Publish.
Note: To change the entire home screen banner, under Header background image, click Select Image and Complete steps 5-6. If you change the home screen banner, your team logo image does not appear. The home screen banner should be 1220 pixels wide, and 200 pixels high.

Add a custom background for your website

You can use an image for the background, or you can set the background color of your website. If you’re using a background image, it should be a minimum of 1600 pixels wide and 900 pixels high.
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click HockeyTech – Background.
  4. Click Change Image.
  5. Do one of the following:
    • If you already added the background image to WordPress, in the Media Library tab, click the background image. Click Choose Image.
    • To add a background image, in the Upload Files tab, click Select Files. Select the image you want to upload and click Open.
  6. Click Save & Publish.
Note: To set a background color, click Select Color. Select a color or type a color code. If you set a background color, your background image does not appear.

Customize your website colors
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click HockeyTech – Theme Colors.
  4. Next to any of the options, click Select Color.
  5. Click a color or type a color code.
  6. Click Save & Publish.
Note: Table row colors are used on stats pages. It’s recommended you use muted, neutral colors for table rows.

Track your website data with Google Analytics
  1. On the WordPress dashboard, in the menu on the left of the screen, click Appearance > Themes.
  2. Below the Jellyfish theme, click Customize.
  3. Click HockeyTech – Google Code.
  4. In the Analytics code field, type your Google Analytics code.
  5. Click Save & Publish.
    • Related Articles

    • Resizing images for your website

      Before you add an image to WordPress, you can resize the image using photo-editing software. The following image sizes are the ideal image dimensions if your website uses the Swordfish theme.
    • Troubleshooting: Some content isn't appearing on my website's home page

      In some cases, content that you publish on your website’s home page doesn’t appear. To fix this issue, try completing the following steps: On the WordPress dashboard, in the menu on the left of the screen, hover your mouse cursor on Appearance. Click ...
    • Set up a splash screen for your website

      The splash screen is an optional screen that appears immediately when visitors browse to your website, before the home page appears. You can use a splash screen to promote special events, ticket sales, or for other short-term promotional needs. On ...
    • Installation Requirements: HockeyTech ViPr System

      Installation Requirements: HockeyTech ViPr System   Camera Location Requirements: Camera Location should be as close to center ice as possible, with an allowable variance of 10ft in either direction The camera should be at least 30 feet from the near ...
    • Add videos to your website

      You can add game highlights or other videos to your website to help engage your visitors with multimedia content. There are two primary places on your website that you can add a video: Add a video to the right sidebar of your website Add a video to a ...