Правка шрифта в шаблоне joomla

Относительно стилей, мне в первую очередь не нравится размер шрифта меню. На мой взгляд, его не помешает слегка увеличить, буквально на один пункт. Можно, кроме того, попробовать выравнивание верхнего меню по левому краю, хотя это повлечет выравнивание и логотипа по левому краю. Еще, пожалуй, надо слегка опустить левое меню вниз.

Итак, как и обычно отправляемся в исходный код, и ищем место, где выводится верхнее меню.

Здесь мы видим, что за вид верхнего меню отвечает три класса PILL_M, PILLMENU, MAINLEVEL. Открываем папку нашего шаблона, далее переходим в CSS, а в ней в свою очередь находим файл TEMPLATE.CSS (итого, полный путь у меня X:homelocalhostwwwsitetemplatessiteground-j15-42csstemplate.css). Открываем TEMPLATE.CSS и, кроме него открываем сам файл INDEX.PHP, что на уровень выше, который мы уже правили, когда меняли логотип. Он тоже пригодится.

Начнем с выравнивания текста. Для этого в файле TEMPLATE.CSS находим через поиск нужные нам классы, и в них для атрибута text-align прописываем значение left. Сохраняем файл, обновляем страницу и … не видим никаких изменений:). Значит надо искать дальше. В файле INDEX.PHP находим место вывода меню, и видим, что пункты меню выводятся в таблице, у которой, собственно и задан в локальном стиле атрибут margin. Меняем это все дело на style=»margin-left:120px;»(цифра получается методом проб и ошибок), и, наконец, получаем выравнивание по левому краю.

Теперь увеличим шрифт. Заодно, надо добавить отступы между пунктами меню, а то они практически сливаются. Для этого для класса mainlink, прописанного для ссылок исправим так, чтобы значение «margin: 0 10px 0 0 ;», что добавит справа отступ к каждой ссылке, а также изменим размер шрифта с 11 до 12 пикселей, установив «font-size:12px;».

Мне кажется, что меню с большим шрифтом стало выглядеть куда более выразительно.

Когда я нахожу это сочетание, то вижу, что количество классов и идентификаторов стилей, к которым относятся ссылки в главном меню, куда больше, чем это было в верхнем. Ну да ничего страшного, тем более некоторые названия классов указывают, что они имеют к меню большее отношение, чем другие.

Скорее всего, DIV с идентификатором LEFTCOLUMN является контейнером для всего меню. Чтобы это проверить, откроем файл TEMPLATE.CSS в папочке TEMPLATE на нашем сайте, найдем с помощью поиска идентификатор LEFTCOLUMN и впишем к прочему строчку «border: 1 px solid black;». Это очертит его границы.

Да, действительно LEFTCOLUMN содержит все меню, следовательно, с ним и надо работать. Сразу увеличим отступ от хедера, чтобы выровнять меню с текстом справа. Для этого вместо margin:0; пропишем margin: 23px 0 0 0;, то есть добавим сверху дополнительное расстояние.

Далее находим класс leftcolumn h3, отвечающий за заголовок меню и увеличиваем в нем шрифт на один пиксель.

Ищем далее, и находим класс leftcolumn для маркированного списка класса menu «ul.menu». Здесь я также увеличил размер шрифта на один пиксель, а кроме того, увеличил отступ от левого края до текста ссылки.

Кроме того, я искал, где увеличить вертикальный отступ элементов меню друг от друга, и нашел его в классе leftcolumn ul.menu.

Ну, теперь все выглядит гораздо более гармонично. Хотя это, безусловно, дело вкуса. Главное, я здесь показал, как можно это все изменить.

И последнее, что я хочу сделать, это сменить копирайт внизу страницы.