Skalowanie banera i okien wideo na urządzeniach mobilnych

[Goose]

Witajcie!

Założyłem forum phpbb 3.1.9 z adresem: http://kandyzowani.pl/
Korzystam z motywu Prosilver SE.
Dodałem baner - fragment kodu:

Kod: Zaznacz cały

.headerbar {
	background-image: url("./images/ban.jpg");
    height: 150px;
}

Druga sprawa to wyświetlanie okien wideo.
Zaaplikowałem ten BBCode: https://www.phpbb.com/customise/db/bbcode/video/

Kod: Zaznacz cały

<div class='bbvideo' data-url='{URL}' style='width: 640px; height: 390px; margin: 2px 0; display: inline-block; background: #000; color: #fff; overflow: hidden; vertical-align: bottom;'><div style='height: 100%;'><script>if (typeof bbmedia == 'undefined') { bbmedia = true; var e = document.createElement('script'); e.async = true; e.src = 'bbmedia.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s); }</script></div><div style='text-align: right; height: 14px; margin-top: -14px; padding-right: 2px; font: 10px/10px Verdana; color: #555;'><a style='color: #105289; text-decoration: none;' href='http://phpbbex.com/' target='_blank'>phpBB</a> &#91;video&#93;</div></div>

Wypróbowałem chyba wszystkie znalezione w sieci sposoby, które użytkownicy polecają do skalowania banera i wciąż nie daję rady tego ruszyć.
Baner nie skaluje się na mniejszych ekranach/rozdzielczościach.
Wideo to tak przy okazji

Może doradzicie, jak ten orzech rozgryźć, bo już straciłem nadzieję i jedyne co pozostaje, to wyłączyć zupełnie "responsive".

[Zyleta]

Pozwoliłem sobie usunąć link do Twojej strony, ze względu na to że jesteś tu nowy, żeby nie uznać tego za reklamę W przyszłości może nie będę na to zwracał uwagi.

Odnośnie problemu, dodaj do .headerbaru to:
background-size: 100% 100%;

będzie to wyglądało tak:

Kod: Zaznacz cały

.headerbar {
    background-image: url("./images/ban.jpg");
    background-size: 100% 100%;
    height: 150px;
}

Jeśli będzie Ci przeszkadzało, że baner będzie zniekształcony, to byś musiał dodać w pliku responsive.css .headerbar i wartość height ustawić na nieco mniejszą (już wedle uznania).

Odnośnie bbcode'u, polecałbym zmienić style='width: 640px; height: 390px; na

Kod: Zaznacz cały

style='max-width: 640px; max-height: 390px; width: 100%;

tylko pewny nie jestem czy to dobrze zadziała

[Goose]

Nie chciałem robić reklamy, chodziło mi tylko o ukazanie banera i jak wygląda np. na smartfonach. No ale rozumiem o co chodzi.

Zyleta, jesteś wielki!
Różne możliwości testowałem i żaden sposób nie podziałał, a tu najprostsze metody najlepsze
Chociaż to skalowanie w pewnym momencie "gubi" proporcje. Najlepiej można to zaobserwować w momencie płynnej zmiany szerokości przeglądarki na komputerze.
Jako że nie znam lepszego sposobu na skalowanie, to i tak muszę przyznać, że jest rewelacja

W pliku responsive.css wkleiłem tutaj:

Kod: Zaznacz cały

/* Common block wrappers
----------------------------------------*/
.headerbar {
    height: 60px;
}     

.headerbar, .navbar, .forabg, .forumbg, .post, .panel {
	border-radius: 0;
	margin-left: -5px;
	margin-right: -5px;
}

#cp-main .forabg, #cp-main .forumdb, #cp-main .post, #cp-main .panel {
	border-radius: 7px;
}

Próbuję zmienić BBCode, ale mam komunikat:

ModSecurity zablokował zapytanie ze wzgledów bezpieczeństwa.

Jeżeli strona wymaga tego typu zapytań, to proszę wyłączyć ModSecurity w panelu DirectAdmin, opcja "ustawienia mod_security".

ps.
Już zmienione.
Wideo też działa! Coś pięknego
Wielkie dzięki, Zyleta, za bezcenną pomoc.

Jakbyś jeszcze mógł coś zasugerować odnośnie proporcji skalowania banera, czy jest na to jakiś sposób?

[Zyleta]

