What is Mastodon?

Mastodon is a type of server software that provides access to a decentralized open-source social network (some people also informally use the word Mastodon to refer to the actual network itself). This network is made up of countless privately operating servers or “instances”. Some are public for everyone to join, others have restrictions on signing up.

Vivaldi Social is one such instance and everyone with a Vivaldi account can join. Vivaldi Social is run on Vivaldi’s servers in Iceland and is administered by the Vivaldi team. You can post short posts, images, links and more, to share your thoughts and ideas with the world. It works similarly to most other social networks, such as Twitter or Facebook.

Users on Mastodon instances can follow and interact with users on their instance, but they can also follow and interact with users on many other instances. You can think of Mastodon instances like email service providers. With any email account you can potentially message anyone, it does not matter who provides the underlying services or if you are on the same service as your friend. This is also true on Mastodon and the Fediverse.

---

What is the Fediverse?

In the same context as Mastodon, you will often also hear the term “The Fediverse”. Mastodon is currently the most popular Fediverse server software. The Fediverse, or sometimes just Fedi, stands for Federated Universe. It’s a collection of many different, independent social media servers (others include GoToSocial, Pleroma, Friendica, and PixelFed), which can interact with each other. The servers can do that thanks to a common technical standard called ActivityPub.

---

Joining Vivaldi Social

To join Vivaldi Social all you need to do is to go to https://social.vivaldi.net and log in with the account you use for other Vivaldi services, such as Sync. If you don’t have a Vivaldi account yet, there is an option to create one directly from the Vivaldi Social website.

You can also join Vivaldi Social from your favorite Mastodon desktop client or mobile app. When logging in, search for our instance social.vivaldi.net and follow the login instructions.

---

Account information and connecting with others

• Your Vivaldi account’s short form username (used for login) will be of the format: JohnDoe.
• Vivaldi Social’s instance name is social.vivaldi.net

To help friends to find you, give them your your username in long format @[email protected] (it looks like an email address with an extra @ at the beginning). Your friends can use this to look you up by searching for it in the search feature on their own instance. After locating you in this way, they will be able to follow or click on your name to see your profile.

Since there are no algorithms on Vivaldi Social and on Mastodon in general that show content based on your usage, you need to follow people and tags to build up a feed 100% curated by you. Thanks to the federated nature of Mastodon, you can follow accounts from any Mastodon instance with your account on Vivaldi Social.

Follow accounts

To follow accounts on Vivaldi Social:

Option 1

1. Open the profile of the account you want to follow.
2. Click on the Follow button on their profile, below the cover image on the right side.

Option 2

1. Search for the username (@Username@InstanceName) of the account you want to follow.
2. In search results, click on Follow next to the name.

---

Follow tags

In addition to user accounts you can also follow tags.

To follow a tag:

