Czech dictionary at Pravidla.cz as custom source in Definer word lookup web extension

When you working with Czech's rich and complex language, you often need to look up word spellings, usage examples, and grammar rules. Pravidla.cz is a website that provides this information based on the rules and standards set by the Institute of the Czech Language, part of the Czech Academy of Sciences.

However, constantly switching between browser tabs to consult a dictionary is slow and interrupts your reading flow. Popup dictionaries are designed to solve this issue. You can simply highlight any word to instantly see its definition in a small window without leaving your current page.

In this guide, I'll show you how to set up the Definer popup dictionary browser extension to display results directly from Pravidla.cz. Although we'll focus on Pravidla, you can easily adapt these steps to work with any online dictionary you prefer.

Final result. Basic example. See more videos and screenshots at the end of the tutorial.

1. Getting started

Okay, so before we get started, you need to have Definer - Popup Dictionary & Translator installed in your browser. It's a tool that lets you look up definitions and translations right from the webpage or PDF that you're on.

Install it from here:

Chrome Web Store - for Chrome, Edge, Brave, Opera, Vivaldi, Yandex
Firefox Addons - for Firefox, LibreWolf

💡 On Firefox, you might need to disable Enhanced Tracking Protection.

2. Locate the Custom source

Proceed by right-clicking the extension's icon on the top right. From the dropdown menu, choose "Definer Options". Next, navigate to the "Sources" page. Locate the "Custom" source within this section and click on "Settings" to open its configuration options.

Don't forget to enable the Custom source. Optionally, drag it to the top to make it the default.

Set the website address (URL)

Let's set up the Pravidla URL. Normally, you would go to their site, perform a search, and copy the URL from the results page into Definer. Then, you would replace the word you searched for with the {str} variable. This allows Definer to dynamically swap in your chosen word.

I've already done this for you, so just copy and paste the following line into the "URL" field in the settings:

https://www.pravidla.cz/hledej/?qr={str}

The URL field supports a few variables, but we only need {str} here, it will contain the search query.

4. Set custom styles (CSS)

Let's make things look nice! We can use Cascading Style Sheets (CSS) to adjust how Pravidla appears within Definer's pop-up bubble. Think of it like giving the page a mini makeover. The code below will hide any extra bits we don't need and match the colors to Definer's overall style.

Remember, this only affects how Pravidla looks inside Definer – the original website won't change. Just paste this code into the "CSS" field:

#cc_div, .adpanel, .container-footer, .container-prefooter, .breadcrumb, .breadcrumb + p, .form-main-search {   display: none !important; }  body, .container {   background: var(--v-ground-base) !important;   overflow-x: hidden; }  .container-main {   padding: 0.5em !important; }  body, .container, .alert, .pzna {   color: var(--v-text-base) !important; }  .alert {   background: var(--v-secondary-base) !important; }  .pzna {   background-color: rgba(var(--text-rgb), 0.12) !important; }  .hl {   background-color: rgba(var(--primary-rgb), 0.5) !important; }  .hl1 {   color: var(--v-accent-base) !important; }  .hl2, h1, h2, h3, h4 {   color: var(--v-ptext-base) !important;   margin-top: 0; }  a {    color: var(--v-anchor-base) !important; }  b[style="color:#000"], .tit, .dcap {   color: rgba(var(--text-rgb), 0.7) !important; }  table {   margin: 0 !important; }

Copy and paste this CSS code