Время чтения: 2 мин. 18 августа 2013 в 8:30 Блог веб-разработчика
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

Как настроить 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;
}

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

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

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

Запись на бесплатный урок
Введите ваше имя, телефон и skype логин.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

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

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

Выберите программу

Промокод

Задать свой вопрос
Напишите свой вопрос. Я прочитаю его, и дам ответ в течении 15 минут.

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

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

Сообщение