Настройка CSS для лайтбоксов «Swipebox»

Я использую Awesome Flickr Gallery , плагин для показа галерей Flickr на веб-сайте; он использует «Swipebox» для отображения отдельных изображений на лайтбокс.

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

<div id="swipebox-top-bar" class="visible-bars"> соответствующие элементы в Chrome, я понимаю, что эти элементы <div id="swipebox-top-bar" class="visible-bars"> и <div id="swipebox-bottom-bar" class="visible-bars">

Это мой пользовательский код:

 #swipebox-top-bar, #swipebox-bottom-bar { font-family: Montserrat,Helvetica,Arial,sans-serif !important; text-transform: uppercase !important; font-weight: bold !important; text-shadow: 1px 1px 1px #000 !important; background: #A01921 !important; opacity: .80 !important; } 

Я пробовал различные комбинации, а не только показанный #swipebox-bottom-bar, #swipebox-top-bar , но также div#swipebox-bottom-bar, div#swipebox-top-bar , div#swipebox-bottom-bar.visible-bars, div#swipebox-top-bar.visible-bars , visible-bars , но ничего не работает.

Как я могу успешно настроить эти элементы?

Solutions Collecting From Web of "Настройка CSS для лайтбоксов «Swipebox»"

Хотелось бы, чтобы я задал эти вопросы с помощью комментария, но мне нужно 50 репутации, чтобы сделать это …

Но так или иначе, вы проверили элементы после применения CSS, чтобы увидеть, действительно ли он загружается и применяется? Во-вторых, вы проверили, будут ли они перезаписываться существующим CSS, если он действительно применяется?