logo частный маркетолог Москва
logo частный маркетолог Москва

Как настроить Nextgen Gallery

18 августа 2013 в 8:30 Блог веб-разработчика
Хотите я произведу настройку как описано в статье вместо вас? Стоимость работы: 500 руб. Срок исполнения: 1 час. Работаю без предоплаты.

Как настроить Nextgen Gallery

Приветствую всех читающих. В данном уроке мы рассмотрим следующий вопрос: как настроить Nextgen Gallery. А точнее, это будет урок тонкой настройки плагина Nextgen Gallery 

Я дам ответ на следующие вопросы:

  1. как убрать рамку вокруг картинки nextgen gallery
  2. как изменить цвет рамки вокруг картинки в nextgen gallery
  3. как изменить толщину рамки вокруг картинки в nextgen gallery (уменьшить или увеличить)
Я долго копался в css файлах самого плагина. Как оказалось потом, этого делать не нужно было. Для изменения всех этих параметров, заходим через админку в настройки плагина. И нажимаем кнопку Стили (как показано на картинке)
Затем нас перебрасывает в меню, где все и меняется.

Теперь воспользуемся поиском. Найти нужно фразу:

[php].ngg-gallery-thumbnail img {[/php]

Данный блок и нужно изменять.

[php]

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #A9A9A9;
display:block;
margin:4px 0px 4px 5px;
padding:4px;
position:relative;

[/php]

Теперь опишу что нужно изменить.

  1. Что бы убрать рамку вообще, ставите padding:0px; 
  2. border:1px solid #A9A9A9; — цвет ободка вокруг фото. По умолчанию цвет серый.
  3. padding:4px; -толщина бортика рамки. По умолчанию стоит 4px;

А чуть ниже находиться строка

[php]
.ngg-gallery-thumbnail img:hover {
background-color: #A9A9A9;
[/php]

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

Подведем итоги. Цвета в коде и на картинке соответствуют.

border:1px solid #72a200; — зеленая обводка вокруг картинки

padding:1px; — розовый цвет толщина ЗЕЛЕНОЙ  рамки

background-color: #000000; — черный цвет — обводка внутри зеленой обводки.

.ngg-gallery-thumbnail img {
background-color:#FFFFFF;
border:1px solid #72a200;
display:block;
margin:4px 0px 4px 5px;
padding:1px;
position:relative;
}

.ngg-gallery-thumbnail img:hover {
background-color: #000000;
}

Похожие статьи

Оставить заявку
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите контактный E-mail: *

Ваш вопрос:

Пожалуйста, докажите, что вы человек, выбрав дерево.

Рассчитать стоимость
Для экономии вашего времени на все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Прикрепить файл:

Ваш вопрос:

Введите контактный E-mail: *

Заказать обратный звонок
Для экономии вашего времени на все звонки отвечают программисты, а не секретари или офис-менеджеры. Вы сразу получите квалифицированный ответ на большинство технических вопросов. Работаем ежедневно, с 9.00 до 23.00 МСК.

Введите ваше имя *

Как с вами связаться? *

Введите контактный телефон *

Корзина пуста