Настройка модуля переключения языков

В модуле переключения языков значки языков по-умолчанию расставляются с зазором в 4 пиксела по горизонтали, пример: .
Подскажите, плиз, как убрать этот зазор?
И второй вопрос: по-умолчанию значки не реагируют на наведение мыши. Как сделать так, чтобы в пассивном состоянии у значка была одна картинка, а при наведении мыши менялась бы на другую?

 

Думаю надо в стили лезть, копаться. В частности посмотреть какие у данных элементов значения padding и margin. Если они конкретно у них не прописаны, то прописать.
2-й вопрос видимо псевдоклассом hover решается: https://webref.ru/css/hover

 

Из интернета нашел, что стиль редактируется в файле \media\mod_languages\css\template.css (исходный код такой):

Код (css):

1. div.mod-languages ul {
2.     margin: 0;
3.     padding: 0;
4.     list-style:none;
5. }
6. div.mod-languages li {
7.     margin-left: 5px;
8.     margin-right: 5px;
9. }
10.  
11. div.mod-languages ul.lang-inline li {
12.     display:inline;
13. }
14.  
15. div.mod-languages ul.lang-block li {
16.     display:block;
17. }
18.  
19. div.mod-languages img {
20.     border:none;
21. }
22.  
23. div.mod-languages a {
24.     text-decoration: none;
25. }

я заменил его на такой:

Код (css):

1. div.mod-languages ul {
2.     margin: 0;
3.     padding: 0;
4.     list-style:none;
5. }
6. div.mod-languages li {
7.     margin-left: 0px;
8.     margin-right: 0px;
9. }
10.  
11. div.mod-languages li.lang-active {
12.     margin-left: 0px;
13.     margin-right: 0px;
14. }
15.  
16. div.mod-languages ul.lang-inline li {
17.     display:inline;
18.     margin-left: 0px;
19.     margin-right: 0px;
20. }
21.  
22. div.mod-languages ul.lang-block li {
23.     display:block;
24.     margin-left: 0px;
25.     margin-right: 0px;
26. }
27.  
28. div.mod-languages img {
29.     border:none;
30.     margin-left: 0px;
31.     margin-right: 0px;
32.     hspace: 0px;
33.     vspace: 0px;
34.  
35.  
36. }
37.  
38. div.mod-languages a {
39.     text-decoration: none;
40.     margin-left: 0px;
41.     margin-right: 0px;
42. }
43.  
44. div.mod-languages a:hover {
45. border: 2px solid #f00; // Устанавливаем красную рамку
46.     text-decoration: none;
47.     margin-left: 0px;
48.     margin-right: 0px;
49. }

и максимум чего добился, это красной рамки при наведении на значок языка, при этом рамка не соответствует значку ( )

Подмена .gif значков языков по-умолчанию на нужные мне .jpg выполняется редактированием файла modules\mod_languages\tmpl\default.php. Вот его текст, в котором ".gif" подменен на ".jpg" (строчка 34):

Код (PHP):

1. <?php
2. /**
3.  * @package        Joomla.Site
4.  * @subpackage    mod_languages
5.  * @copyright    Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
6.  * @license        GNU General Public License version 2 or later; see LICENSE.txt
7.  */
8.  
9. // no direct access
10. defined('_JEXEC') or die('Restricted access');
11. JHtml::_('stylesheet', 'mod_languages/template.css', array(), true);
12. ?>
13. <div class="mod-languages<?php echo $moduleclass_sfx ?>">
14. <?php if ($headerText) : ?>
15.     <div class="pretext"><p><?php echo $headerText; ?></p></div>
16. <?php endif; ?>
17.  
18. <?php if ($params->get('dropdown', 1)) : ?>
19.     <form name="lang" method="post" action="<?php echo htmlspecialchars(JURI::current()); ?>">
20.     <select class="inputbox" onchange="document.location.replace(this.value);" >
21.     <?php foreach($list as $language):?>
22.         <option dir=<?php echo JLanguage::getInstance($language->lang_code)->isRTL() ? '"rtl"' : '"ltr"'?> value="<?php echo $language->link;?>" <?php echo $language->active ? 'selected="selected"' : ''?>>
23.         <?php echo $language->title_native;?></option>
24.     <?php endforeach; ?>
25.     </select>
26.     </form>
27. <?php else : ?>
28.     <ul class="<?php echo $params->get('inline', 1) ? 'lang-inline' : 'lang-block';?>">
29.     <?php foreach($list as $language):?>
30.         <?php if ($params->get('show_active', 0) || !$language->active):?>
31.             <li class="<?php echo $language->active ? 'lang-active' : '';?>" dir="<?php echo JLanguage::getInstance($language->lang_code)->isRTL() ? 'rtl' : 'ltr' ?>">
32.             <a href="<?php echo $language->link;?>">
33.             <?php if ($params->get('image', 1)):?>
34.                 <?php echo JHtml::_('image', 'mod_languages/'.$language->image.'.jpg', $language->title_native, array('title'=>$language->title_native), true);?>
35.             <?php else : ?>
36.                 <?php echo $params->get('full_name', 1) ? $language->title_native : strtoupper($language->sef);?>
37.             <?php endif; ?>
38.             </a>
39.             </li>
40.         <?php endif;?>
41.     <?php endforeach;?>
42.     </ul>
43. <?php endif; ?>
44.  
45. <?php if ($footerText) : ?>
46.     <div class="posttext"><p><?php echo $footerText; ?></p></div>
47. <?php endif; ?>
48. </div>

Подскажите, плиз, как отредактировать эти файлы, чтобы получить то, что написано в первом моем сообщении.