Zobacz pełną wersję : Jak zmienić obrazek w szablonie?
Ostatnio uczyłam się projektować strony internetowe. Uczyłam się xhtml i css z książki. Postanowiłam sobie dzisiaj pozmieniać coś w swoim szablonie - http://www.grocholacafe.pl I właśnie zastanawiam się jak to jest z tymi obrazkami. Bo np. nie można chyba wpisać tak - background-image: url(Moje obrazy/kob.jpg); W tej książce, z której się uczyłam nic nie pisze na ten temat. Myślę, że w szablonie trzeba dodać do images swój obrazek z komputera a potem go wywołać w css. Może ktoś mógłby mi podpowiedzieć jak to się robi. Nie wiem jak dodać taki obrazek do kodu szablonu i jaki adres potem wywołać w dokumencie css. Wiem tylko, że w body na początku dokumentu css muszę wpisać background-image: url();
Powinnaś najpierw przeanalizować oryginalny plik template.css swojego szablonu (themza j15 24 - Bikini Beach).
Fragment określający tło strony jest w wierszu 14:
body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.png) top repeat-x #FFE382;
}Na Twojej stronie zmieniono ten fragment następująco:
body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background-color: #ff0482;
}W oryginale obrazek tła to:
background:url(../images/bg_page.png)w linku masz podany katalog images, a ponieważ plik template.css odnosi się do wspomnianego szablonu to i katalog images jest w tym samym szablonie i tam należy wgrać potrzebne Ci obrazki.
No to właśnie ja zmieniłam ten kod, bo tam majstrowałam. Ale właśnie ja nie wiem jak wgrać obrazek do katalogu images, jak utworzyć ten plik i jaki póżniej adres odnoszący się do tego miejsca, gdzie jest zdjęcie. Właśnie o to się pytałam.
No to właśnie ja zmieniłam ten kod, bo tam majstrowałam. Ale właśnie ja nie wiem jak wgrać obrazek do katalogu images,
Skorzystać z klienta ftp, opis na wiki (http://wiki.joomla.pl/index.php/Korzystanie_z_klienta_FTP), osobiście polecam Total Commandera lub FileZilla.
jak utworzyć ten plik
Bierz przykład z pliku źródłowego, wskazanego w ścieżce oryginalnego template.css - url(../images/bg_page.png). Sprawdź ten plik, jego rozmiar i na podstawie tych informacji utwórz własny obraz tła w programie graficznym.
i jaki póżniej adres odnoszący się do tego miejsca, gdzie jest zdjęcie. Właśnie o to się pytałam.
Zapisz swój plik graficzny w formacie png, nadając mu taką samą nazwę - bg_page.png, wgraj go na serwer przez ftp, nadpisując znajdujący się tam plik graficzny. Wtedy nie musisz nic zmieniać w template.css, ale tracisz możliwość prostego przywracania wcześniejszego obrazka tła. Możesz też swojemu obrazkowi nadać inną nazwę i umieścić tą nazwę w cytowanej powyżej ścieżce - url(../images/bg_twoja_nazwa_pliku.png). Warto w nazwie zachować fragment bg, bo sugeruje to background.
poza książkami do nauki HTML + CSS, których jest wiele, rzucić czasem należy okiem na pozycje dot. Joomla - bowiem i tam jedna o szablonach jest, patrz wyd. helion - dziś są promocje cenowe z okazji 11 listopada - i z tej przyczyny, my polscy autorzy dziś jesteśmy tańsi
Wgrałam plik png na serwer na to samo miejsce, ale nie zmienił się obrazek, tylko w tle gdzieś widać takie coś różowe - obrazek jest różowy - http://www.psychoszminka.pl
Jeśli tło strony ma być w całości wypełnione tym różowym obrazkiem, to oprócz podmiany pliku graficznego powinnaś jeszcze zmienić oryginalny fragment z wiersza 14 pliku template.css:
body {
margin: 0px 0px 0px 0px;
width: 100%;
display: table;
background:url(../images/bg_page.png) top repeat-x #FFE382;
}
w następujący sposób:
body {
margin: 0px 0px 0px 0px;
display: table;
background:url("../images/bg_kwiatek.png") repeat scroll 0 0 transparent;
height:100%;
width:100%;
}
Nie, ja nie chcę mieć w całości różowego obrazka. Chcę mieć go tylko u góry, tak jak było.
Więc w czym masz problem? Przyznaję się, że już zaczynam się gubić.
No bo ja chcę mieć u góry różowy obrazek a nie tę kobietę na plaży - http://www.psychoszminka.pl (http://www.psychoszminka.pl/) A teraz on jest przysłoniety.
Template.css, wiersz 78:
div.banner1 {
background:url("../images/banner1.jpg") no-repeat scroll center top #FFFFFF;
}
Ten obrazek stale jest na stronie, pomimo, że najpierw zmieniłam plik ("../images/banner1.jpg") na mój obrazek a potem w ogóle zmazałam cały kod w tym pliku, a ten obrazek nadal tam jest.
Nie ma teraz nic bo usunęłaś zawartość pliku graficznego banner1.jpg.
Po bokach masz już na różowo (bg_kwiatek.png), dodałem więc na próbę ten sam plik w miejsce obrazka banner1.jpg i w efekcie jest jeszcze bardziej różowo :D.
Jak w załączniku:
Czyżbyś oczekiwała efektów tego rodzaju?
No właśnie tak bym chciała. I ja w miejsce baner1.jpg nadpisałam na serwerze taki obrazek i mi się tak nie zrobiło. Dlaczego? Mógłbyś mi to powiedzieć? Mi się nigdy nic nie udaje. I mógłbyś mi jeszcze powiedzieć, jak ty to robisz, że na próbę tak sobie zmieniasz różne rzeczy w szablonie? Bo ja próbowałam otworzyć kod żródłowy w widok- źródło strony, ale nie można tam nic edytować?
Odpowiedź jest prosta - Firebug.
Masz na serwerze plik: http://www.psychoszminka.pl/templates/themza_j15_24/images/banner1.jpg, który jest pusty 0 KB (0 bajtów) i ma rozmiar 0px x 0px.
Powinnaś tam dać obrazek taki sam jak bg_kwiatek.png ale zmienić jego rozmiar na taki jak miał w oryginale plik banner1.jpg czyli 979px x 303px. Można ewentualnie dodać małą otoczkę by wyróżnić obrazek banner1.jpg dopisując w template.css, wiersz 78:
border: 1px solid #DDDDDD;
Dziękuję :) A jak można zobaczyć ile pikseli ma obrazek?
Sprawdzając przez ftp we właściwościach tego obrazka lub z poziomu www używając opcji "Pokaż informacje o stronie" a w niej zakładka "Media".
Aha, dziękuję :) A jak mogłabym pozmieniać coś w szablonie na próbę z poziomu strony?
Dziękuję :) Tylko nie wiem jak się w nim zapisuje to co się zmieniło.
To tylko tymczasowe rozwiązanie dla sprawdzenia na bieżąco wprowadzanych zmian. Zapisywać należy we właściwych plikach.
No ale, żeby coś się zmieniło tymczasowo na stronie, to trzeba coś zrobić (np. zapisać)? Czy tylko wprowadzić zmiany?
Firenugiem sprawdzasz, co zmienić.
Wprowadzasz zmiany w plikach. ZAPISUJESZ
Oglądasz zmiany na stronie, ewentualnie wprowadzasz dalsze poprawki.
Możesz robić kopie plików przed edycją.
Możesz uzyć PSPada - po zapisaniu pozwala cofnąć zmiany.
vBulletin® v4.2.5, Prawa przedruku © 2024 vBulletin Solutions, Inc. Wszystkie prawa zastrzeżone.
Tłumaczenie: Polskie Centrum Joomla!