Поиск требуемых CSS стилей

Дата публикации:Июнь 6, 2011

В этой статье мы немного отойдем от рассмотрения WordPress тем и коснемся поиска необходимых CSS стилей. Очень часто можно столкнуться с тем, что вам требуется изменить некоторые части шаблона или разметки. К примеру, вы хотите убрать границу между сайдбаром и остальной частью страницы. Как найти стили, отвечающие за описание границы?
В этом случае вам придется включить внимательность. Вы знаете, что вам требуется сделать, но не представляете себе, как найти нужное стилевое правило, отвечающее за лишнюю границу.
Самое простое решение — тщательно исследовать исходный код страницы веб-сайта. Сделать это можно следующим способом: открываем свой браузер и выбираем в нем настройку VIEW > PAGE SOURCE (или VIEW > SOURCE). Для активации поиска используйте сочетание клавиш Ctrl+F. Теперь у вас возникнет вопрос: что искать? Раз граница находится у сайдбара, значит, нам нужно найти его идентификатор. Для этого достаточно взять любой заголовок, который находится в сайдбаре. Этот заголовок мы и будем искать.
Введите заголовок в строку поиска и нажмите «Find». Если вы не использовали эту фразу в своих записях, то первое же ее вхождение укажет вам на сайдбар. В противном случае вам нужно будет еще раз щелкнуть по кнопке «Find». Делайте это до тех пор, пока не отыщите требуемую фразу в необходимой области.
Если вы используете Internet Explorer, то вы можете воспользоваться специальным инструментом — Internet Explorer Developer Toolbar, который позволит вам визуально увидеть и выбрать элементы, идентификаторы и классы на странице. Все элементы выводятся в иерархической структуре. Вы всегда можете скачать Internet Explorer Developer Toolbar со страницы Microsoft.
Как только вы найдете требуемую фразу, вам останется лишь отыскать в коде слова, связанные с сайдбаром — sidebar, menu или sidecolumn:

<div id="sidebar">
или
<div class="sidebar">

В примере приведена секция, отвечающая за сайдбар. Теперь нам необходимо открыть файл style.css и отыскать в нем правила следующего вида:

#sidebar
или
.sidebar

Изучите стили, заданные в этих CSS селекторах, и посмотрите, нет ли среди них упоминаний границы. Обычно стили, отвечающие за представление сайдбара, выглядят следующим образом:

#sidebar {position: relative; float: right; width: 170px;
    color: blue; font-size: 90%; border-right: solid 1px blue; } 

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

Источник: http://codex.wordpress.org/Finding_Your_CSS_Styles

Поделиться

4 комментария

  1. Илья says:

    Доброго времени суток. У меня следующий вопрос: хочется расширить саму тему WP, т.е. сделать немного шире (не что то одно, а все вместе), а то текст выглядит узким на фоне двух сайдбаров слева и справа. Я так понял это тоже в CSS делается. Если есть возможность, подскажи решение проблемы. Где хотя бы искать и что в CSS менять, и как вообще попасть в редактор CSS (не с помощью ли кнопки "исходный код"?))

    Пасиб.

  2. Architect Of Ruin says:

    Сначала отвечу с конца — попасть в редактор можно именно через кнопку "Исходный код") Но я предпочитаю работать непосредственно с файлами через текстовый редактор Notepad++, у которого есть подсветка кода. Так удобнее разбираться. Правда для этого необходим доступ к файлам через FTP.

    Если есть желание расширить тему, то лучше найти подходящую тему, которая бы уже имела достаточный размер. Просто так взять и расширить обычно очень трудно, потому что поменяв одно значение в CSS, потом может сбиться что-то другое, и тогда вообще весь сайт перекосит. Хорошо, если область контента задана в процентах, тогда еще можно их подкорректировать, но в таком случае придется менять проценты и для сайдбаров, чтобы в сумме все составляло 100%. Бывает еще, что область контента фиксирована, но здесь тоже могут возникнуть проблемы с изменением значений. Ручная подгонка всех цифр — это обычно такой геморрой, что лучше сразу от этого всего отказаться, особенно если нет в наличи свободного времени и желания. Проще доверить каким-нибудь фрилансерам, пусть сами парятся по этому поводу за каких-то триста рублей.

    Подведу итоги: все зависит от самой темы. Если текст выглядит узким на фоне двух сайдбаров, то лучше найти тему с одним сайдбаром. Это гораздо проще, чем разбираться в дебрях кода. Неизвестно, как прописаны значения, фиксирована ширина у этого шаблона или задана как плавающая. В любом случае, если хочется поэкспериментировать, то лучше делать это на локальном сервере — в онлайн режиме проверять такое я бы не советовал, потому что если посетители зайдут на ресурс и увидят там перекошенную тему, то они уже вряд ли вернутся. И никаких объяснений по поводу экспериментов с темой слушать не захотят)

  3. Илья says:

    Мне нужно 2 сайтабара, в этом вся проблема. Я замучился искать подходящую тему под сайт. Тема, что ща стоит вроде норм, но есть свои минусы и один из них — узкость текста.) В любом случае спасибо, теперь не буду париться с тем, что бы самому расширить, раз это проблематично…

  4. Как только появился Яндекс браузер с элементами для разработчика, поиск и замена стала сущим пустяком. Теперь можно отыскать нужный элемент и прямо в браузере заменить стили и посмотреть что меняется!

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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