Joomla template design (newbie)

Latina.ecu · #1 (**permalink**) 03-15-2008, 04:52 PM

Hi there again, Well, this is what i have got till now in my first attempt to make a joomla 1.5 template, please give me some me guide to correct what is wrong in this code, if i need to add or take off something

screenshot of layout
http://img301.imageshack.us/img301/8813/diseohc8.jpg

index.php

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
#
<jdoc:include type="head" />
#
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 3 Column - fw-34-3-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>

<body>

   <!-- Begin Wrapper -->
   <div id="wrapper">
   
         <!-- Begin Header -->
         <div id="header">
		 
		       This is the Header		 
			   
		 </div>
		 <!-- End Header -->
		 
		 <!-- Begin Left Column -->
		 <div id="leftcolumn">
		 
		       Left Column
		 
		 </div>
		 <!-- End Left Column -->
		 
		 <!-- Begin Content Column -->
		 <div id="content">
		       
	          <a href="#">Download this CSS Layout</a>		 
		 
		 </div>
		 <!-- End Content Column -->
		 
		 <!-- Begin Right Column -->
		 <div id="rightcolumn">
		 
		       Right Column
		 
		 </div>
		 <!-- End Right Column -->
		 
		 <!-- Begin Footer -->
		 <div id="footer">
		       
			   This is the Footer		
			    
	     </div>
		 <!-- End Footer -->
		 
   </div>
   <!-- End Wrapper -->
   
</body>
</html>

template_css

Code:

#
<?xml version="1.0" encoding="utf-8"?>
#
      <install version="1.5" type="template">
#
        <name>Nombre de la plantilla</name>
#
        <creationDate>Fecha de creación</creationDate>
#
        <author>Nombre del autor</author>
#
        <copyright>Copyright</copyright>
#
        <authorEmail>email del autor</authorEmail>
#
        <authorUrl>web del autor</authorUrl>
#
        <version>versión</version>
#
        <description>
#
        <![CDATA[
#
          Diseñado por mi.
#
          ]]>
#
        </description>
		
* { padding: 0; margin: 0; }

body {
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
}
#wrapper { 
 margin: 0 auto;
 width: 1022px;
}
#header {
 color: #333;
 width: 1000px;
 float: left;
 padding: 10px;
 border: 1px solid #ccc;
 height: 100px;
 margin: 10px 0px 5px 0px;
 background: #F5DEB3;
}
#navigation {
 float: left;
 width: 1000px;
 color: #333;
 padding: 10px;
 border: 1px solid #ccc;
 margin: 0px 0px 5px 0px;
 background: #BD9C8C;
}
#leftcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#content { 
 float: left;
 color: #333;
 border: 1px solid #ccc;
 background: #F2F2E6;
 margin: 0px 5px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 556px;
 display: inline;
}
#rightcolumn { 
 color: #333;
 border: 1px solid #ccc;
 background: #E7DBD5;
 margin: 0px 0px 5px 0px;
 padding: 10px;
 height: 350px;
 width: 195px;
 float: left;
}
#footer { 
 width: 1000px;
 clear: both;
 color: #333;
 border: 1px solid #ccc;
 background: #BD9C8C;
 margin: 0px 0px 10px 0px;
 padding: 10px;
}

template_details

Code:

#
<?xml version="1.0" encoding="utf-8"?>
#
      <install version="1.5" type="template">
#
        <name>Template Name</name>
#
        <creationDate>Date Creation</creationDate>
#
        <author>My Name</author>
#
        <copyright>Creative Commons</copyright>
#
        <authorEmail>My email</authorEmail>
#
        <authorUrl>URL of Web</authorUrl>
#
        <version>Versión</version>
#
        <description>
#
        <![CDATA[
#
          Aqui va la descripción, puede usarse HTML o texto plano.
#
          ]]>
#
        </description>
#
        <files>
#
        <filename>index.php</filename>
#
        <filename>templateDetails.xml</filename>
#
    <filename>template_thumbnail.png</filename>
#
    <filename>favicon.ico</filename>
#
        <filename>css/template.css</filename>
#
        <filename>images/imagen.png</filename>
#
        </files>
#
  <positions>
#
    <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>
#
  <params>
#
    <param name="color" type="list" default="blanco" label="Color de fondo" description="Color de fondo">
#
      <option value="azul">Azul</option>
#
      <option value="rojo">Rojo</option>
#
      <option value="negro">Negro</option>
#
      <option value="blanco">Blanco</option>
#
    </param>
#
  </params>
#
</install>

http://img301.imageshack.us/img301/8813/diseohc8.jpg

**Jordan** · #2 (**permalink**) 03-16-2008, 09:57 AM

Not bad, now you just need to add the template code in for the positions. Once you do that you will have a nice, working template.

Latina.ecu · #3 (**permalink**) 03-16-2008, 01:35 PM

Hi Jordan: well i must confess that adding the module positions to the index .php have been the hardest part, i want to have all possible module position available in my template.

something like in this screenshot

i have added the module positions in the xml file, and i understand this positions must be definied in the template itself, i think the code would be something like this

Code:

<!-- BEGIN: newposition -->
  <div id="newposition" >

   <div class="newposition-class">
    <jdoc:include type="modules" name="top" style="xhtml" />
   </div>   

 </div>
  <!-- END: newposition-->

if the code is wrong please let me know

the problem is that it seems that i can not place the position/module code as simple as "between head or body", they must be in a specific place in the template i do not get yet the way it works, my lack of coding knowledge is obvious at this point.

Or is it possible to add the positions just one after another to index.php file like in the xml file?

xml.file

Code:

#
  <positions>
#
    <position>left</position>
#
    <position>right</position>
#
    <position>top</position>
