Меню

Как изменить цвет ссылок joomla



Внешний вид шаблонов. Как редактировать шаблон Joomla

В данной статье мы рассмотрим, как редактировать внешний вид шаблона Joomla.

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

Сейчас почти все шаблоны для Joomla общедоступны, скачать и установить их на сайте может каждый.

Давайте на примере разберем видоизменение стандартного шаблона Beez5.

Изменение заднего фона шаблона (background)

Я использую браузер Chrome, нажимаем F12 или щелкаем правой клавишей мыши на нужном месте и нажимаем «Просмотр кода элемента».

Как видно на рисунке, за задний фон шаблона отвечает тег body со стилем background.

В стилях указан цвет фона #EEE и фоновая картинка (путь к ней). Именно эти параметры дают нам фон сайта.

Для их изменения нужно просто заменить эти параметры (указать новый цвет и путь к новой картинке).

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

Путь к файлу можно посмотреть, если навести на название курсором.

Изменение логотипа сайта

Изменять логотип очень легко и для этого есть несколько способов.

Способ 1:

Так же, как и в первом способе, наводим курсор на логотип, щелкаем правой клавишей мыши и нажимаем Просмотр кода элемента. Все, что нам надо узнать, это адрес (путь) к логотипу. Теперь делаем свой логотип, даем ему такое же имя (fruits.gif) и просто заменяем на него старый логотип.

Способ 2:

Этот способ самый легкий, но встречается не во всех шаблонах. Идем в: Менеджер шаблонов — Beez5 (стиль) — Указываем логотип.

Способ 3:

Делаем все так же, только заменяем не файл, а путь к логотипу. Как видно на картинке, картинка вставлена через html, а не через css. Поэтому нужно изменять исходный код шаблона. Делается это легко:

Менеджер шаблонов — Beez5 — Изменить шаблон главной страницы.

Изменить ширину шаблона и блоков

Находим главный блок — div. Как видно на картинке, это

Таким же образом редактируются отдельные блоки. Находим блок, смотрим и изменяем стиль.

Изменение цвета текста и ссылок

Все это делается так же. Щелкаем правой клавишей мыши на тексте и нажимаем Просмотр кода элемента. Нам покажет блок и стиль блока отвечающий за параметры текста. Цвет текста и ссылок задается параметром — color.

Все файлы могут редактироваться через редакторы типа notepad++ или через стандартный «редактор» Joomla.

Менеджер шаблонов — Нужный шаблон. Тут Вам выдается список файлов (index.php, шаблон страницы 404, шаблон страницы печати, стили.)

Ваше мнение важно для нас. Пишите Ваши комментарии.

Источник

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 часов

Источник

Изменение цвета ссылок и элементов стиля шаблона «Protostar» в Joomla 3

В этой статье рассмотрим более подробно работу со стилями шаблона «Protostar» в Joomla 3. А конкретно, изменение стиля шаблона Protostar на вкладке «Дополнительные параметры» поле «Цвет текста». Название этого поля в настройках стиля шаблона несёт в себе неправильную информацию. На самом деле, речь идёт об изменение цвета ссылок и элементов стиля. Именно это и будет рассмотрено ниже.

Внешний вид сайта до изменения цвета ссылок и элементов стиля шаблона «Protostar»

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

Начальные настройки цвета ссылок и элементов стиля шаблона «Protostar»

В админке Joomla в «Менеджере шаблонов» в стиле шаблона «Protostar» поле «Цвет текста» имеет значение #0088cc , что соответствует голубому цвету, как видно на картинке выше:

Изменение цвета ссылок и элементов стиля шаблона «Protostar»

Поменяем знание поля «Цвет текста» с помощью клавиатуры, подставив другое значение, или с помощью мыши инструментом пипетка, кликнув на цветной квадратик в начале поля. После того, как цвет изменится, нужно сохранить изменения в настройке шаблона с помощью одной из кнопок в верхнем ряду кнопок управления:

Просмотр изменение цвета ссылок и элементов стиля шаблона «Protostar» на сайте

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

Если нет, то их всегда можно поправить в поле «Цвет текста», вернувшись на вкладку «Дополнительные параметры» в стилях шаблона «Protostar» «Менеджере шаблонов».

Источник

Как изменить цвет ссылок 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.

Источник

Поменять цвет ссылки ? Легко !

Здравствуйте, сегодня мы поговорим о том как поменять цвет ссылки на сайтах под управлением движков с открытым для редактирования кодом. К таким CMS относится и WordPress.

Так-же, заодно, мы поменяем цвет ссылки при наведении на нее курсора мыши.

Хотя Вордпресс, да и не только он, предоставляет нам уже практически готовые бесплатные темы, не нуждающиеся в каких-то крупных доработках но, эти темы рассчитаны на массового пользователя. Всегда хочется что-нибудь настроить под свой дизайн, изменить что-то. Что-то добавить, или наоборот убрать. Хотите поменять цвет ссылки? Легко!

Для того, чтобы редактировать стиль ссылки нам нужно из админ-панели сайта зайти в редактор кода. Путь к редактору, если кто не знает такой: Консоль>Внешний вид>Редактор>Таблица стилей (style.css). Для редактирования цвета ссылки нам нужно в таблице стиля (style.css) найти такой участок кода, как показано на скриншоте.

Заходим в таблицу стиля и на клавиатуре набираем команду Сtrl+F и в появившееся в левом углу монитора набираем слово a:hover .
Вот участок кода:

Этот участок кода отвечает за цвет ссылки, цвет ссылки при наведении курсора мыши, подчеркивание ссылки. Где underline отвечает за подчеркивание ссылки, если убрать это слово, то подчеркивание ссылки при наведении курсора мыши исчезнет. А если мы удалим в коде none; и взамен напишем underline, то ссылка станет подчеркнутой всегда.

В a:hover поменять цвет ссылки при наведении курсора можно просто изменив цветовой номер color: #ff0012 ,на нужный нам.

Поменять цвет ссылки вообще, можно изменив цвет в

Ну а если мы хотим установить цвет посещенной ссылки, то можно в этот отрывок кода добавить к селектору А добавить псевдокласс :visited , как показано ниже:

В итоге должно получится как-то так:

Но устанавливать цвет посещенной ссылки я у себя на сайте не стал.

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

Так-же вы можете установить соц. кнопки при помощи кода и узнать как просто ставить блок с прокруткой в любой записи окно с любым текстом, без переноса строки перейдя по ссылкам.

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

Лучший способ отблагодарить автора

Источник

Как изменить цвет ссылок 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-шаблонов и искать нужный элемент и его описание. В очередной раз напоминаю — прежде чем вносить изменения в код, сделайте резерную копию.

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

Источник