Element style где искать

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

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

Здравствуйте
Столкнулся с проблемой — при просмотре страницы Firebag он показывает что часть свойств элементам на странице задается через element.style , но что это за чудо такое и где лежит, к сожалению не до конца понятно, интернет тоже молчит.
Единственное чем удается перекрывать данные свойства — это выставлением нужных свойств в CSS файлах с обязательным прописыванием Important!

Понимаю, что это не рещение проблемы а лишь заплатка поэтому прошу помощи.

  • Drupal 6
  • Есть вопрос
  • Блог
  • Войдите или зарегистрируйтесь, чтобы отправлять комментарии

Комментарии

Улыбнуло!

С одной стороны все верно прописывать в стилях с импортантом, но с другой, нужно смотреть, не используется ли там аякс, который динамически меняет этот стиль (например, как в views slideshow и т.п.).

Доходчиво?

тоже порой гемор с этим. А как выявить, в каком конкретно файле (файле шаблона, модуля или еще каком) задается установка этого стиля?

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

Опять же можно выявить по html и css, который виден в firebug

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

Смотря какой модуль. Помню юзал модуль rotator, там как раз была такая проблема. Думал хакнуть, а отказался от него и стал использовать view_rotator, а там сделал темизацию, вырезав все лишнее. В общем копайте модуль, если не хотите перекрывать, а потом еще и еще раз перекрывать стили.

Спасибо, стал догонять потихоньку.
Задача моя была следующая — выводил ноду через Iframe Lightbox2 и пытался определить как изменить размеры окна. И именно в element.style выводились размеры окна.
Единственный вариант изменения размеров окна в ССК файле к стилям значения !Important.

И еще вопрос почему если я в CCK файле для Lightbox2 ставлю скрыть Шапку (#header) у меня она и на сайте исчезает?

Описался не ССK а СSS

Спасибо, стал догонять потихоньку.
Задача моя была следующая — выводил ноду через Iframe Lightbox2 и пытался определить как изменить размеры окна. И именно в element.style выводились размеры окна.
Единственный вариант изменения размеров окна в CSS файле, применение к стилям значения !Important.
И еще вопрос почему если я в CSS файле для Lightbox2 ставлю скрыть Шапку (#header) у меня она и на сайте исчезает?

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

И еще вопрос почему если я в CSS файле для Lightbox2 ставлю скрыть Шапку (#header) у меня она и на сайте исчезает?

Потому-что #header, т. е. div прописан в файле page.tpl.php темы оформления.

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

Я имел вв иду, почему CSS файлы которые должны имзменять вид только для Lightbox, т.е. только при его выводе, воздействуют и на остальные страницы сайта. Я хотел чтобы Header не выводился только для окна lightbox. Для меня правка темы в tpl файлах пока сложновата,так что пытаюсь выкручиваться через CSS.

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

Потому что там, возможно, присваивается оному div не один класс, а несколько. Если перекрывать стили используя только первый класс из присвоенных div’у, то он может затрагивать и другие слои с одноименными классами.

А откуда в окне Lightbox div с id header? Вот сейчас как раз в очередной раз кручу этот модуль и не вижу в его html-коде ничего подобного.

Всем привет!
Вобщем ситуация такая, скачал зануленный движок dle 8.5 (каюсь), в котром имеется такой вот код:

стили не нашел где прописаны, но Opera Dragonfly показывает:

element.style <
display: none;
>

Соответственно ссылка на тот сайт (компофис) индексируется поисковиками, чего я не хочу.
Проанализировал тот сайт на pr-cy и понял, что ТИЦ 100 наращен именно таким способом (ссылка встраивалась в обнуленные движки со скрытым атрибутом? и на этих движках делаются сайты)

Как я только ни пытался найти этот код, но не нашел тот файл где он прописан. Давайте выясним вместе как исправить эту проблему. Гуглил везде где можно, но ни кого эта проблема не волновала похоже т.к. ответа не нашел. Спасибо за помощь.

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

Igorrok добавил 29.06.2010 в 01:30
А где он? в каком файле php прописан?
Это зависит в каком месте он выводится, если в новости, то это где-то engine/modules/show.full.php и т.д.

Попробуйте поискать адрес сайта средствами файлового менеджера во всех файлах скрипта

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

Оцените статью
Много толка
Добавить комментарий