Usunięcie białego paska i zmiana szerokości strony - WordPress

[robert26011988 0]

Witam serdecznie.

 

Jestem nowy w temacie WordPress’a i potrzebuję pomocy z dwoma tematami.

 

1. Jak wywalić biały pasek na samej górze strony ?

 

2. Jak włączyć wyświetlanie strony na całą szerokość ekranu ?

 

 

Korzystam z motywu ColorMag by ThemeGrill.

 

Strona przy której potrzebuję pomocy: http://mrowkazychlin.c0.pl

[vhp 222]

Nie ma paska. Spoko stronka, nie wiem tylko jak na mobilu, bo nie sprawdzałem.

[209458 867]

Nie ma ale był. Co do szerokości do odpowiada za to maxidth w stylach. Ale jak się to zabierze, to trzeba dodac w zamian jakiś mały margines, dla estetyki. No i posprawdzać wszystkie strony czy się nie rozjechały.

[robert26011988 0]

Nie ma ale był. Co do szerokości do odpowiada za to maxidth w stylach. Ale jak się to zabierze, to trzeba dodac w zamian jakiś mały margines, dla estetyki. No i posprawdzać wszystkie strony czy się nie rozjechały.

 

Zgadza się, problem paska rozwiązany przez zmianę w style.css

 

#header-text-nav-wrap {

padding: 0px;

}

 

A dasz dokładniejsze info na temat zmiany szerokości strony bo w style.css jest kilka pozycji max-width ?

[januzi 24]

firefox: f12 - inspektor - kliknąć kwadracik ze strzałką - kliknąć na centralnej kolumnie i w drzewku powoli przejść w górę, aż trafimy na element mający po boku żółte prostokąty (albo, jeśli kliknąłeś w element z id="main", to w dół); element ten będzie mieć klasę "inner-wrap", w okienku obok będziesz mieć info o linii w pliku i o aktualnych regułkach css; możesz je zmieniać na żywo przed docelową zmianą

[robert26011988 0]

firefox: f12 - inspektor - kliknąć kwadracik ze strzałką - kliknąć na centralnej kolumnie i w drzewku powoli przejść w górę, aż trafimy na element mający po boku żółte prostokąty (albo, jeśli kliknąłeś w element z id="main", to w dół); element ten będzie mieć klasę "inner-wrap", w okienku obok będziesz mieć info o linii w pliku i o aktualnych regułkach css; możesz je zmieniać na żywo przed docelową zmianą

 

Dzięki wielkie 562 linia (wartość inner-wrap) ale jednak zostanę na razie przy domyślnej wartości bo strona się lekko rozjeżdża.

Jak będę miał więcej czasu to ułożę wszystko pod szerszy ekran

[januzi 24]

I jak już wiesz jak się element nazywa, to możesz przeskalować ekran przeglądarki i zobaczyć jakie regułki dla innych rozdzielczości włączają się do działania.

 

Uwaga: mamy @media screen (all, projector, cokolwiek) and (min-width) / (max-width). Min-width odpala się, gdy ekran ma rozdzielczość większą niż podaną. Max-width odpala się, kiedy ekran nie ma więcej niż. Niekiedy min-width nie widać w narzędziach ff (tak było w 62, w wyższych jeszcze nie miałem okazji sprawdzić). Po zmianie rozdzielczości trzeba jeszcze raz kliknąć na element, żeby się odświeżyła informacja o przypisanych stylach.

[robert26011988 0]

Mam jeszcze jeden problem a mianowicie nie wiem jak wyrównać galerie do lewej strony?

Galeria jest realizowana wtyczką NEXTGEN GALLERY.

Może dodatkowym CSS’m ?

 

Kod galerii na stronie wygląda tak:

 

[ngg src=galleries" ids="7" exclusions="83,87" display="basic_slideshow" gallery_width="800" gallery_height="400" arrows="1" transition_speed="250]

[januzi 24]

Znajdź diva, który odpowiada za osadzenie galerii. Przypisz mu odpowiednie style (np. margin-left: 0; albo text-align: left;)

[robert26011988 0]

Znajdź diva, który odpowiada za osadzenie galerii. Przypisz mu odpowiednie style (np. margin-left: 0; albo text-align: left;)

 

