PDA

Zobacz pełną wersję : Edycja szablonów joomla.



Djef
12-09-2013, 12:38
Witam.
Przerabiam/modyfikuję szablon joomla. Potrzebuję zmienić kolor tła pod artykułami i tym podobnymi rzeczami. Niestety, ale to nie wygląda dobrze:
6981


Czy ktoś jest mi w stanie podpowiedzieć, jak szukać odpowiedniego fragmentu w kodzie?
Niestety jedyny sposób jaki przychodzi mi do głowy, to zmieniać po kolei każdy kolor z białego na inny i sprawdzać jaki jest rezultat... ale to jest potwornie czsochłonne :/

Z góry dzięki za pomoc.

AndiC
12-09-2013, 12:49
Masz zainstalowaną przeglądarkę Google Chrome ??
Jeśli nie, to zainstaluj. Następnie otwórz tę stronę.
I teraz, jeśli klikniesz prawym myszy na interesującym Ciebie fragmencie strony i wybierzesz "Zbadaj element" oczom Twoim ukaże się szereg informacji.
W zasadzie wszystkie są intuicyjne.

Edit, link dla leniwych (http://www.altcontroldelete.pl/artykuly/webmaster-narzedzia-dla-programistow-w-chrome/)

pkosela
12-09-2013, 12:51
Podobnie w Operze i Firefoxie - prawoklik i "Zbadaj element"

AndiC
12-09-2013, 12:55
Nowa Opera ma teraz identyczne narzędzie, natomiast Firefox, moim zdaniem nie jest już taki intuicyjny.

Djef
12-09-2013, 13:26
Kurcze nie ogarniam.
Czy to nie jest tak, że przeglądarka generuje kod wybranego elementu?
Ja potrzebuję znaleźć plik, a raczej miejsce w pliku, gdzie znajduje się linijka kodu odpowiedzialna za kolor.
Teoretycznie mam podaną informację z kolorem itd. ale nie wiem gdzie go szukać, żeby otworzyć sobie plik i zmienić kolor. :/

alex51
12-09-2013, 13:40
Jeśli masz stronę z tym szablonem na serwerze to podaj adres a postaramy się Ci Pomóc.

Djef
12-09-2013, 13:47
http://13taxi.pl (http://13taxi.pl/)
dzięki z góry.

alex51
12-09-2013, 13:55
Szukaj pliku css według lokalizacji:
http://13taxi.pl/templates/realestate/css/styles.css
W wierszu 190 masz regułę określającą kolor białego tła w artykukule:

.item-page {
background: none repeat scroll 0 0 #FFFFFF;
color: #555555;
padding: 0 7px 7px;
position: relative;
}
Jeśli korzystasz z firefoxa to zainteresuj się narzędziem firebug.

zwiastun
12-09-2013, 13:59
Kurcze nie ogarniam.
Czy to nie jest tak, że przeglądarka generuje kod wybranego elementu?
Ja potrzebuję znaleźć plik, a raczej miejsce w pliku, gdzie znajduje się linijka kodu odpowiedzialna za kolor.
Teoretycznie mam podaną informację z kolorem itd. ale nie wiem gdzie go szukać, żeby otworzyć sobie plik i zmienić kolor. :/

Może Ci @Alex51 poda konkretne rozwiązanie, ale zachęcalbym do zaprzyjaźnienia się z Firebugiem, DragonFly czy innym "inspektorem www", np. w Chrome. Wszystkie oferują podobny zestaw funkcji niezbędnych w pracy nad witryną:

Najkrótsza instrukcja to taka:
1. Klikasz prawym przyciskiem myszki element strony i wybierasz z podręcznego menu polecenie Zbadaj element (W Firefoxie Zbadaj element za pomocą Firebuga)
2. W oknie na dole po lewej będziesz mieć kod wynikowy html, w oknie po prawej style CSS Możesz je sobie dowolnie testować:

* wyłączać/włączać
* dodawać reguly
* edytować reguly

Tuż nad regułami masz wyrównany do prawej link do arkusza stylów z podanym wierszem, gdzie znajduje się kod (uwaga w szablonach profesjonalnych musisz wyłączyć kompresje kodu CSS i JS, jeśli jest włączona)

Djef
12-09-2013, 14:09
BOOMBOCLATH!!!

Cudownie! Dzięki za pomoc! Postaram się już nie zawracać gitary i samemu radzić z takim problemem! Firebug dodany do firefoxa i widzę gdzie co i jak, a niestety na chromie nie ogarniałem tematu!! :)