Bardzo dobrze że wstawiłeś link do forum, dzięki temu miałem dostęp do strony i mogłem metodą prób i błędów ustawić odpowiednie parametry, żeby wyszło zgodnie z Twoimi oczekiwaniami (a przynajmniej najbardziej zbliżone do Twoich oczekiwań).
Po prostu poinformowałem o usunięciu tego linku, bo często rejestrują się tu osoby tylko po to by zareklamować jakąś stronę i piszą jakieś "wyimaginowane" problemy (albo posty z treścią, która nie trzyma się kupy wraz z linkiem do strony) i tyle byli widoczni. Śmiało możesz wrzucać link do forum, gdy piszesz o tym że masz problem, gdyż to bardzo pomaga w jego rozwiązaniu. Ja ze względu właśnie na te konta spamujące i reklamujące, dla bezpieczeństwa, pozwoliłem sobie usunąć ten link, bo samą stronę mam zapamiętaną już (w historii przeglądania), bo nie byłem do końca pewny czy to jeden z takich przypadków.
Ale już przywróciłem link do Twojej strony, bo może, jak to nie będzie działać, ktoś inny pomoże

Jedyny sposób, jaki mi do głowy przychodzi, to ustawienie go nie jako tła obrazkowego, tylko jako obrazka (czyli nie jako background-image w css, lecz jako <img> w pliku overall_header). I wtedy dla tego obrazka ustawić szerokość 100%.

Usuwasz to co wpisałeś wyżej nie zapomnij o pliku responsive.css - jak była klasa .headerbar jeszcze gdzieś określona, to upewnij się że posiada odpowiednie wartości (tj. jakiś padding, margin i inne, jeśli tylko uznasz to za konieczne. Najważniejsze by nie miał określonej wysokości i nie było wstawione żadne tło obrazkowe) i nie może mieć określonej wysokości, bo wtedy zrobią Ci się wolne przestrzenie, albo obrazek będzie najerzdżał na inne elementy strony
zaraz za otwarciem div'a z klasą headerbar (tam gdzie wtedy miałeś obrazek), wewnątrz jego wstawiasz

Kod: Zaznacz cały

<img src="TU_LINK_DO_OBRAZKA">

