Welcome back! Now that you’re familiar with the basics, it’s time to get creative. In this session, we are going to explore the Style Editor, the heart of your broadcast’s visual identity.

As you will see going forward, the Style Editor gives you granular control over almost every visual element, like notifications or complex data graphs.

Step 1: Navigating the Tabs

By default, the software opens to the In Game tab. This section handles everything that appears while the match is actually being played.

However, to keep our workflow organized for this tutorial, we are going to switch gears:

1. Look at the top navigation bar in the main panel.
2. Click on the Pre Game tab.
3. You should now see a screen similar to the one beneath, featuring styles like “BottomRow” and “ChampionSelectEU.”

Step 2: Understanding Prebuilt Styles

You’ll notice a yellow notice box in the editor. This is important: Prebuilt styles cannot be edited directly. These are protected templates to ensure you always have a working “base” to fall back on. To make any changes, you must first create your own copy.

Step 3: Creating Your Custom Style

First, we will focus on the BottomRow style, which controls the lower portion of the screen during Champion Select.

1. Locate the BottomRow entry in the list.
2. Click on the three dots menu (⋮) on the far right side of that entry.
3. Select Duplicate from the dropdown menu.
4. Name your style: Give it a unique name (e.g. “MyTournament_BottomRow”) so you can easily identify it later.
5. Click Confirm.

You will be asked, if you want to set this new style as active, click yes for this instance.

Step 4: Start Editing

As soon as you have everything set up, we can start editing individual items and styles. For example:

1. 1. Click the BottomRow Style in the lower third of the menu.
   2. In the Variant section on the right side you will see the active default style. Click the three dots menu and duplicate the style for edits.
   3. Click the three dot menu of the duplicated style and choose Edit.

4. Now you will see a new menu with the chosen regions clickable for edit in your window.

5. Click a chosen field that you want to edit on the left side of the menu.
6. The menu on the right side will change to all stylable features such as fonts, widths and hights of image placements or color changes.

Remember, you can always review your changes through mocking the data. For that, toggle the button next to the test tube and click the eye icon on the left side to copy the link. Paste the link into your browser source in your broadcasting tool or review it in your browser directly.

Also, the save button in the top right is toggled on by default, which means all your changes will be saved to your style for now. You can deactivate the button any time.

Step 5: Saving, Exporting and Importing

After finishing all your edits you might want to copy the style and use it on different setups or send it to colleagues and friends. For that follow these steps:

1. Make sure you’ve selected your style duplicate as active.
2. Click the three dots menu (⋮) on the far right side.
3. Now you can choose:
   1. Export your style onto your local computer. This way you need to manually copy/send the file to the other setup.
   2. Basic Tier only: Push the style to the cloud, so you can redownload it where ever you log in again.

EXTRA: Dynamic Placeholder System

You will find that some style options have dynamic placeholders for texts. You can use these to edit certain areas by replacing or adding your own texts or other placeholders. Make use of the auto completion hints available under clicking the ⓘ.

You’re done!

After finishing the “Pre Game” styles, same procedures apply for “In Game” and “Post Game” styles. At this point, you will know what to do. 😊💪

Get started and remember to share your creations on our Discord in the “i-made-this” channel. We’re excited to see your style ideas. 👀

Happy styling!

To ensure every streamer has the right tools for their specific needs, LeagueBroadcast is divided into different functional tiers. Currently, we offer:

• The Free Tier: Our entry-level suite that provides all the essential tools to get a high-quality broadcast up and running immediately.

• The Basic Tier: An expanded feature set for creators looking to add more depth and automated elements to their production.

In this first part of our series, we are diving deep into the Free Tier. We will walk you through the core interface and cover every feature you need to complete a basic setup, from managing your first teams to mastering live game controls.

Let’s start!

Step 1: Initialize Your Team Library

The “Teams and Players” section is your database. Even in the Free Tier, you can manage the core identity of the teams playing in your match.

• Go to DATA > Teams and Players in the left sidebar.

• Click Create New Team (top right) to add a new organization to your list. Or just use the existing teams and edit those.

• Enter the Name and Tag.

• Change the assigned Colors for your team’s primary, secondary and accent colors. These colors will automatically skin your in-game overlays to match the team’s branding.

• Click the Team Icon on the far right to upload the team’s logo or chosen image.

• Player info gets autofilled as soon as you have started the game.
  • Optional: Add Members for the specific team and enter their member name, tag, first and last names and assign a role. In case you have the corresponding info, you can also add the members PUUID.

After you’ve added your teams, we can hop over to the next step.

Step 2: Customize Your Visuals

Before going live, you want to ensure the broadcast matches your aesthetic and needed design.

• Go to DATA > Style Editor in the left sidebar.

• You will find yourself in the “In Game” settings per default, so we will go trough these adjustments first.

• Click on the three dots on the right side of the “DefaultInGame” style to duplicate it.

• After duplicating the style, you will find all available options underneath. Choose which options you would like to enable or disable. Options with a “Default” sign can be customized as well. For that, click on the option you wish to edit and proceed to the bottom right corner with the “Variant” headline. Duplicate the Default style just like before and make desired changes in the specific editor.

• To have a visualization of your customizations, you can make use of the available mocking data. For that, enable the “Mocking” button on the top bar and click the eye next to it, to copy the mocking link OR leave the editing overlay and enable mocking data as shown below.

• Then, use the “Copy Link” button and paste the copied link into your browser. Your changes in the editors will now be visible in your browser window in real time.
• To integrate the overlay into your stream, just add the link as a new browser source into your OBS.

• You can edit the features for Pre Game in the same way. Just click the tab “Pre Game” in the Style Editor to open the respective options.

Now your styles, designs and wanted visuals are set up. Let’s continue with syncing your game to the data in the overlay.

Step 3: Sync the Live Match

Once your teams are in the system, you need to tell the software which specific match is currently happening.

• Select Current Game under the PRE GAME header.

• Your “Current Game” will be blank, as long as you have no game running. If you start a League of Legends match parallel to opening the League Broadcast software, it will recognize your game and display the teams automatically.

• Look at the top right corner. If the button is green and says “In Game”, the software has successfully synced with your League of Legends client.

• Optional: Slain dragons will be shown by direct recognition in game. In case you want to edit them, they can be added manually by clicking on the buttons below the champion picks.

Now your game should be set up successfully and we can move over to the live game overlays.

Step 4: Master the Live Tools

With the game running, use these features to control the viewer experience:

Caster Mode

• Open this dashboard under “IN GAME” to see a real-time data feed of the different scoreboards, champion tabs and spawn timers. For the features to be active, you will need to have a League of Legends game running at the same time.

• For the Free Tier all available features

  • Global Scoreboard
  • Patch Number
  • Champion Tabs
  • Inhibitor Timer
  • Bottom Scoreboard
  • Baron Timer
  • Dragon Timer

• All other features displayed can be activated by upgrading to Basic Tier.

Game Camera

This feature enables the integration of “League Director” into your stream. Just name your sequence and add the corresponding file.

You’re done with the basics!

Start your next stream and enjoy a professional look. Or check out one of our more in depth tutorials.

Your BlueBottle Team 💜