Djef
12-09-2013, 17:31
No więc znowu ja.
Przepraszam za pos pod postem na początku, ale pojawił mi sie kolejny problem. Googlanie na niewiele się jak na razie zdało, więc piszę na forum, bo po to chyba fora są, tak?

Chciałbym na tej mojej stronce zmienić tło, ten najbardziej odległy background. Wiem, że wszystko co trzeba znajduje się w sekcji body mojego szablonu, znalazłem miejsce itd. Wiem też, że tło to jest obrazk i aby je zmienić trzeba obrazek podminić.
Chcę żeby mój obrazk nie był powielany, więc zmieniłem funkcję "repeat" na "no-repeat".
Ale, jak sprawić, żeby obrazek był wyśrodkowany idalnie i czy da się zrobić tak, żeby obrazek dopasował się do wielkości okna przeglądarki? Obawiam się, że tutaj w gre może wchodzić grafika responsywna, ale o tej jeszcze nie mam zielonego pojęcia.
Satysfakcjonowałaby mnie jeszcze trzecia opcja: jednolite tło i na tym tle jakiś element (obrazek), który zawsze byłby na środku ekranu, niezależnie jak nisko zjedziemy scrollem, albo jak bardzo dużej rozdzielczości używamy.

Da się to jakoś zrobić?
Z góry dzięki za pomoc.

