Меню

Joomla как изменить цвет кнопки



Joomla 3.x. Как изменить основные цвета

Из этого туториала Вы узнаете, как изменить цветовую схему в шаблоне Joomla.

Большинство цветов шаблона можно изменить в файлах .CSS. Как правило, эти цвета задаются в файле template.css. Для того чтобы изменить цвета, Вы можете внести изменения в этот файл в админ панели Joomla.

Давайте, например, изменим цвет фона основной части страницы.

Исследуйте элемент, используя плагин Firebug для браузера FireFox:

Вы сможете увидеть файл и строку, где находится фрагмент кода, в который нужно внести изменения:

Войдите в вашу админ панель Joomla.

Перейдите на вкладку ‘Расширения’ > ‘Шаблоны’ (Extensions > Templates). Откройте вкладку ‘Шаблоны’ (Templates) слева:

Нажмите на ссылку ‘Детали и файлы ThemeXXX’ (ThemeXXX Details and Files), где XXX — номер вашего шаблона:

Откройте папку ‘CSS’, которая доступна слева:

Откройте файл ‘template.css’:

Найдите правило CSS, которое Вы ранее исследовали. Вы можете также искать по номеру строки:

Измените код цвета по умолчанию на нужный Вам.

Сохраните файл:

Обновите страницу для просмотра изменений.

Вы можете аналогично изменить цвета любого другого элемента на вашем сайте.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Похожие записи

This video guide is going to show you how to check available modules positions in Joomla 3.x template and how to use this information.

Из этого туториала Вы узнаете, как работать с модулем TM Ajax Contact Form.

Февраль 20, 2017

Из этого туториала Вы узнаете, как включить/отключить лайтбоксы (в компоненте JoomGallery) в шаблонах Joomla 3.x.

Submit a ticket

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

Источник

Меняем внешний вид панели управления Joomla 3

Каждый интернет ресурс должен обладать своим уникальным стилем оформления. Поэтому владельцы сайтов зачастую прибегают к использованию сторонних шаблонов. В них можно найти массу полезных настроек по изменению внешнего вида: выбор цветовой гаммы для элементов, придания им определённой анимации, установка фонового изображения и многое другое. Однако эти настройки предназначены исключительно для самого шаблона, и никаким образом не относятся к административной части. А что, если создание корпоративного сайта обязывает админа изменить облик внутренней части Joomla под собственный дизайн фирмы? Согласитесь, было бы приятно работать на сайте, где административная панель и общий вид веб ресурса имеют общий стиль. Мы рассмотрим возможности, которые предлагает данная CMS по редактированию вида панели и изменим страницу входа для администратора.

Стандартные средства Joomla

В отличие от других движков, разработчики Joomla уже позаботились о создании всевозможных настроек без вмешательства во внутренний код. Переходим: Панель управления—>Расширения—>Менеджер шаблонов.

Здесь располагаются все стили, как для шаблонов, так и для панели. После установки Joomla как правило по умолчанию стоит «isis — Default», вот с этим пунктом мы и будем работать. Для начала необходимо создать точную копию этого стиля, это делается для того, чтобы можно было всегда вернуть стандартные параметры. Выбираем необходимый пункт и нажимаем «Дублировать», после чего появится «isis — Default (2)».

Читайте также:  Моча у ребенка темно желтого цвета у ребенка

Мы только что создали точную копию стиля и теперь можем менять в ней всё что захотим. Дальше устанавливаем « isis — Default (2) » как стиль по умолчанию и переходим в его настройки. Обязательно меняем название стиля на своё (к примеру MyStyle ) и открываем вкладку «Дополнительные параметры».

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

Изменяем страницу входа для администратора

Для более детального преображения нам понадобиться изменить файлы на сервере. Заходим на FTP с помощью программы FileZilla в директорию …\administrator\templates\isis\. Не смотря на то, что мы дублировали стандартный стиль и установили его по умолчанию, Joomla всё равно использует папку «isis» для формирования формы входа. В этой папке нам требуется изменить файл login.php, а так же template.css расположенный в подпапке «css».

Скачиваем login.php на компьютер и открываем файл через Notepad++ . В нижней части находим следующий код:

