logo фрилансер / freelance частный специалист г. Москва

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

18 августа 2013 в 8:30 Без категории

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

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

Оставить заявку
На все вопросы отвечают программисты/сеошники/маркетологи, а не секретари или офис-менеджеры. Размещение заявки ни к чему вас не обязывает. Консультация бесплатна.

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

Ваш вопрос:

Рассчитать стоимость бесплатно

Ваш вопрос:

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

There are no products