AndiC
13-09-2013, 13:07
Rozumiem że żaden z dostępnych modułów (http://extensions.joomla.org/extensions/style-a-design/page-background) na JED nie jest odpowiedni ?
I wszystkie sprawdziłeś ?

Djef
13-09-2013, 16:14
Szczerze mówiąc, liczyłem, że wystarczy odpowiednią formułę wpisać w kodzie, żeby tło np. dopasowało sie do okna przeglądarki. I nie trzeba będzie uciekać się do modułów.

zwiastun
13-09-2013, 16:57
Ale, jak sprawić, żeby obrazek był wyśrodkowany idalnie i czy da się zrobić tak, żeby obrazek dopasował się do wielkości okna przeglądarki? Obawiam się, że tutaj w gre może wchodzić grafika responsywna, ale o tej jeszcze nie mam zielonego pojęcia.
Satysfakcjonowałaby mnie jeszcze trzecia opcja: jednolite tło i na tym tle jakiś element (obrazek), który zawsze byłby na środku ekranu, niezależnie jak nisko zjedziemy scrollem, albo jak bardzo dużej rozdzielczości używamy.

@AndiC dlatego podpowiedział skorzystanie z modułu, bo napisałeś co napisałeś: nie wiesz, nie masz pojęcia, czyli oczekujesz nie podpowiedzi, ale poradnika czy instrukcji krok po kroku. Co prawda to nieco inna skala zagrożenia, ale porównanie jest mimo wszystko uprawnione: czy użytkownikowi wyrostka robaczkowego chirurg ma na na forum odpowiadać, jak krok po kroku rozwiązać doskwierający użytkownikowi problem.

Da się osiągnąć efekt za pomocą modułu, znaczy, że da się napisać kod, który problem rozwiązuje. Ale nie jest to jeden wierszyk w arkuszu CSS ("odpowiednia formula w kodzie")

alex51
13-09-2013, 17:11
@Djef, włącz witrynę.

Djef
13-09-2013, 19:58
@zwiastun, słuszne rozumowanie, nie podszedlem do tego tematu z tej strony. Po prostu miałem nadzieję, że wystarczy zmienić jakiś elemnt, lub coś dopisać, tak jak w przypadku sprawienia aby obrazek nie był powielany - wystarczyło dodać przedrostek "no-" do repeat i było w porządku.

@alex, witryna włączona.

alex51
13-09-2013, 20:13
Coś długo trwało to włączanie. Widzę, że masz już wstawiony obrazek w tle strony:
http://13taxi.pl/templates/realestate/css/styles.css
wiersz 12

.background {

background: url("../images/bck.jpg") no-repeat scroll 0 0 transparent;
position: absolute;
width: 100%;


}


Aby obrazek nie przesuwał się wraz z przesuwaniem zawartości strony zmienić należy wartość scroll na fixed.

Djef
13-09-2013, 20:49
Jedyne co w tym pliku znalazłem to:

/* Main Layout */
html {height: 100%; width:100%;}
body { font-family: Helvetica, Arial, sans-serif; font-size:13px; line-height: 1.3; color: #393939; }
body.contentpane { background:#393939; color:#393939;}

.background {position: absolute; width: 100%; background:url(../images/bck.jpg) no-repeat;}
h2.item-page-title a, .leading-0 a, h1, h2, h3, h4, a:link, a:visited { text-decoration: none; color: #393939;}
a:hover { text-decoration: underline; color: #555; background:none;}
.logo { position:absolute; max-width:267px; max-height:85px;}
.logo a {color:#fff; text-decoration:none; font-size:56px;}
.slogan {color: #fff;font-size: 10px;left: 290px;position: absolute;top: 73px;}
.searchbutton { position:absolute; right:10px; top: 7px; color:#fff; float:right; width:50px;}

I szczerze nie widzę tam info o scrollu :/

zwiastun
13-09-2013, 20:56
@Alex51 pokazał Ci jak zmienić te deklarację:
.background {position: absolute; width: 100%; background:url(../images/bck.jpg) no-repeat;}

alex51
14-09-2013, 07:46
Brak wpisu wartości scroll jest równoznaczny z tym, że tło strony pozostaje "sklejone" z pozostałymi częściami szablonu. Mówiąc inaczej nie trzeba koniecznie dopisywać scroll w regule określającej tło strony jeśli zależy nam aby tło przesuwało się wraz z przesuwaniem strony. Chcąc uzyskać nieruchomy obraz tła należy użyć wartości fixed. Robi się tak w przypadku ustawiania w tle strony konkretnego obrazka o rozdzielczości wystarczającej do pokrycia całego roboczego rozmiaru strony. Wówczas nie ma potrzeby stosowania powtórzeń tego obrazu.

Djef
14-09-2013, 22:44
hmmm, okej. A jak/czy da się wyśrodkować background? próbowałem position: cender/middle ale to nic nie dało. :/

however
15-09-2013, 18:14
Oczywiście, że można wyśrodkować tło. Rozumiem, że szukałeś w Google ale być może przeoczyłeś. W pierwszym wyniku dla zapytania css background position zwraca adres bardzo przydatnej strony. Będę tak cudowny, że podam Ci link dalej http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-position.

Djef/Dejf, swoją drogą forum ma służyć rozwiązywaniu problemów o nie nauki (bądź co bądź podstaw) HTML/CSS.

Djef
15-09-2013, 22:14
No tak, tylko jeśli czegoś nie umiem, to jest to dla mnie problem. Więc chciałbym go rozwiązać. Rozwiązując go, uczę się. Każdy chyba tak ma, że jak rozwiązuje jakiś problem, to się uczy.
Nawet jak dostanie gotowe rozwiązanie, to przy podobnym problemie będzie wiedział w którą stronę ma podążać, żeby nie zawracać głowy ludziom na forum.
Dzięki śliczne za link. Mi sie nie udało nic takiego znaleźć :/