1. Click on a tag (e.g. #Vivaldi, #Caturday, #PhotoMonday) in one of the posts that includes it or search for the tag.
2. Browse recent posts that use the tag and see whether you want to see similar posts in your Home feed.
3. Click on Follow in the top right corner of the page.

---

Follow Vivaldi Social content with Feeds

If you’re using Vivaldi Feeds or any other feed reader, you can get new posts delivered straight to your feeds client.

To subscribe to content with Vivaldi Feeds:

1. Make sure that Mail, Calendar and Feeds have been enabled in Settings > General > Productivity Features.
2. In Vivaldi Social, open the profile or tag page you want to follow.
3. Add .rss to the end of the page URL.
   For example, https://social.vivaldi.net/@Vivaldi.rss or https://social.vivaldi.net/tags/Vivaldi.rss.
4. Press Enter to open the link and see a preview of the feed.
5. Click Subscribe below the page title.
6. Review and, if needed, edit the feed’s title and update frequency.
7. Click Add Feed.

If you use a different feed reader, copy the link with .rss at the end and add it to your feed reader using the client’s instructions.

Vivaldi introduces support for custom icon set for all toolbar buttons. Here’s how to best handle resources when creating your own icons.

Edit a theme

You can populate all the theme buttons right in the Vivaldi UI. To place your own icons, go to Settings > Themes > Editor > Icons to see a list of all available toolbar buttons sorted by category, and the interface to place your own icons. Custom icons will be included in an exported theme.

---

Image size

Vivaldi supports 28 × 28 pixels bitmap or SVG images in all toolbars. Larger images will be scaled to this size.

Icon layout

Vivaldi icon glyphs are sized at, or around 16 pixels. Your icon should leave margin around its edges, not filling the entire canvas, which can lead to big icons in a cramped toolbar. However feel free to use the available room for shapes spanning outside the imaginary boundary, or for bigger icons.

Suggested icon placement on canvas

---

Bitmap resources

Vivaldi supports bitmap images in GIF, JPG, JPEG, PNG, and WEBP format. Consider using a format that supports the alpha channel mask. Icons should maintain sufficient contrast against both light and dark background colors, as your theme icon set can be used in other themes as well.

Bitmap resources are best exported at double their target size to render sharply on high DPI displays and to leave room for UI scaling, i.e. export images at 56 × 56 pixels to double the resolution of the 28 pixel target.

---

SVG resources

Aside of bitmaps, Vivaldi supports the Scalable Vector Graphic (SVG) format, which may be produced in a few different ways.

If you’d like your icon to inherit current theme colors, do not use any fill color definitions, or use the currentColor keyword. That ensures proper color inheritance in all the different toolbar and theme combinations.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="currentColor"
>
  <!-- inherits fill color from current Vivaldi theme -->
  <path d="..." />
  <!-- uses specific fill color -->
  <path d="..." fill="#ffeea8" />
</svg>

SVG color inheritance example

On the other hand you can control all stroke and fill colors locally, independent of current theme colors. In that case you want to ensure all colors are set, so as not to inherit unexpected theme colors.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="#000"
>
  <!-- inherits default fill color #000 specified above -->
  <path d="..." />
  <!-- uses specific fill color -->
  <path d="..." fill="#ffeea8" />
</svg>

SVG code example with own color definitions

Whether you choose to use fill or stroke-based icons is up to you. In the later case define stroke properties inline.

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <!-- no fill; stroke color inherited from current Vivaldi theme -->
  <path
    d="..."
    stroke-width="1"
    stroke-linecap="round"
    stroke-linejoin="round"
  />
</svg>

Stroke-based SVG icon example

SVG filters and masks

Filters and masks in SVG are referenced by ID, which needs to be unique. If the ID is not unique, a reference to it could be lost, and the filter or mask will break. Maintaining a unique ID for the same filter across multiple files is tedious and won’t prevent ID duplicity in the Document Object Model (DOM).

To overcome the potential issues, consider flattening the graphic instead of using masks, or replacing SVG filters with inline Cascading Style Sheets (CSS). For example to replace feDropShadow SVG glow effect:

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <defs>
    <filter id="neonGlow-034">
      <feDropShadow
        in="enlarged"
        dx="0"
        dy="0"
        stdDeviation="40"
        flood-color="cyan"
      />
    </filter>
  </defs>
  <g filter="url(#neonGlow-034)">
    <rect x="7" y="7" width="14" height="14" rx="2" />
  </g>
</svg>

Original SVG filter

<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 28 28"
  fill="none"
  stroke="currentColor"
>
  <g style="filter: drop-shadow(0, 0, 1px, cyan)">
    <rect x="7" y="7" width="14" height="14" rx="2" />
  </g>
</svg>

Similar effect achieved by inline CSS

Minimized SVG

It is good idea to minimize exported SVG icons with a tool such as SVGO. Your editor may also minimize SVG on export, but this may come with some caveats, such as maintaining unique IDs.

SVG file encoding

SVG files must be UTF-8 encoded. Import sanitation strips all JavaScript and <style> elements (inline style attributes are allowed).

---

Theme archive format

The current Vivaldi theme format was expanded to support icons for a growing number of toolbar buttons or command chains. Single icon resource is exported in a theme archive JSON as button ID and image path pair.

"buttons": {
  "buttonId": "imagefile01.png"
}

If you are batch-processing the icon images you may consider exporting your custom theme in Vivaldi and updating the images by replacing them in the resulting ZIP archive.

Figma template

If you want to start creating a new icon set based off the official Vivaldi UI icons, we have created a Figma template for the occasion. The URL to the template is https://www.figma.com/community/file/1214878626987427743.

In general, mobile devices, such as smartphones and tablets, have smaller screens than laptops and desktop setups. This usually means that user interface elements and web contents are much smaller and that can make browsing on mobile more difficult. Luckily Vivaldi on Android comes with several zoom settings that you can adjust to reduce the strain on your eyes.

Zoom in on web pages

Change the default zoom level:

1. Go to Vivaldi menu > Settings > Web Pages > Accessibility > Zoom.
2. Move the slider to make text and images on websites smaller or larger.

Add a per site zooming option to the Main Menu:

1. Go to Vivaldi menu > Settings > Web Pages > Accessibility.
2. Enable Show zoom option in main menu.

After exiting Settings, you’ll find a new option named Default zoom in the main Vivaldi menu, which lets you adjust the zoom level of the website you currently have open. The zoom level will be retained when you open the same site in other tabs.

Some websites want to prevent you from changing the zoom level. To still zoom in and out enable Force enable zoom in Accessibility settings.

Change the user interface zoom level

To change the size of the toolbars (Address Bar, Tab Bar, etc.), Panels and Settings interface:

1. Go to Vivaldi menu > Settings > Web Pages > Accessibility > User Interface Zoom.
2. Move the slider to make the user interface smaller or larger.

Some permissions in the app are enabled by default, others are blocked and in many cases a website will ask for your permission, for example, to access your device’s camera and microphone, to show you notifications, etc.

To review and adjust your preferences for each of the settings:

1. Go to the Vivaldi menu > Settings > Web pages > Site Settings.
2. Tap on the permission in the list to see your options.

If a website has asked for permission, it will be listed on the permission’s page, from where you can adjust your choice by tapping on the domain name. In many cases you can also add exceptions to the default setting.

Settings and permissions in Vivaldi on Android

• Cookies
  Choose your blocking level:
  • Allow cookies
  • Block third-party cookies in incognito, aka private windows
  • Block third-party cookies
  • Block all cookies (not recommended)
• Location
• Camera
• Microphone
• Motion sensors
• Notifications
• JavaScript
• Pop-ups and redirects
• Intrusive or misleading ads
• Background sync
• Automatic downloads
• Protected content
  Choose whether to allow (recommended), block or have each website ask whether to play copyrighted media content.
• Sound
• Data Stored
  Get a detailed view of websites you’ve visited and an option to manage permissions per site. In addition, you can delete stored data of all sites or per site.
• NFC devices
• USB devices
• Clipboard
• Virtual reality
• Augmented reality
• Your device use
• Third-party sign-in
• Dark theme for sites
  Also accessible from Settings > Appearance > Themes.
• Desktop site
  Also accessible from Settings > Web pages.
• Autoplay
  Blocked by default and requires you to tap on the play button to view videos on websites. Allow Autoplay, if you have plenty of mobile data and want videos to start playing automatically whenever they appear on a web page.

Using Keyboard Shortcuts is a great way to speed up your workflow. Single Key Shortcuts allow even more speed and require less finger gymnastics to reach all relevant keys.

You can view and edit Calendar’s Keyboard Shortcuts in Settings > Keyboard > Calendar.

Available Shortcuts:

• D – Day View
• W – Week View
• N – Multiweek View
• M – Month View
• Y – Year View
• A – Agenda View
• K or Page ↓ – View Next Period
• J or Page ↑ – View Previous Period
• T or Home – View Today
• Alt + Page ↑ – Zoom View In
• Alt + Page ↓ – Zoom View Out
• C – Create Event
• G – Go to Date
• / – Search in Calendar
• R – Refresh Calendar
• Delete – Delete Event

To disable Single Key Shortcuts in Mail and Calendar:

1. Go to Settings > Keyboard > Keyboard Shortcuts.
2. Disable Mail and Calendar Single Key Shortcuts.

If you have your hand more on the mouse than on the keyboard, you can also create Mouse Gestures for all of the commands listed above. Click here to learn how to add new Mouse Gestures.

Using Keyboard Shortcuts is a great way to speed up your workflow. Single Key Shortcuts allow even more speed and require less finger gymnastics to reach all relevant keys.

You can view and edit Mail’s Keyboard Shortcuts in Settings > Keyboard > Mail.

Available Shortcuts:

• N – Compose New Message
• R – Reply to Message
• Shift + R – Reply All
• Shift + L – Reply List
• F – Forward Message
• Shift + Delete – Delete Permanently
• K – Mark Message as Read
• Shift + K – Mark Message as Unread
• J – Mark Message as Spam
• Shift + J – Not Spam
• M – Mark Message Thread as Read
• Shift + M – Mark Message Thread as Unread
• E – Show Messages for Sender
• L – Add Labels and Flags
• T – Show Message Thread
• G – Mark Message as Read and Go To Next Unread
• Ctrl + Enter – Send message
• Ctrl + Shift + Enter – Queue message

In addition, you can create your own shortcuts for the following commands:

• Move Message to Archive
• Quick Reply On/Off
• Restore Message from Archive
• Next Unread
• Previous Unread
• Mark All As Read
• Add New Mail Account
• Show Message as Text
• Show Message as HTML
• Mail Settings
• Add Attachment
• Discard Draft
• Show Advanced Mail Info

To disable Single Key Shortcuts in Mail and Calendar:

1. Go to Settings > Keyboard > Keyboard Shortcuts.
2. Disable Mail and Calendar Single Key Shortcuts.

If you have your hand more on the mouse than on the keyboard, you can also create Mouse Gestures for all of the commands listed above. Click here to learn how to add new Mouse Gestures.

Vivaldi’s Windows Panel offers an easy way to manage multiple tabs at once. Opening to the side of your main browser window, the Windows Panel will give you a tree-style view of all the open Tabs in all your open Windows.

Access the Windows Panel

Use one of the following options to open the Windows Panel:

• Click on the Window icon on the side Panel.
• Go to the Vivaldi menu > View > Windows Panel.
• Type “Windows Panel” in Quick Commands.
• Create a Keyboard Shortcut or a Mouse Gesture for the action.

Do the same to close the panel. Alternatively, click on Close in the top right corner of the panel.

How tabs and windows are displayed in the Windows Panel

Windows, Pinned Tabs, Tab Stacks, Workspaces, Duplicate Tabs, Synced Tabs, Inactive Tabs, and Recently Closed Tabs are grouped into folders you can expand and collapse.

The active tab has a little dot in front of it and the tab title is written in bold. Tabs you’ve opened, but haven’t viewed yet have their titles displayed in italics.

---

Open, Switch and Close Tabs

To open a new tab from the Windows Panel, click on the New Tab button near the top right corner of the panel. Next to it you’ll also find the button to open a New Window.

To find a particular tab from the long list of tabs you have open and have recently closed, you can use the search box in the top left corner of the panel.

To switch tabs, double-click on the tab you want to open. When you enable Activate with Single Click in Windows Panel settings, you can switch tabs with just one click.

To close tabs in the active window:

1. With the mouse, hover over the tab you want to close.
2. Click on the Close button that appears on the right side.

To close tabs in any window:

1. Right-click on the tab you want to close.
2. Select Close from the context menu.

Alternatively:

1. Click on the tab you want to close.
2. Press Delete on your keyboard.

---

Reorder and Move Tabs

You can easily change the order of your tabs using the Windows Panel.

1. Click on the tab you’d like to move.
2. Holding the left mouse button, move the tab to a new location.
3. Drop the tab to a new location and release the mouse button.

If you have multiple windows open, you can move tabs from one window to another using drag and drop.

---

Create Tab Stacks

Windows Panel lets you easily create Tab Stacks – groups of tabs stacked together to save space and make browsing more convenient.

Option 1

1. Click on the tab you’d like to add to a group.
2. Holding the left mouse button, move and place the tab on top of another tab.
3. Release the mouse button – you have now created a Tab Stack.

Option 2

1. Select the tabs you want to stack by holding down Ctrl / ⌘ or Shift key while you click on the tabs.
2. Right-click on one of the selected tabs.
3. Select Stack # Selected Tabs from the menu.

---

Tile Tabs

To tile tabs in order to create a side-by-side view in one browser window:

1. Select the tabs you want to tile by holding down Ctrl / ⌘ or Shift key while you click on the tabs.
2. Right-click on one of the selected tabs.
3. Select Tile from the menu.

You can also tile your Tab Stacks:

1. Right-click on the Tab Stack.
2. Select Tile from the menu.

---

Duplicate Tabs

If you have two or more tabs open with the same link, you’ll see them in the Duplicate Tabs section. It makes it easy to clean up extra tabs.

To close duplicate tabs:

1. Expand the Duplicate Tabs section in the Windows Panel.
2. Hover over the entry.
3. Click the Close button on the right side.

To close all duplicate tabs at once.

1. Expand the Duplicate Tabs section in the Windows Panel.
2. Click on Close All Duplicate Tabs at the end of the section.

---

Synced Tabs

When you’re logged in to your Vivaldi account and enabled syncing of Tabs, the tabs you have open on other devices and Web Panels will be listed in their own folder in the Synced Tabs section. If you’re syncing with another desktop client, synced tabs will be organized further to reflect the Workspaces and Tab Stacks you have created.

To open a synced tab on the current device:

• Double-click on the tab.
• Right-click on the tab and select Open from the context menu.

To open multiple tabs in one go:

1. Hold down the Ctrl/⌘ or Shift key to select the tabs.
2. Right-click on one of the selected tabs and select Open from the context menu.

---

Inactive Tabs

Tabs you haven’t viewed in a while will appear in the Inactive Tabs section in the Windows Panel, allowing you to review and make a call on whether you want to keep the tabs open or whether they can be closed.

To change how fast tabs are considered inactive:

1. Go to Settings > Tabs > Tab Display > Inactive Tabs.
2. Click on the - and + buttons to update the number of days.

---

Recently Closed Tabs

There’s a folder named Closed Tabs at the very end of the list of windows and tabs, where you can see and reopen recently closed tabs.

To reopen a tab, either:

• Double-click on the tab you want to reopen.
• Drag the tab out of the Closed Tabs folder and to a window you want to open it.

To clear the list of closed tabs:

1. Right-click on the Closed Tabs folder.
2. Select Clear All.

---

Windows Panel Settings

You can view and adjust Windows Panel settings in Settings > Panel > Window Panel.

Activate with Single Click

Normally you have to double click on a tab on the list to open it as the active tab. When you enable Activate with Single Click, it’s enough to click on the tab once to open it.

Pinned Folder

Pinned Tabs are listed at the top of the Windows Panel. You have the option to tell them apart from other tabs by grouping them into a folder or, when the setting is disabled, display a pin icon instead of the website’s favicon.

Create a Tab Stack by Drag and Drop

With drag and drop you can reorder tabs and when you drop one tab on another, you can group these tabs into a Tab Stack. To prevent accidental stacking while reordering tabs you can disable Create a Tab Stack by Drag and Drop.

Show Unread Tabs Badge

When you open new tabs in the background, then until you focus on them, they’re considered Unread Tabs. The number of unread tabs will be shown on the Windows Panel. If you don’t care for that information, you can disable Show Unread Tabs Badge.

---

…and much more

You can do a lot more with your tabs in the Windows Panel. To explore the possibilities, right-click on a window, a tab or a group of tabs and see the list of available actions, such as Duplicate, Hibernate and more in the menu.

Android 12 and up supports opening multiple windows of the same app. This means that if you have a newer mobile device, you can browse with Vivaldi in multiple windows just like on desktop.

Open a new window

Multiple windows are supported better on devices with larger screens, such as tablets. To open a new window on a tablet or a phone with a width larger than 600dp:

1. Open the Vivaldi menu.
2. Select New Window.

Though not as convenient, you can open a new window on a smaller screen by following these steps:

1. Open Vivaldi.
2. Open your devices app switcher.
3. Long-press on the Vivaldi logo above the app preview thumbnail to open a split-screen view.
4. Search for Vivaldi and tap on it to open a new window in the other half of the split screen.
5. Exit split screen view, for example, by swiping the divider all the way up or down the screen.

When checking the app switcher, you’ll see Vivaldi listed twice or more, if you’ve opened even more windows.

---

Switch windows

To switch windows:

1. Open the Vivaldi Menu.
2. Select Manage Windows.
3. Select the window you want to focus on.

---

Move a tab to another window

To move a tab you have open in one window to another window:

1. If there’s none open already, open a new window.
2. Open the tab you want to move.
3. Open the Vivaldi Menu.
4. Select Move to other window.

Close windows

To close the non-active window:

1. Open the Vivaldi Menu.
2. Select Manage Windows.
3. Tap on the 3 dot menu on the right side
4. Select Close window.

Main Menu in Vivaldi on Android gives you access to most of Vivaldi’s key features and tools.

Access the Main Menu

Whether you’re using the browser on a small phone screen, a large tablet screen or from your car’s center console, the menu can always be accessed from the right side of the Address Bar. Just tap on the Vivaldi logo to open it. The options available in the menu depend on whether you have open a web page or the browser’s Start Page.

To close the menu, tap on the feature you want to use or on an area outside the menu.

---

Customize the menu

On smaller screens, in the Main Menu, there’s a menu bar with 5 of the most important menu options. There’s more screen real estate on larger screens, so the menu bar is not available on tablets and the like. Since the importance depends on the person using the browser, you can customize the menu bar to fit your needs.

To customize the menu:

1. Go to Vivaldi Menu > Settings > General > Menu Settings.
2. Choose between the 2 presets or make your own menu.

To put together your own custom layout for the menu bar:

1. In the Main Menu Layout settings, choose the third option, Custom layout.
2. Move the menu items you want to see on the menu bar to the first 5 positions in the list.
   To reorder menu items, long press on the item you want to move and drag it to your preferred position.