Izrada joomla template – 2. dio

Autor Sabahudin | Štampa | El. pošta | Klikova: 35447

Pozdrav! U ovom poglavlju, ja ću vam pokazati bitne elemente koje morate uzeti u obzir prilikom planiranja i izrade vaseg Joomla 1.5 predložka. Pa da krenemo.

 Joomla administratori mogu napraviti i postavljati module na različite pozicije unutar Module Manager ( bez radnje sa codom ). Stim možete mijenjati izgled svog portala i načine na koji će se korisiti ili upravljati. Jedan administrator može imati main_menu postavljen na lijevom položaju, dok drugom administatoru možete dodijeliti top poziciju. Koje pozicije će biti dostupne ovisi o tome koje su pozicije dodane u templateDetails.xml

Sada su nam potrebne pozicije u jdoc.

Evo najčešćih položaja u jdoc :

• banner
• breadcrumbs
• debug
• footer
• hornav
• left
• right
• search
• syndicate
• top
• user1
• user2
• user3
• user4
• user5
• user6
• user7
• user8
• user9


Šema našeg predložla:

 

A sada otvorimo html editor ili direktno na joomli  (Template HTML Editor) i počnemo upisivati :

 <!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="en" lang="en">

 <head>

 <title>My New Joomla! 1.5 Template Title</title>

 </head>

 <body> Ovdje cemo dodati kod koji cu napisati kasnije </body>

 </html>

 

Sada ćemo napraviti osnovni  “stylesheet” :
U index.html treba povezati CSS a to ćemo uraditi sa javascript linkom :

<head>

<title>My New Joomla! 1.5 Template Title</title>

<script type="text/javascript" src="/"></script>

<style type="text/css" media="screen">

@import url("css/template.css");

</style>

</head>

 

 Više o dodavanju CSS  pročitajte na : http://www.bluerobot.com/web/css/fouc.asp

Napravite jednu datoteku pod imenom template.css  i  pišite slijedeče:

 

   */

    Enter Joomla! 1.5 Design & Creation Comments Here
*/
/*////////// GENERAL //////////*/
body {}
#container {}
#container2 {}
 
#container3 {}
/*////////// TYPEOGRAPHY //////////*/
h1 {}
h2 {}
h3 {}
h4 {}
p {}
a {}
a:hover {}
a:visited {}
/*////////// HEADERS //////////*/
#header {}
/*////////// CONTENT //////////*/
#content {}
/*////////// SIDEBARS //////////*/
#sidebarLT {}
#sidebarRT {}
/*////////// NAV //////////*/
/*////////// FORMS //////////*/
/*////////// FOOTER //////////*/
#footer {}
/*////////// IMAGES //////////*/
/*////// FUN CLASSES ///////////*/
/* dodatke pišemo ovdje  */

 

Sada do kraja napisemo html kod:

 
 
</head>
<body>
<a name="top"></a><!--anchor for top-->
<div id="container"><!--container goes here-->
<div id="header">
<em>Header:</em> slike i text za header ce biti ovdje </div><!--//header-->
<!-- Begin #container2 this holds the content and sidebars-->
<div id="container2">
<!-- Begin #container3 keeps the left col and body positioned-->
<div id="container3">
<!-- Begin #content -->
<div id="content">
<em>Main Content:</em> Joomla! Sadržaj komponenta će se prikazati ovdje.</div><!-- //content -->
<!-- #left sidebar -->
<div id="sidebarLT">
<em>Left Side Bar:</em> Ovdje ce se pokazivati linkova</div><!--//sidebarLT -->
</div><!--//container3-->
<!-- #right sidebar -->
<div id="sidebarRT">
<em>Right Side Bar:</em> To će uključivati dodatne oglase / linkove.
</div><!--//sidebarRT -->
</div><!--//container2-->
<div id="top_navlist">
<em>Top Nav:</em> text , kojeg cemo sa Css urediti
</div><!--//top_navlist-->
<div id="footer">
<em>Footer:</em> mjesto i informacije o autorskim pravima idu ovdje</div><!--//footer-->
</div><!--//container-->
</body>
</html>
 
 

Ako ste radili sve kako sam vam rekao trebali bi dobiti kao na slici, ne brinite! U slijedećem tutorialu ce izgledati već bolje!

 

 

 

 

 

 

 

 

Prijavi se!

WebShop.Ba

Popularno na Joomla! BiH

Ko je na portalu?

Ko je na portalu: 38 gostiju i nema prijavljenih članova

Statistika portala

Posjetioci
1922
Članci
469
Broj pregleda članaka
3520895

Socijala

                  

Najbolje.ba

"Joomla!® is the trademark of Open Source Matters, Inc. in the United States and other countries. The Joomla!® name is used under a limited license granted by Open Source Matters. Joomla.ba is not affiliated with or endorsed by Open Source Matters or the Joomla! Project."