w miejsce TU_LINK_DO_OBRAZKA oczywiście wstawiasz link. Ja nigdy nie pamiętam, jak to szło, ale wydaje mi się, że będzie to {T_THEME_PATH}/images/ban.jpg w Twoim przypadku, jak nie, to w każdym razie popatrz jak jakieś inne obrazki są wstawiane w phpBB i w podobny sposób to wykonaj.
Stwórz klasę (teraz już w pliku *.css (najlepiej tam gdzie miałeś wcześniej .headerbar) .headerbar img i umieść w niej widht:100%; - tym sposobem, obrazek zawsze będzie miał maksymalną szerokość i będzie się skalował proporcjonalnie.
Jeśli pojawią się jakieś większe odstępy, upewnij się, że klasa .headerbar nie ma określonej nigdzie wysokości.

Wydaje mi się, że jest to jedyny sposób na zachowanie proporcji obrazka z zachowaniem jego całości, gdyż umieszczając go jako tło obrazkowe, element którego jest tłem musi posiadać określoną wysokość, a tę jest ciężko podać dla elementów, które mają mieć zmienną wysokość w zależności od rozdzielczości (a przynajmniej ja bym miał z tym problem), bo nie znam innego sposobu jak wpisywanie ręczne dla każdej rozdzielczości, a więc tego kodu byłoby strasznie dużo i zawsze można ominąć jakąś i o tym nie wiedzieć (dopóki ktoś nie zgłosi że jest taki błąd, o ile zauważy i/lub zorientuje się że tak być nie powinno).

[Goose]

Dzięki Zyleta, za poświęcony czas.

Wieczorem przy tym usiądę i dam znać, jak mi idzie, bo w tej chwili obowiązki mnie odrywają od monitora
Tak tylko dla pewności...
Jak dobrze zrozumiałem, w pliku overall_header.html tworzę coś takiego:

Kod: Zaznacz cały

<div class="headerbar"><img src="{T_THEME_PATH}/images/ban.jpg">

następnie w pliku colours.css dopisuję:

Kod: Zaznacz cały

.headerbar img {
	width: 100%;

W pliku responsive.css znalazłem tylko dwa wpisy odnośnie headerbar:

Kod: Zaznacz cały

/* Common block wrappers
----------------------------------------*/
.headerbar, .navbar, .forabg, .forumbg, .post, .panel {
	border-radius: 0;
	margin-left: -5px;
	margin-right: -5px;
}

#cp-main .forabg, #cp-main .forumdb, #cp-main .post, #cp-main .panel {
	border-radius: 7px;
}

oraz

Kod: Zaznacz cały

/* Navigation
----------------------------------------*/
.headerbar + .navbar {
	margin-top: -5px;
}

Będę z tym walczył wieczorem, bo nie ukrywam, że fajnie by było doprowadzić tę część forum do ideału

Pozdrawiam.

[Zyleta]

Nie do końca dobrze zrozumiałeś

U siebie masz już coś takiego:

Kod: Zaznacz cały

<div onclick="location.href='http://kandyzowani.pl';" style="cursor:pointer;" class="headerbar">

(Może się różnić znacznie od tego co masz bezpośrednio w kodzie - tak działa sprawdzanie kodu w przeglądarce).
W każdym razie, masz już div, który posiada klasę headerbar - tego nie zmieniasz, zostawiasz jak jest.

Zaraz pod tą częścią umieszczasz:

Kod: Zaznacz cały

<img src="TU_LINK_DO_OBRAZKA" />

To jest jedyna zmiana którą robisz w pliku *.html (najprawdopodobniej overall_header.html)

Potem wchodzisz do plików *.css (w których poprzednio robiłeś zmiany)
i robisz, jak napisałeś

Kod: Zaznacz cały

.headerbar img {
   width: 100%;

A wcześniej pisałeś, że w pliku responsive.css wpisałeś

Kod: Zaznacz cały

.headerbar {
    height: 60px;
}

Teraz powinieneś to usunąć - wysokość dopasuje się do wysokości obrazka

Musisz jeszcze usunąć z plików *.css wartość wysokości dla headerbar'u (podobnie jak to wyżej dla responsive) oraz oczywiście usunąć co wcześniej sugerowałem, czyli kod odpowiadający za tło obrazkowe i jego rozmiar

Kod: Zaznacz cały

.headerbar {
    background-image: url("./images/ban.jpg");
    background-size: 100% 100%;
    height: 150px;
}

Następnie, możesz wedle uznania, ustawić marginesy odpowiednie, aby nie było zbyt dużych, bądź za małych przerw

[Goose]

Przyznam, iż nie wierzyłem, że ktoś będzie mi w stanie tutaj pomóc... a tu proszę, taka miła niespodzianka
Baner pięknie się skaluje zachowując proporcje! Super!

Jeszcze tylko nie wiem, dlaczego border-radius przestał funkcjonować i rogi banera są ostre...

Fragment odpowiedzialny za narożniki w pliku common.css:

Kod: Zaznacz cały

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: transparent none repeat-x 0 0;
	margin-bottom: 2px;
	padding: 0px;
	border-radius: 7px;
}

I taki już naprawdę szczegół - wiesz może gdzie mógłbym zmienić tę odległość lub datę z godziną wypośrodkować w pionie,
bo w tej chwili nieładnie to wygląda.
Nie jestem pewny, czy tak już było, czy odległość się zmieniła po zmianie parametrów banera.



ps.
Już sobie z narożnikami poradziłem
W pliku colours.css dodałem:

Kod: Zaznacz cały

.headerbar img {
	width: 100%;
   border-radius: 7px;
}

[Zyleta]

Widzę, że już sobie poradziłeś, przynajmniej ja widzę zaokrąglone rogi bannera (ale wypadałoby wyłączyć border-radius dla wyglądu mobilnego - wystarczy zastosować border-radius: none; - wtedy będzie lepiej pasować do reszty. Zrobisz to w pliku responsive.css).

Również widzę, że i datę przesunąłeś niżej, więc i tym razem chyba komentarz jest zbędny

[Goose]

Napisałem ps w poprzednim poście, że udało mi się zaokrąglić rogi, ale edytowany post czeka jeszcze na akceptację.

Z datą i godziną nie poradziłem sobie. Na Operze, Firefoxie i w smartfonie wciąż datę i godzinę mam tuż pod górną belką nawigacyjną.
U Ciebie, Zyleta, w przeglądarce jest wyśrodkowany?

[Zyleta]

Nom, tak, może nie idealnie wyśrodkowane, ale nie jest zaraz pod:

A korzystam z Google Chrome.
Nawet jak sobie przybliżam, to wydaje się być ciut niżej od środka.

Ogólnie, nie mam pomysłu na to, czemu Tobie się wyświetla inaczej niż mnie. Możesz zobaczyć z różnymi marginesami daty, ogłoszeń i listy forum

[Goose]

Masz rację, tak jest dopóki nie zamkniesz okna z komunikatem nad datą i godziną. Gdy tylko zamkniemy komunikat, data wędruje pod górną belkę nawigacyjną.
Tylko myślę, że dam sobie z tym spokój, bo gdy się przyjrzałem na kilku stronach forum:

1. http://kandyzowani.pl/faq.php



2. http://kandyzowani.pl/ucp.php?mode=register



3. http://kandyzowani.pl/memberlist.php?mode=contactadmin



Na stronie FAQ treść "Często zadawane pytania" jest tuż nad dolnym oknem. Na stronie Rejestracja okienko z wyborem języka jest pod górną belką nawigacyjną, a na stronie kontaktowej treść "Kontakt z adminem" jest wyśrodkowany.
Także mówiąc krótko jest spory bałagan i chyba musiałbym wiele plików zmieniać, żeby te elementy doprowadzić do ładu.
Najważniejszy problem udało się naprawić (baner i okienka wideo), także jest dobrze i nie ma co się przejmować drobiazgami

ps.
Brak okrągłych narożników okien na mobilnym widoku faktycznie lepiej wygląda.

Jeszcze raz wielkie dzięki za poświęcony czas i cierpliwość

Pozdrawiam.