#
    <position>banner</position>
#
    <position>header</position>
#
    <position>bottom</position>	
#
    <position>footer</position>
#
    <position>pathway</position>
#
    <position>user1</position>
#
    <position>user2</position>
#
    <position>user3</position>
#
    <position>user4</position>
#
    <position>user5</position>
#
    <position>user6</position>
#
    <position>inset</position>
#
    <position>debug</position>
#
    <position>search</position>
#
    <position>debug</position>
				
	
    </positions>
#

some hints would be appreciated

**Jordan** · #4 (**permalink**) 03-16-2008, 03:51 PM

That is the correct way to add them. You might want to use an if statement to determine if any modules are in that position before you display the <div> tags and the actual modules.

Latina.ecu · #5 (**permalink**) 03-17-2008, 04:53 AM

Hi, i have downloaded the joomla 1.5 template toolbar and it seems to work great for a newbie like me.
Toolbar
this is the code (generate for "right" and "right simple" position)

Code:

<?php if($this->countModules('right')) : ?>
	<jdoc:include type="modules" name="right" style="" />
<?php endif; ?>

Code:

<jdoc:include type="modules" name="right" style="" />

what are the differences between the "right" and "right simple" ?

would be this code correct to create a right or left module position?

Code:

<body>
<div
<?php if($this->countModules('right')) : ?>
	<jdoc:include type="modules" name="right" style="" />
<?php endif; ?>

<jdoc:include type="modules" name="left" style="" />
</div>
</body>

**Jordan** · #6 (**permalink**) 03-17-2008, 06:35 AM

I'm not sure what the difference is, probably just another module position. That code is correct except you are missing a > on the beginning <div> tag.

Latina.ecu · #7 (**permalink**) 03-19-2008, 05:14 AM

Hi Jordan, thanks for all your help, i have been looking at the CSS code generate by the joomla 1.5 toolbar it seems important to help to change the basic layout of the template, but i do not know how or where in this code could i add my own css code, or if i have just to copy and paste my own code into this one or viceversa?.

i want to have a functional css file that allows me to play with the layout

joomla 1.5 template css code

Code:

/* Created with a little help from Joomla! 1.5 Template Toolbar (http://antun.vkrgnf.com/) */

body {
}

p {
}

h1 {
}

h2 {
}

h3 {
}

a:link, a:active, a:visited {
}

a:hover {
}

/* TEMPLATE CSS */

/* JOOMLA CSS */

.article_separator {
}

.adminform {
}

.author {
}

.bannerfooter {
}

.bannergroup {
}

.bannerheader {
}

.banneritem {
}

.blog {
}

.blog_more {
}

.blogsection {
}

.breadcrumbs {
}

.button {
}

.buttonheading {
}

.clr {

	clear: both;

}

.componentheading, .contentheading {
}

.content_email {
}

.content_rating {
}

.content_vote {
}

.contentdecription {
}

.contentpagetitle {
}

.contentpane {
}

.contentpaneopen {
}

.contenttoc {
}

.createdate {
}

.created-date {
}

.date {
}

.input {
}

.inputbox {
}

.intro {
}

.latestnews {
}

.loclink {
}

a.mainlevel:link, a.mainlevel:active, a.mainlevel:visited {
}

a.mainlevel:hover {
}

.message {
}

.metadata {
}

.modifydate {
}

.module {
}

.moduletable {
}

.mosimage {
}

.mosimage_caption {
}

.mostread {
}

.newsfeed {
}

.outline {
}

.pagenav {
}

.pagenav_next {
}

.pagenav_prev {
}

.pagenavbar {
}

.pagenavcounter {
}

.pathway {
}

.pollstableboarder {
}

.read {
}

.search {
}

.searchintro {
}

.sections {
}

.sectiontable_footer {
}

.sectiontableentry {
}

.sectiontablefooter {
}

.sectiontableheader {
}

.small {
}

.smalldark {
}

a.sublevel:link, a.sublevel:active, a.sublevel:visited {
}

a.sublevel:hover {
}

.title {
}

.wrapper {
}

Latina.ecu · #8 (**permalink**) 03-19-2008, 07:29 AM

It seems not to easy the css code at this point, i will be looking arround to find a solution

**Jordan** · #9 (**permalink**) 03-19-2008, 07:35 AM

You can just include your CSS code at the top of your index.php file. Here is one method of doing it:

PHP Code:


			
$template_baseurl = $this->baseurl . '/templates/' . $this->template;

// add template css to JDocumentHTML
$this->addStyleSheet($template_baseurl . '/yourCSS.css');

Latina.ecu · #10 (**permalink**) 03-19-2008, 11:50 AM

Do you mean something like this?

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
#
<jdoc:include type="head" />
#
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Width CSS Layouts - 3 Column - fw-34-3-col</title>
<link rel="stylesheet" type="text/css" href="main.css" />
$template_baseurl = $this->baseurl . '/templates/' . $this->template;
// add template css to JDocumentHTML
$this->addStyleSheet($template_baseurl . '/template_css.css'); 
</head>

<body>

but what about the css code above for links and headers and all the rest how do i add this to the css file?. can i copy just that code into the css body? to used when needed? or maybe can i have two css files the second one for specific areas i would like to layout

i am curious of at what point can i make a zip file of this to try it

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Joomla! Tutorial #3: CSS Class Suffix	takercena	Tutorials	1	03-14-2008 01:51 PM
Tutorial : Joomla! The Basic	takercena	Tutorials	4	02-22-2008 11:06 PM
Joomla! Tutorial #2: Joomla! Extensions	takercena	Tutorials	0	02-22-2008 09:54 PM
Template Sites	TVDinner	Website Design	4	06-01-2007 10:32 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)