Zmiana obramowania ramki w NextGEN Gallery by Photocrati

Dla specjalistów Webmastering
#1

Witajcie,czy można zmienić obramowanie zdjęcia w NextGEN Gallery by Photocrati? Jest to wtyczka do wordpresu miedzy innymi. 

 

http://wordpress.org/plugins/nextgen-gallery/

 

 

#2

Można, obramowanie jest w css’ie wykonane.

nextgen_basic_thumbnails.css

Domyślny wygląd:

Wiersz 31

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

Po najechaniu:

Wiersz 40

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

Wielkie dzięki  manieKMP za pomoc. Pozdrawiam gorąco.

#4

Tak przy okazji (domyśliłem się do jakiej strony chcesz wprowadzić zmiany… ;)), jeśli nie chcesz by obramowanie zmieniało kolor po najechaniu, możesz usunąć kod odpowiedzialny za hover , ewentualnie objąć go komentarzem - otwierający /*, zamykający */ - dla zachowania go na przyszłość. Stan/efekt ten - jak i innych, np. active , czy focus - jest “wymuszany” i jego brak w kodzie css powoduje przyjmowanie wartości określonych w “głównym” elemencie, czyli w tym wypadku wartości nadanych dla “.ngg-gallery-thumbnail img” (z wiersza 31).

Swoją drogą, jak już jesteśmy przy zmianach css’a w dodatkach do wp (co w zasadzie tyczy się jego każdej, przede wszystkim dodanej części, co wyjaśnię dalej), dobrze byłoby rozważyć utworzenie specjalnego pliku css z wprowadzanymi zmianami w cms’ie, w szczególności jeśli chodzi o zastosowany szablon i dodatki/wtyczki. Taki dodatkowy plik css uchroni Ciebie przed utratą i ponownym wprowadzaniem zmian przy możliwych aktualizacjach do nowszych wersji (zmienione teraz pliki css, przy update’ach z pewnością będą nadpisywane).

Jak mogłoby to wyglądać na powyższym kodzie ze zmianą “ramki” thumbsa (nie ruszając pliku wtyczki):

  1. Tworzysz plik css, np. o nazwie zmiany.css

  2. W nim umieszczasz rzeczy, które mają być zmienione dopisując dyrektywę !important na końcu każdej zmienionej wartości:

    .ngg-gallery-thumbnail img {
    background-color: #D2B767 !important;
    border: 1px solid #D2B767 !important;
    }
    .ngg-gallery-thumbnail img:hover {
    background-color: #D2B767 !important;
    }

  3. Dodajesz do sekcji “head” swój nowy plik css (najlepiej byłoby go podpiąć i umieścić do wp, nie pod templatkę):

Tym sposobem, jeśli dojdzie do aktualizacji zmienionych elementów dodatków, szablonu itp., nie zostaną one utracone i przy braku aktualizacji samego cms’a, nie znikną ze strony (przy update’cie wp, będzie najprawdopodobniej wymagane powtórzenie kroku 3-go, czyli ponowna “podpinka” pliku).