И меняем его на этот:

После чего загружаем обратно с заменой и смотрим результат. В итоге наша нижняя строчка изменилась. Надпись о переходе на сайт передвинулась слева на право, а эмблема Joomla убралась.

Источник

Как изменить оформление пунктов меню

Довольно часто начинающие пользователи Joomla! спрашивают как можно изменить оформление пунктов меню. Для изменения оформления пунктов меню необходимо отредактировать CSS стили меню в шаблоне.

Приводим описание классов CSS отвечающих за оформление пунктов меню:

/*этот класс отвечает за оформление пунктов меню*/
a.mainlevel:link, a.mainlevel:visited <
font-family:Arial; /*тут задаем семейство шрифтов*/
font-size: 13px; /*тут задаем размер шрифта*/
color:#0000FF; /*тут задаем цвет шрифта*/
font-weight: normal; /*тут задаем оформление — обычный или жирный шрифт*/
text-decoration: none; /*тут задаем, будет ссылка подчеркнута или нет*/
>

/*этот класс отвечает за оформление пунктов меню при наведении курсора */
a.mainlevel:hover <
font-family:Arial;
font-size: 13px;
color:#000099;
font-weight: normal;
text-decoration: underline;
>

/*этот класс отвечает за оформление активных пунктов меню, т.е. тех, где вы сейчас находитесь */
a.mainlevel:link#active_menu, a.mainlevel:visited#active_menu <
font-family:Arial;
font-size: 13px;
color:#000099;
font-weight: bold;
text-decoration: none;
>

Joomla!® CMS — пожалуй, лучшая система управления контентом с открытым исходным кодом

Joomla! — это больше, чем просто программное обеспечение, это люди, включающие разработчиков, дизайнеров, системных администраторов, переводчиков, копирайтеров, и, что самое главное — простых пользователей.

Мы рады пригласить вас в ряды нашего сообщества!

Источник

Joomla как изменить цвет кнопки

Быстрый старт в Joomla

Чтобы задать вопрос или посмотреть ответы на уже существующие вопросы необходимо авторизоваться.

Логин и пароль для доступа к форуму приходит автоматически на почту, сразу после покупки курса(ов).

Всё о Joomla в одном месте

Последняя версия
CMS Joomla — бесплатная система управления контентом с открытым исходным кодом. Джумла постоянно обновляется, имеет огромное количество расширений и позволяет создавать любые типы сайтов.

Joomla.center is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Joomla!® является торговой маркой компании Open Source Matters inc в США и др. странах. Название Joomla! и его вариации используются в рамках ограниченной лицензии, определённой компанией Open Source Matters. Проект joomla.center не относится к компании Open Source Matters или проекту Joomla! Точки зрения представленные на данном сайте не являются официальными точками зрения Joomla Project или Open Source Matters. Торговая марка Joomla® и логотип используются в рамках ограниченной лицензии, предоставленной Open Source Matters.

© Александр Куртеев. Центр обучения Joomla.
ОГРНИП 307434525600161, ИНН 434540800305
Все права защищены. © 2008 — 2021

Please publish modules in offcanvas position.

Источник

Joomla как изменить цвет кнопки

Сегодня в очередной раз получил письмо от старого клиента, которому когда-то делал сайт на Joomla с просьбой «чуть-чуть подправить сайт», а именно — уменьшить отступы вокруг позиции модуля. Я думаю, эта проблема рано или поздно возникает почти у каждого владельца сайта на любом движке — хотя бы раз в год надо чуть освежать дизайн.

Если объем работы невелик, я своим клиентам делаю за символическую цену или, иногда, вообще бесплатно. Сложность в том, что у меня не всегда есть возможность сделать это быстро. Если вы хоть чуть-чуть разбираетесь в HTML и CSS, я думаю, это руководство будет вам полезно.

Возьмем простой пример — на сайте под Joomla3 нужно поменять цвет модулей в боковой колонке. В качестве примера буду использовать данный сайт.

