Javascript Disabled Detected

You currently have javascript disabled. Several functions may not work. Please re-enable javascript to access full functionality.

Joomla template design (newbie)

Started by Latina.ecu, Mar 15 2008 01:52 PM

This topic has been archived. This means that you cannot reply to this topic.

12 replies to this topic

#1
Latina.ecu

Posted 15 March 2008 - 01:52 PM

Newbie

Members
17 posts

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.images...13/diseohc8.jpg

index.php

<!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

#

<?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

#

<?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.images...13/diseohc8.jpg

#2
Guest_Jordan_*

Posted 16 March 2008 - 06:57 AM

Guests

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.

#3
Latina.ecu

Posted 16 March 2008 - 10:35 AM

Newbie

Members
17 posts

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

<!-- 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

#
  <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:)

#4
Guest_Jordan_*

Posted 16 March 2008 - 12:51 PM

Guests

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.

#5
Latina.ecu

Posted 17 March 2008 - 01:53 AM

Newbie

Members
17 posts

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)

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

<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?

<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>

#6
Guest_Jordan_*

Posted 17 March 2008 - 03:35 AM

Guests

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.

#7
Latina.ecu

Posted 19 March 2008 - 02:14 AM

Newbie

Members
17 posts

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

/* 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 {

}

#8
Latina.ecu

Posted 19 March 2008 - 04:29 AM

Newbie

Members
17 posts

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

#9
Guest_Jordan_*

Posted 19 March 2008 - 04:35 AM

Guests

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

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

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

#10
Latina.ecu

Posted 19 March 2008 - 08:50 AM

Newbie

Members
17 posts

Do you mean something like this?

<!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:)

#11
Guest_Jordan_*

Posted 19 March 2008 - 12:38 PM

Guests

Your code should actually look like this:

<!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" />

<?php
$template_baseurl = $this->baseurl . '/templates/' . $this->template;
// add template css to JDocumentHTML
$this->addStyleSheet($template_baseurl . '/template_css.css'); 
?>

</head>

<body>

You can use that code whenever you need to include additional CSS files but you should also use it to include your main CSS file. This would be your main.css file from your code above.

#12
gragra

Posted 27 March 2008 - 04:04 PM

Newbie

Members
1 posts

I was searching the web on how to learn Joomla and came to the site. I am a newbie and most of the code seems like Chinese to me. Pls where is the page to start from. Thanks.