Pewnie głupie pytanie ale gdzie szukać ?

[januzi 24]

inspektorem

[robert26011988 0]

inspektorem

 

 

Znalazłem, że odpowiada za to plik "ngg_basic_slideshow.css" ale jak go edytuje to nic się nie zmienia... Za słaby do tego jestem

 

Zawartość pliku:

 

.ngg-slideshow.slick-slider {

margin: 40px auto 50px !important;

overflow: visible;

}

 

.ngg-slideshow .ngg-gallery-slideshow-image {

display: inline-block;

text-align: center;

font: 0/0 a;

}

 

.ngg-slideshow .ngg-gallery-slideshow-image:before {

content: ' ';

display: inline-block;

vertical-align: middle;

height: 100%;

}

 

.ngg-slideshow .ngg-gallery-slideshow-image a {

display: inline !important;

}

 

.ngg-slideshow .ngg-gallery-slideshow-image img {

margin: 0 auto;

display: inline-block !important;

vertical-align: middle;

max-width: 99%!important;

max-height: 98% !important;

}

 

.ngg-slideshow .slick-prev {

left: 20px !important;

z-index: 10 !important;

top: 49%;

cursor: before;

}

 

.ngg-slideshow .slick-next {

right: 30px !important;

z-index: 10 !important;

top: 49%;

cursor: pointer;

}

 

.ngg-slideshow .slick-next:before,

.ngg-slideshow .slick-prev:before {

color: #CCC !important;

font-size: 32px !important;

}

 

.ngg-slideshow .slick-next:hover:before,

.ngg-slideshow .slick-prev:hover:before {

color: #AAA !important;

font-size: 32px !important;

}

 

.ngg-slideshow .slick-dots {

margin: 0;

padding: 0;

bottom: -30px;

}

 

.ngg-slideshow .slick-dots li {

margin: 0;

}

 

.ngg-slideshow .slick-dots li button {

margin: 0;

}

 

.ngg-slideshow .slick-dots li button:before {

font-size: 8px;

color: #888;

opacity: .5;

cursor: pointer;

}

 

.ngg-slideshow .slick-dots li.slick-active button:before {

opacity: 1;

color: #555;

}

 

.slideshowlink {

margin: -34px auto 50px;

text-align: center;

text-transform: uppercase;

}

 

.slideshowlink a {

font-size: 13px;

letter-spacing: .75px;

cursor: pointer;

text-decoration: none;

box-shadow: none;

border: none;

}

 

.slideshowlink a:hover {

text-decoration: none !important;

box-shadow: none !important;

border: none !important;

}

 

@media (max-width: 600px) {

.ngg-slideshow .ngg-gallery-slideshow-image {

height: 400px !important;

}

}

 

@media (max-width: 450px) {

.ngg-slideshow .ngg-gallery-slideshow-image {

height: 300px !important;

}

 

}

[Kpc21 1]

Takie rzeczy w WordPressie powinno się w zasadzie robić motywami potomnymi, żeby nie było, że przy update'cie motywu głównego zmiany, które wprowadziłeś, zostaną nadpisane.

[robert26011988 0]

Takie rzeczy w WordPressie powinno się w zasadzie robić motywami potomnymi, żeby nie było, że przy update'cie motywu głównego zmiany, które wprowadziłeś, zostaną nadpisane.

A podpowiesz coś konkretnie ?

Dodatkowy CSS w NextGen Gallery ?

Tylko nie mam pojęcia jak powinien wyglądać taki kod CSS ?

[januzi 24]

Szablon może mieć podpięty np. custom.css (im niżej plik css w kodzie strony, tym bardziej przesłania resztę). Jeśli tak jest, to w nim możesz wrzucić regułki zasłaniające to, co idzie z NGG. Poza tym wtyczki mają ?v=4.9.8 albo teraz ?v=5.0.x. Dlatego przeglądarka nie odświeża (ctrl+f5 dla wymuszenia).

[robert26011988 0]

Poniższy kod w dodatkowym CSS rozwiązuje problem

 

#primary .ngg-slideshow.slick-slider {

margin: 40px 0 50px 0 !important;

overflow: visible;

}