Creating custom pages in Joomla

[rpacdn]

Can someone please explain how to create a custom page/article in Joomla. I understand that one can create Article and place text and some images in the space using the TinyMCE or JCE or what have you.

But what if I wanted to add some nifty things on the page, like div based boxes etc. Say, I want to create a table using DIVs in the article page and display a bunch of images (110px*160px) in the div boxes, and then I also want to place a little arrow/banner at the top left corner of those pictures to highlight a number or something of that sort.

Here is what the code would look like if I do it in Dreamweaver

Code: Select all

<div id="year">2011</div>
<div class="clearboth"><!-- --></div>
	<div class="child">
    <div class="ribbon_container">
    	<div class="ribbonRedNew"><div class="picCount">23</div></div>
    </div>
	 <img  class="thumb" STYLE="top:-72px;"src="forIndex/picture_70_s.jpg" width="100" height="150"/>
	</div>

	<div class="child">
	<p>	</p>
	</div>

	<div class="child">
	<p>	PIC  </p>
	</div>

	<div class="child">
	<p>	PIC  </p>	
	</div>
    
    <div class="child">
	<p>	PIC  </p>	
	</div>
    
    <div class="clearboth"><!-- --></div>
    
    <div class="child2">
	<p>PROGRAM 1</p>
	</div>

	<div class="child2">
	<p>PROGRAM 2</p>
	</div>

	<div class="child2">
	<p>PROGRAM 3</p>
	</div>

	<div class="child2">
	<p>PROGRAM 4</p>	
	</div>

	<div class="child2">
	<p>OTHER</p>	
	</div>
</div>

And here is the CSS DIV code that I used

Code: Select all

.ribbon_container {
	 position: relative;
	 margin-left:8px;
	 background-repeat: no-repeat;
	 border-bottom: 0px solid;
	 height: 70px;
	 width:80px;
	 z-index:2;
}
.ribbonRedNew {
	 position: relative;
	 margin-left:auto;
	 background-image:url(../forIndex/ribbonRed.png);
	 background-repeat: no-repeat;
	 border-bottom: 0px solid;
	 height: 70px;
	 z-index:2;
}
.picCount {
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;	
	font-size:22px;
	font-weight:bold;
	color:#fff;
	padding-top:20px;
	letter-spacing:4px;
}

.child {
	width: 180px;
	height: 180px;
	display: inline-block;
	letter-spacing: normal;
	font-size: normal;
	white-space: normal;
	text-align: normal;
	vertical-align: middle;
	margin: 0 auto auto auto;
	border: solid 1px #666666;
	background:#333333;

    /* Do rounding (native in Firefox and Safari) 
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;*/
}
.child{
	*display: inline;
	*margin: 0 1px 0 1px;
}
.child p
 {
	text-align:center; 
 	vertical-align:text-bottom; !important
 }
.child2 {

	width: 180px;
	height: 40px;
	display: inline-block;
	letter-spacing: normal;
	font-size: normal;
	white-space: normal;
	text-align: normal;
	vertical-align: middle;
	margin: 0 auto 20px auto;
	border: solid 1px #666666;
	background:#333333;
}

.child2 {
	*display: inline;
	*margin: 0 1px 0 1px;
}

And here is what the output looks like:

sample.png

I am trying to recreate the page just like that in Joomla, using DIVs please, not tables. How can I do that? Is there a way to create an Article template with those div boxes and then I can simply place the pics as required?

Thank you in advance.

[toivo]

Have you tried adding the CSS code to your template and the HTML to a page in HTML code view?

[rpacdn]

That is what I want to learn how to do in Joomla. I don't think I can add css straight in the page itself with the <script type="text/javascript"> or <style. tags. So far I couldn't find anything that would allow me to create essentially a template block that I can call up to recreate that block of div when and where I need to insert it. That would've been great.

How is the weather in Syndney. It is pretty darn cold here in Canada!! Thanks mate!

[toivo]

The Template Manager allows you to edit the CSS.

The summer in Sydney has so far been the coldest in 60 years, and it has been raining a lot during the past month.

[rpacdn]

I am assuming the one template.css contains ALL the css used by ALL the sites in the site. Is there a way to break out the CSS to separate files, rather than making the template.css too large with styles that are only used on very few pages. It is also easier to edit the CSS, if we have them in separate files, easy to find the style, easy to work on a sample page in Dreamweaver and then replace it with the new one etc.

At this point, I am sure we will just be very content with the temperature that you call as cold. :-)
Thank you.

[toivo]

If you look at the file index.php of your template, you will find lines like this:

Code: Select all

<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->baseurl(); ?>templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/template.css" type="text/css" />

You can add your CSS file to the template using the format from the last line.

[rpacdn]

Got it. I suppose, with that same approach, I should be able to add a new line like this to keep my CSS on a separate file. I will try it.

Code: Select all

<link rel="stylesheet" href="<?php echo $tmpTools->templateurl(); ?>/css/mystyles.css" type="text/css" />

Just for clarification, I understand that the module positioning and selection of items on each module defines what will appear on each page. But does all pages that appear on a Joomla site use index.php as the baseline for information? I am still thinking in the traditional sense where each page is it's own baseline, that is what is defined or added in that page is what appears on the screen. But for Joomla, I suppose it uses index.php with all it's module position definitions acts as the baseline. I think I just need few trials and errors to fully comprehend the Joomla concept. Thank you for you help.

[toivo]

After you have created a page, you associate a page with a menu. The menu does not have to be visible, it can be a so called orphan menu. Once your page is linked to a menu, you can go to the Template Manager and assign that menu item to a particular template by selecting that menu item from the list of all available menu items. Press Ctrl to keep the existing assigments and add a new one.

The module positions of the template are now available and if you have several templates, or copied variants of one template, your pages can look different.

In Joomla 1.7 introduced styles, where the Template Manager allows you to clone styles from templates and you can then selecte a particular style when you assign a menu item to a template.

[rpacdn]

Well, for a moment I thought I got it, but having read your last post, I am bit confused now. I am following what you are saying in terms of assigning an orphan menu and a template to the menu item so that it will use a particular template when that page is ever called up. But I am having a hard time seeing the full picture of all of it working together. I wonder if there any tutorials that will kind'a walk through those steps of creating a customized page with everything that you mentioned in your postings?

If not, would you be kind enough to do a quick demo with some screenshots that will make it lot more easier to understand. I will search the net anyway.Thank you.

By the way, I placed my divs in a separate file along with all the other CSS and added the css by adding the line in the template_css.css file.

Code: Select all

/* CSS file with custom CSS selectors for the few of the my pages */
@import url("my_custom.css");

Then I added the DIV code from the original post to a new article and featured the article to see it on front page (for testing purpose for now) and it worked!!

The difficult part was that the JCK editor would not show the DIVs at all, instead all you get is the raw text from your pages, which makes it difficult to design. So I basically used Dreamweaver to design the page and cut and paste the required portions only to the article section in Joomla. That is frustrating in that you have to create the page elsewhere and blindly cut& paste the portions to make the article work!