PDA

Zobacz pełną wersję : Tworzenie szablonu


Alexen
21-03-2010, 12:54
Witam, dopiero zacząłem swoją przygodę z joomla, stwierdziłem ze zaczne od templatek :) napotkałem pierwszy problem z którym już nie moge sobie poradzić poradniki, tutoriale, filmy które przejzałem nie pomogły mi w usunięciu tego problemu.

www.przecinak600.yoyo.pl (http://www.przecinak600.yoyo.pl)

szablon jest wgrany poprawnie bo miałem z tym tez problem ale sobie poradzilem
joomla nie widzi tak jakby wogole <div>

to jest najprostsza templatka chcialem poprostu zobaczyc jak to dziala,

Moze ktos mi pomoze w poprawieniu tego albo poleci strony ktore naprawde warto przejzec.


podam odrazu kody z plikow najwazniejszych

index.php


<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/moto/css/css.css" type="text/css" />
</head>

<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />

<div id="top_tlo">

<div id="top_lewy"></div>


<div id="top_prawy"></div>

</div>

<div id="strona">

<div id="srodek">
<div id="top_gora"></div>
<div id="top_dol"></div>

<div id="kolumna_lewa">

</div>

<div id="kolumna_srodek">
<div id="srodek_gora"></div>
<div id="srodek_srodek">

</div>
<div id="srodek_dol"></div>
</div>

<div id="kolumna_prawa">

</div>


</div>

</div>



</body>


templateDetails





<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN"
"http://dev.joomla.org/xml/1.5/template-install.dtd">
<install version="1.5" type="template">
<name>moto</name>
<creationDate>16.03.2010</creationDate>
<author>Alex</author>
<authorEmail>mariuszzs5@wp.pl</authorEmail>
<authorUrl>narazie brak</authorUrl>
<copyright>Alex 2010</copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>moto</description>
<files>
<filename>index.php</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>images/bg.png</filename>
<filename>css/css.css</filename>

<filename>images/menu_lewe_gora.png</filename>
<filename>images/menu_lewe_srodek.png</filename>
<filename>images/menu_lewe_dol.png</filename>
<filename>images/menu_prawe_gora.png</filename>
<filename>images/menu_prawe_srodek.png</filename>
<filename>images/menu_prawe_dol.png</filename>
<filename>images/srodek_gora.png</filename>
<filename>images/srodek_srodek.png</filename>
<filename>images/srodek_dol.png</filename>
<filename>images/top_dol.png</filename>
<filename>images/top_gora.png</filename>
<filename>images/top_lewy.png</filename>
<filename>images/top_prawy.png</filename>



</files>
<positions>
<position>breadcrumb</position>
<position>left</position>
<position>right</position>
<position>top</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>footer</position>
</positions>
</install>
css.css


html,body,div,table,p,ul,li,a,form.input,label(mar gin:0px; padding:0px;)
body(gont-family:"Trebuchet MS", Verdana, Arial, Sans-serif; font-size:12px; color:#000000; background-image:url(../images/bg.png);)

div#top_tlo(position:absolute; z-index:1; width:100%;)
div#strona(position:absolute; z-index:2; width:100%; height:100%;)
div#top_lewy(width:50%; height:180px; float:left; background-image:url(../images/top_lewy.png);)
div#top_prawy(width:50%; height:180px; float:right; background-image:url(../images/top_prawy.png);)
div#srodek(margin:0 auto; width:800px;)

div#top_gora(width:800px; height:40px; background-image:url(../images/top_gora.png);)
div#top_dol(width:800px; height:140px; background-image:url(../images/top_dol.png);)

div#kolumna_lewa(float:left; width:190px;)
div#kolumna_lewa img(border:0px;)
div#kolumna_lewa table(width:190px;)
div#kolumna_lewa div.module(width:198px; background:transparent url(../images/menu_lewe_srodek.png) left repeat-y; margin bottom:10px;)
div#kolumna_lewa div.module div(width:198px; background:transparent url(../images/menu_lewe_gora.png) top left no-repeat;)
div#kolumna_lewa div.module div div(width:198px; backgorund:transparent url(../images/menu_lewe_dol.png) bottom left no-repeat;)
div#kolumna_lewa div.module div div div(padding-left:10px; padding-bottom:10px; background:none;)


div#kolumna_srodek(float:left; width:404px; text-align:justify;)
div#srodek_gora(width:404px; height:38px; background-image:url(../images/srodek_gora.png);)
div#srodek_srodek(width:404px; background-image:url(../images/srodek_srodek.png);)
div#srodek_dol(width:404px; height:10px; backgorund-image:url(../images/srodek_dol.png);)


div#kolumna_prawa(float:left; width:190px;)
div#kolumna_prawa img(border:0px;)
div#kolumna_prawa table(width:190px;)
div#kolumna_prawa div.module(width:198px; background:transparent url(../images/menu_prawe_srodek.png) left repeat-y; margin bottom:10px;)
div#kolumna_prawa div.module div(width:198px; background:transparent url(../images/menu_prawe_gora.png) top left no-repeat;)
div#kolumna_prawa div.module div div(width:198px; backgorund:transparent url(../images/menu_prawe_dol.png) bottom left no-repeat;)
div#kolumna_prawa div.module div div div(padding-left:10px; padding-bottom:10px; background:none;)

h3(margin-bottom:10px; padding-top:10px; font-weight:bold; color:#000000;)
p(margin:10px;)

.contentheading(font-size:16px; font-weight:bold; padding:10px;)
.componentheading(font-size:16px; font-weight:bold; padding:10px;)
.contentdescription(pa dding:10px;)

a:link(font-weight:bold; color:#314960; test-decoration:none;)
a:visited(font-weight:bold; color:#314960; test-decoration:none;)
a:hover(font-weight:bold; color:#bc7530; test-decoration:underline;)

ul(margin:10px; list-style-type:none;)
img(border:1px; solid#bc7530;)

.mosimage(margin:10px;)
.readon(margin-left:10px;)
.back_button(margin-left:10px;)
.blog_more(margin-left:10px;)
.poll(margin:0px; padding:0px;)
.pollstableborder(margin:0px; padding:0px;)
label(font-size:10px; display:block; width:100px;)
Robster
22-03-2010, 22:19
Nie wiem czy zauważyłeś, ale na forum są dostępne znaczniki [code], w których umieszczamy kod źródłowy. To, że do tej pory nikt Ci nie pomógł jest głównie zasługą kompletnej nieczytelności tego co napisałeś.

I taka moja mała uwaga. Piszesz, że dużo czytałeś o pisaniu szablonów pod Joomla!, ale plik .css zatytułowałeś css.css podczas gdy we wszystkich tutorialach poleca się plik nazwać template.css.
Nie pamiętam teraz czy to robi jakąś różnicę, ale przypuszczam że tak, bo w twoim przypadku nie ma problemu z widzeniem DIV'ów, tylko z "widzeniem" arkusza stylów.
Alexen
22-03-2010, 23:33
kompletnej nieczytelności ? chodzi o brak [code]
już poprawiam




Aby utrzymać pewien ład, załóż 2 nowe katalogi, nazywając je "images" oraz "css". W katalogu "css" stwórz plik nazwany "css.css". źródło: http://wiki.joomla.pl/Podstawy_tworzenia_szablonu
Robster
23-03-2010, 08:12
No i mnie złapałeś ^^ Szczerze nie widziałem tego, ale według mnie taki zapis jest niepraktyczny.
Btw te linie:

<body>
<jdoc:include type="modules" name="top" />
<jdoc:include type="component" />
<jdoc:include type="modules" name="bottom" />


są błędne. Nie tak deklaruje się pozycje modułów.

Popraw to sobie, a później pokombinuj z tym linkowaniem pliku .css bo jak już pisałem problem tkwi w tym że nie jest on wczytywany.
Alexen
23-03-2010, 10:24
na dobra sprawe to moze nie być tych trzech linijek teraz , mi chodzi o to zeby ten szablon wogole odpalic zeb dziala , a nie wiem co jest zle zrobione :( zmienialem juz na


template.css
css.css.
styl.css

probowalem jak sie da :(
zwiastun
23-03-2010, 11:50
1. Plik css można nazwać różnie. W pliku template.css joomlowe edytory tekstów szukają standardowo stylów definiujących typografię.
2. Może czegoś nie dostrzegam, ale nie widzę błędów w wywołaniu modułów
3. Powodem niełączenia z arkuszem stylów może być ścieżka w <link...
Spróbuj opuścić część $baseurl albo wpisać tam adres witryny wprost
Robster
23-03-2010, 16:22
@zwiastun może źle ująłem tą wypowiedź o modułach. Chodzi, o to że są one zaraz pod <body> i wszystkie władują się nad stronę jednocześnie przesuwając ją w dół.
Wątpię by był to zamierzony efekt.

@Alexen podlinkuj arkusz tą linijką:

<link rel="stylesheet" href="css/css.css" media="screen" type="text/css" />

W zależności jaką masz tam strukturę katalogów, zmień ścieżkę do pliku.
Alexen
23-03-2010, 20:57
Probowalem i dac caly link do strony i nie uzywać <?baseurl..... i probowalem podstawic ten link i nic :(

co do modułów co aktualnie jest sprawa poboczną bo nie moge wogole odpalic szablonu :( to dzialaja one dobrze bo nie przesuwa tego tekstu nizej i jak bioze podglad w szablonach to sa one odpowiednio rozmieszczone

co jeszcze moge sprobowac zrobić zeby działal ten szablon ?
a_m
23-03-2010, 21:20
mama taką propozycję - zamiast zwykłych nawiasów zastosuj klamrowe w pliku css
Robster
23-03-2010, 21:33
O lol jaki FAIL :D
Tak mało oczywiste, że nawet @zwiastun nie zwrócił uwagi :)
Alexen
23-03-2010, 22:19
ok jest fajnie cos drgnelo :) zmienily sie czcionki tekstu ale divow jak nie czytalo tak dalej nie czyta :|
Robster
23-03-2010, 22:45
Pokaż aktualny plik .css
Według mnie powinieneś jeszcze raz prześledzić kursy pisania arkuszy stylów, bo kuleje to u Ciebie strasznie.
Alexen
23-03-2010, 23:26
html,body,div,table,p,ul,li,a,form.input,label{mar gin:0px; padding:0px;}
body{gont-family:"Trebuchet MS", Verdana, Arial, Sans-serif; font-size:12px; color:#000000; background-image:url{../images/bg.png};}



div#top_tlo{position:absolute; z-index:1; width:100%;}
div#strona{position:absolute; z-index:2; width:100%; height:100%;}
div#top_lewy{width:50%; height:180px; float:left; background-image:url{../images/top_lewy.png};}
div#top_prawy{width:50%; height:180px; float:right; background-image:url{../images/top_prawy.png};}
div#srodek{margin:0 auto; width:800px;}

div#top_gora{width:800px; height:40px; background-image:url{../images/top_gora.png};}
div#top_dol{width:800px; height:140px; background-image:url{../images/top_dol.png};}

div#kolumna_lewa{float:left; width:190px;}
div#kolumna_lewa img{border:0px;}
div#kolumna_lewa table{width:190px;}
div#kolumna_lewa div.module{width:198px; background:transparent url{../images/menu_lewe_srodek.png} left repeat-y; margin bottom:10px;}
div#kolumna_lewa div.module div{width:198px; background:transparent url{../images/menu_lewe_gora.png} top left no-repeat;}
div#kolumna_lewa div.module div div{width:198px; backgorund:transparent url{../images/menu_lewe_dol.png} bottom left no-repeat;}
div#kolumna_lewa div.module div div div{padding-left:10px; padding-bottom:10px; background:none;}


div#kolumna_srodek{float:left; width:404px; text-align:justify;}
div#srodek_gora{width:404px; height:38px; background-image:url{../images/srodek_gora.png};}
div#srodek_srodek{width:404px; background-image:url{../images/srodek_srodek.png};}
div#srodek_dol{width:404px; height:10px; backgorund-image:url{../images/srodek_dol.png};}


div#kolumna_prawa{float:left; width:190px;}
div#kolumna_prawa img{border:0px;}
div#kolumna_prawa table{width:190px;}
div#kolumna_prawa div.module{width:198px; background:transparent url{../images/menu_prawe_srodek.png} left repeat-y; margin bottom:10px;}
div#kolumna_prawa div.module div{width:198px; background:transparent url{../images/menu_prawe_gora.png} top left no-repeat;}
div#kolumna_prawa div.module div div{width:198px; backgorund:transparent url{../images/menu_prawe_dol.png} bottom left no-repeat;}
div#kolumna_prawa div.module div div div{padding-left:10px; padding-bottom:10px; background:none;}

h3{margin-bottom:10px; padding-top:10px; font-weight:bold; color:#000000;}
p{margin:10px;}

.contentheading{font-size:16px; font-weight:bold; padding:10px;}
.componentheading{font-size:16px; font-weight:bold; padding:10px;}
.contentdescription{pa dding:10px;}

a:link{font-weight:bold; color:#314960; test-decoration:none;}
a:visited{font-weight:bold; color:#314960; test-decoration:none;}
a:hover{font-weight:bold; color:#bc7530; test-decoration:underline;}

ul{margin:10px; list-style-type:none;}
img{border:1px; solid#bc7530;}

.mosimage{margin:10px;}
.readon{margin-left:10px;}
.back_button{margin-left:10px;}
.blog_more{margin-left:10px;}
.poll{margin:0px; padding:0px;}
.pollstableborder{margin:0px; padding:0px;}
label{font-size:10px; display:block; width:100px;}
Robster
24-03-2010, 08:07
Człowieku, weź lepiej poucz się tego CSS bo przesadzasz. Co to ma być:
url{../images/srodek_srodek.png} ?

W przedszkolu nie jesteś, a twoje problemy nie są związane z Joomlą czy tworzeniem szablonów, a z totalnym brakiem wiedzy o podstawowych zasadach obowiązujących przy tworzeniu CSS.
Alexen
24-03-2010, 09:11
heh dobrze ci bo masz już to opanowane ... ciekawy jestem jak ty zaczynałes ... ale i tak mi pomogles :podstep:
Robster
24-03-2010, 14:42
Ja teraz zaczynam. O CSS wiem raczej niewiele, bo pierwszy CSS tak na poważniej modyfikowałem jakieś 6 miesięcy temu, ale podstawowe informacje o składni miałem opanowane po kilku dniach, bo przecież jest tego niewiele!

Nie wiem dlaczego od razu zaczynasz od Joomla! Co prawda tworzenie szablonów po J! jest raczej banalne, ale na początek powinieneś sobie zrobić jakiś prosty, statyczny, szablon HTML+CSS. Top+prawa/lewa kolumna+treść główna. Pobawisz się opływaniem, klasami, zrozumiesz jakimi prawami się to rządzi i z miejsca będziesz miał 70% problemów mniej.
Ja wiem, że każdy kiedyś zaczyna i sam zadawałem różne, głupie, głupsze i debilne pytania, na które znalazłbym odpowiedź gdybym się bardziej przyłożył, ale dzięki takim odpowiedziom jak moja teraz (czyt. sarkastyczne, niemiłe, szorstkie, czasami chamskie) mobilizowałem się do samodzielnej pracy bo nie chciałem się prosić o pomoc "bandy snobistycznych, cwaniaków".

Jednym słowem baw się kodem, nic na siłę, a pytaj w ostateczności.

Pozdrawiam