|
|
How to add Country Flags beside Language Package names:
1.Add this function into function_core.php:
- function getFlagByLangDir($langDir) {
- static $flagMap = array(
- 'default' => 'en', // default language =>
- 'br' => 'br',
- 'en' => 'en',
- 'es' => 'es',
- 'cn' => 'cn',
- 'tc' => 'cn',
- 'de' => 'de',
- 'fr' => 'fr',
- 'ru' => 'ru',
- 'in' => 'in',
- 'kr' => 'kr',
- 'vn' => 'vn'
- );
-
- return isset($flagMap[$langDir]) ? $flagMap[$langDir] : 'en';
- }
Copy Code
2. Change the template file: template/discuzx5/cells/common/header/i18n_switch.htm
- <div><!--{if !empty($_G['setting']['i18n']) && !empty($_G['setting']['i18nLang'])}-->
- <style>
- .header-i18n {
- position: relative;
- margin-left: 15px;
- cursor: pointer;
- }
- .i18n-icon {
- display: flex;
- align-items: center;
- padding: 6px 10px;
- background: #f5f5f5;
- border-radius: 4px;
- transition: all 0.3s;
- }
- .i18n-icon:hover {
- background: #e8e8e8;
- }
- .current-lang {
- display: flex;
- align-items: center;
- gap: 6px;
- }
- .flag-icon {
- width: 22px;
- height: 16px;
- display: inline-block;
- background-size: cover;
- border-radius: 2px;
- }
- /* Country Flags List */
- .flag-cn { background-image: url(/static/image/flag/cn.gif); }
- .flag-en { background-image: url(/static/image/flag/en.gif); }
- .flag-tw { background-image: url(/static/image/flag/tw.gif); }
- .flag-jp { background-image: url(/static/image/flag/jp.gif); }
- .flag-kr { background-image: url(/static/image/flag/kr.gif); }
- .flag-de { background-image: url(/static/image/flag/de.gif); }
- .flag-fr { background-image: url(/static/image/flag/fr.gif); }
- .flag-es { background-image: url(/static/image/flag/es.gif); }
- .flag-ru { background-image: url(/static/image/flag/ru.gif); }
- .flag-it { background-image: url(/static/image/flag/it.gif); }
- .flag-pt { background-image: url(/static/image/flag/pt.gif); }
- .flag-br { background-image: url(/static/image/flag/br.gif); }
- .flag-in { background-image: url(/static/image/flag/in.gif); }
- .flag-sa { background-image: url(/static/image/flag/sa.gif); }
- .flag-th { background-image: url(/static/image/flag/th.gif); }
- .flag-vn { background-image: url(/static/image/flag/vn.gif); }
- /* Default Country Flag */
- .flag-default { background-image: url(/static/image/flag/en.gif); }
- .i18n-dropdown {
- position: absolute;
- top: 100%;
- right: 0;
- margin-top: 8px;
- min-width: 160px;
- background: #fff;
- border: 1px solid #e1e1e1;
- border-radius: 8px;
- box-shadow: 0 2px 12px rgba(0,0,0,0.15);
- opacity: 0;
- visibility: hidden;
- transform: translateY(-10px);
- transition: all 0.2s;
- z-index: 1000;
- }
- .header-i18n:hover .i18n-dropdown {
- opacity: 1;
- visibility: visible;
- transform: translateY(0);
- }
- .poptip-arrow {
- position: absolute;
- top: -6px;
- right: 20px;
- width: 10px;
- height: 10px;
- background: #fff;
- border-left: 1px solid #e1e1e1;
- border-top: 1px solid #e1e1e1;
- transform: rotate(45deg);
- }
- .i18n-content {
- margin: 0;
- padding: 8px 0;
- list-style: none;
- }
- .i18n-item {
- margin: 0;
- padding: 0;
- }
- .i18n-item a {
- display: flex;
- align-items: center;
- gap: 10px;
- padding: 8px 15px;
- color: #333;
- text-decoration: none;
- font-size: 13px;
- transition: background 0.2s;
- }
- .i18n-item a:hover {
- background: #f5f5f5;
- }
- .i18n-item.active a {
- color: #ff6600;
- background: #fff5e8;
- }
- .i18n-item.active .flag-icon {
- box-shadow: 0 0 0 1px #ff6600;
- }
- .dzicon-arrowdown {
- font-size: 12px;
- margin-left: 5px;
- }
- </style>
- <div class="header-i18n">
- <div class="i18n-icon">
- <div class="current-lang">
- <i class="flag-icon flag-<!--{echo getFlagByLangDir($_G['setting']['i18nCurrent'])}-->"></i>
- <span>{$_G['setting']['i18nLang'][$_G['setting']['i18nCurrent']]}</span>
- <i class="dzicon dzicon-arrowdown">▼</i>
- </div>
- </div>
- <div class="i18n-dropdown poptip-popper">
- <div class="poptip-arrow"></div>
- <ul class="i18n-content">
- <!-- default language -->
- <li class="i18n-item <!--{if $_G['setting']['i18nCurrent'] == 'default'}-->active<!--{/if}-->">
- <a href="misc.php?mod=i18n&key=default">
- <i class="flag-icon flag-en"></i>
- <span>{lang default}</span>
- </a>
- </li>
- <!-- Load language package list -->
- <!--{loop $_G['setting']['i18nLang'] $_langDir $_langName}-->
- <!--{if $_langDir != 'default'}-->
- <li class="i18n-item <!--{if $_G['setting']['i18nCurrent'] == $_langDir}-->active<!--{/if}-->">
- <a href="misc.php?mod=i18n&key=$_langDir">
- <i class="flag-icon flag-<!--{echo getFlagByLangDir($_langDir)}-->"></i>
- <span>$_langName</span>
- </a>
- </li>
- <!--{/if}-->
- <!--{/loop}-->
- </ul>
- </div>
- </div>
- <script>
- // Language-Flag map
- function getFlagByLangDir(langDir) {
- var flagMap = {
- 'default': 'en',
- <span style="white-space:pre"> </span>'br' : 'br',
- 'en' : 'en',
- <span style="white-space:pre"> </span> 'es' : 'es',
- 'cn' : 'cn',
- 'tc' : 'cn',
- 'de' : 'de',
- 'fr' : 'fr',
- 'ru' : 'ru',
- <span style="white-space:pre"> </span>'in' : 'in',
- 'kr' : 'kr',
- 'vn' : 'vn'
- };
- return flagMap[langDir] || 'en';
- }
- document.addEventListener('DOMContentLoaded', function() {
-
- });
- </script>
- <!--{/if}--></div>
Copy Code 3. Don't forget to upload the flag image files: /static/image/flag/

See the result in (brasileiro) : https://demo.discuzstore.com/misc.php?mod=i18n&key=br
|
|