Новая жизнь. Web-студия Татьяны Самойловой.

Custom Community. Как изменить дизайн слайдера?

Опубликовано Дек 2, 2010 в Блог, Сайты "под ключ". SEO, SMO,SMM


Custom Community. How to change the design of the slide-show?

Замечательная тема BuddyPress Custom Community. Замечательна она многим, в том числе  и тем, что в админке легко перенастраивается стиль темы, а также можно вставлять логотипы, менять шапку,  а с помощью виджетов творить любую структуру. Более того, в админку встроена функция управления темой Theme Setting, с помощью которой подключаются/отключаются многие коммуникативные настройки темы, легко настраиваются цвета любых элементов и ещё всякие тому подобные чудеса. Да к тому же в тему изначально встроена возможность подключения (или отключения) слайд-шоу на главной.  А это мало того, что  весьма популярный нынче элемент дизайна,  дак им ещё и можно управлять. Всё было бы хорошо, если бы не одна  маленькая деталь: слайдер поставляется строго упакованным по колористике — серое с ещё более серым.  Вот так:

Мне это было сильно не по душе. Как-то не вписывался  этот колористический ряд в мой концепт. Надо было что-то делать…

А что делать такой первоклашке, как я?

Что делать, что делать? Правильно: хвататься за учебники  и «курить мануалы». Накурившись мануалов от души, я полезла в CSS-код. Найти его просто: в админке, в разделе «Внешний вид» выбираем рубрику «Редактор» и попадаем в этот самый редактор. Волшебный, надо сказать,  редактор,  но тем, кто пренебрёг курением мануалов, он мало чем поможет. (это я тонко так намекаю на то, что лучше все же понимать, что вы делаете, прежде чем делать ;)). Но я отвелеклась и больше этого делать не буду.

Зашли вы стало быть в Редактор. Там найдите запись Список стилей (style.css), кликайте на неё, в окошке редактирования появится огромная простыня css- кодов. Всю простыню читать не надо, с ума сойдёте. Смело скроллите в самый конец простынки. Там чуток вверх и найдёте запись «/* =Slider». Если найти оказалось трудно, то жмите Ctrl-F и в окне поиска наберите: «/* =Slider», вам эту запись поиск подсветит.  Вот в абзаце ниже этой записи и надо произвести изменения цветов слайдера.

Цвета, нужные мне, я подбирала в той  же чудесной Theme Setting, там это делается очень легко. Полученный код цвета вставляла в соответствующие позиции css-кода слайдера.

К примеру,

«background-color:#f1f1f1;» (цвет фона слайдера)

был заменён на нужный мне

«background-color:#f5faf9;».

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

Меня это огорчало. 🙁

Тогда я нашла в css-коде слайдера запись

«background: url(‘images/slideshow/transparent-bg.png‘);»

Было понятно, что собака порылась именно  в этой записи. Не мешкая, я вывела этот цвет отсюда     http://startnewlife.ru/wp-content/themes/custom-community/images/slideshow/transparent-bg.png

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

И вновь не замешкавшись,  я заменила этот грязный  пиксель на симпатичный пиксель, требуемого  мне цвета  207e67.

Затем сохранила все произведённые изменения, нажав на кнопочку  «Обновить файл».

И получила вот это:

УРА-УРА-УРА! — радостно потрясла  я эфир именно этой кричалкой и тут же побежала пить пиво. 🙂

Читатели рекомендуют прочесть:



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

Присоединяйтесь к беседе и оставляйте комментарий.

  1. Alex

    http://www.wmkopilka.ru/index.php вот интересная копилка

  2. Tatiana

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

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