Какой софт нам потребуется?

  1. Браузер, в котором можно смотреть исходный код страницы и, что важно — код отдельного элемента. Это позволяют делать почти все современные браузеры
  2. FTP-клиент — программа, позволяющий видеть сайт «изнутри» как папку на жестком диске. Я использую Total Commander (условно бесплатный).
  3. Notepad++ — текстовый редактор, оптимизированный для работы с кодом. В отличие от обычного «блокнота» имеет нумерацию строк, подсветку синтаксиса и возможность быстрого перехода к нужной строке. Подробнее о Notepad++

Алгоритм действий

1. Открываем страницу в браузере, находим на ней тот элемент, стиль которого нужно поменять.

2. Делаем по этому элементу правый клик мышкой, в появившемся контекстном меню выбираем пункт «посмотреть код элемента». Я использую Opera, в ней это выглядит так:

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

В правой панели — стиль элемента, в данном случае, это класс .well — мы видим, что в нем прописаны все цвета, отступы, границы, и прочие свойства. Более того, мы можем прямо здесь внести изменения в стиль — отключить элементы, задать им другие параметры и браузер покажет данный элемент с новыми настройками.

Только вот беда — как ни настраивай стиль через браузер, при следующей перезагрузке страницы все настройки восстановятся, что вполне логично — мы не можем через браузер вносить изменения в файле на сервере (к счастью :), нам нужно зайти на сервер по FTP и найти файл со стилями. Где искать?

В панели со стилями справа вверху указан путь к файлу css на сервере, а также номер строки в этом файле, где прописаны настройки стиля элемента. Чтобы поменять вид элемента на сайте нам нужно подправить файл стиля на сервере.

3. Подключаемся к сайту по FTP при поможи FTP-клиента. Для этого нам потребуется адрес хоста, логин и пароль к FTP-аккаунту — этой информацией вас должен снабдить хостинг-провайдер.

В нашем случае путь к файлу стиля такой: /templates/new-protostar/css/template.css (строка 2155)

Находим этот файл и открываем его в редакторе (я использую Notepad++) и ищем данную строку. В Notepad++ есть горячая клавиша Ctrl+G — перейти к строке. Вводим номер 2155 и нажимаем ОК. И вот, примерно что мы увидим:

Теперь можно вносить изменения в файл (только не забудьте сделать бэкап — мало ли что?). После сохранения файл будет закачан обратно на сервер и изменения станут видны на сайте.

Этот вариант хорош тем, что он практически универсален — он применим не только для сайта на Joomla, но и на любом другом движке — главное, чтобы у вас был FTP-доступ и обозначенный выше набор программ (или их аналогов).

Если нет доступа FTP

Если у вас нет доступа по FTP, это можно сделать в редакторе шаблона через админку сайта.

В Joomla это делается через меню «расширения» / «менеджер шаблонов» /

. откроется подобие файлового менеджера, в котором можно открывать файлы движка и вносить в них изменения.

В других движках также почти всегда есть возможность это сделать.

Этот метод плох тем, что позволяет редактировать только тот стиль, который зашит в шаблон. Если же вы используете какое-то альтернативное расширение для управления контентом, например, K2, вы не сможете добраться до файла CSS.

Да и производительность труда при использовании данного метода правки будет низкой — функциональность редактора не впечатляет.

«Element-style» — как его поменять?

Бывает так, что в окне просмотре CSS-свойств элемента фигурирует фраза element-style. Это означает, что свойства элемента прописаны не во внешнем CSS-файле, а в самом коде HTML или PHP. Поменять его сложнее, чем элемент, описанный во внешнем файле CSS, но все же выполнимо. Самая большая сложность — это найти тот самый файл, который содержит этот элемент — в Joomla они, как правило, раскиданы по всей папке public_html 🙂

Обычно описание элементов, общих для всего сайта, находится внутри шаблона — public_html/templates/имя шаблона/index.php, но если вы используете сторонние компоненты, то искать исходный код страниц следует в папке этих расширений public_html/components/имя компонента/views — а там уже смотреть исходный код php-файлов и html-шаблонов и искать нужный элемент и его описание. В очередной раз напоминаю — прежде чем вносить изменения в код, сделайте резерную копию.

Но самое обидное то, что даже если вы нашли и поменяли нужное свойство, при следующем обновлении компонента, все сбросится к значениям по умолчанию.

Источник