Configuring the Domain Menu
Copy this into the menu block in the Design section:
<script>
// https://wiki.qeng.org/doku.php?id=domain_menu
add_navbar({
classes: 'navbar-expand-lg navbar-light bg-light mb-2',
items: [
// Add new buttons to this list
{name: 'GAMES', url:'index.php'},
{name: 'ARCHIVE', url:'archive.php'},
{name: 'RATING', url:'ratings.php'},
],
langs: {'EN':'en', 'UA':'uk', 'RU':'ru'}, // Language selection. Can delete this line if not needed.
username: '!username!',
});
</script>
Configuring Buttons in the Menu
Buttons are listed in the items section - one line per button.
The first two buttons are always visible.
The profile button is added automatically.
Localization of Menu Buttons
Translation for buttons will be applied if you add this to the menu block in the Design section at the top:
<script>
// English (en)
addTranslation('en', 'АВТОРАМ', 'ABOUT');
addTranslation('en', 'ТЕСТ ДВИЖКА', 'EXAMPLES');
addTranslation('en', 'РЕЙТИНГ АВТОРОВ', 'BEST AUTHORS');
addTranslation('en', 'РЕЙТИНГ ДОМЕНОВ', 'BEST DOMAINS');
addTranslation('en', 'СТАТИСТИКА', 'STATS');
// Ukrainian (uk)
addTranslation('uk', 'АВТОРАМ', 'АВТОРАМ');
addTranslation('uk', 'СТАТИСТИКА', 'СТАТИСТИКА');
addTranslation('uk', 'ТЕСТ ДВИЖКА', 'ТЕСТ ДВИГУНА');
addTranslation('uk', 'РЕЙТИНГ АВТОРОВ', 'РЕЙТИНГ АВТОРІВ');
addTranslation('uk', 'РЕЙТИНГ ДОМЕНОВ', 'РЕЙТИНГ ДОМЕНІВ');
</script>
Links to Domain Pages
For example, a page with frequently asked questions - needs to be populated manually. You can specify a different ID if you need several such pages.
{name: 'F.A.Q.', url:'page.php?id=faq'},
Links to External Pages
For example, a link to a telegram chat or channel. target:'_blank' - means it should open in a new tab.
{name: 'TELEGRAM', url:'https://t.me/qeng_authors', target:'_blank'},
Configuring Classes
You can change the set of classes in the line
classes: 'navbar-expand-lg navbar-light bg-light mb-2',
Classes are space-separated.
Toolbar Auto-collapse
In order for all buttons to be visible on wide screens, you can add one of these classes:
- navbar-expand-xl - all buttons on one line if the screen is wider than 1200 pixels.
- navbar-expand-lg - all buttons on one line if the screen is wider than 992 pixels.
- navbar-expand-md - all buttons on one line if the screen is wider than 768 pixels.
- navbar-expand-sm - all buttons on one line if the screen is wider than 576 pixels.
Color Style
For a light toolbar, add the classes navbar-light bg-light
For a dark toolbar, add the classes navbar-dark bg-dark
Margin Under the Toolbar
For a margin under the toolbar, add one of the classes mb-1 mb-2 mb-3 mb-4 mb-5. The larger the number, the larger the margin.
Logo
You can add a logo to the toolbar on the left.
To do this, add the logo section after classes
Example of adding an image:
logo: '<img style="height:36px;" class="mr-3" src="https://qeng.org/apple-touch-icon.png"></img>',