Discussion: Blank Joomla 1.5 template

Waseem Sadiq · Post by **Waseem Sadiq** » Sun Aug 12, 2007 3:18 pm

Hi Folks,

For anyone who's interested, a couple of weeks ago I created a blank Joomla 1.5 template with the following features:

Tableless Validating XHTML/CSS based layout
SEO Source Ordering
Collapsible left and right columns
Eight additional collapsible module positions
Suckerfish dropdown menus
Suckerfish flyout left column menus
Suckerfish flyout right column menus

This basic template has been tested and works on the following browsers:

Windows Platform:
MSIE6
MSIE7
Firefox
Safari

Mac OSX:
Safari
FF

Adding the following features would be a pretty easy task:

Fixed/Fluid width and text size styleswitching
Rounded corners

I had intended to write up documentation to go with this basic template and publish the whole lot on my blog site http://s.imp.ly/joomla but when the Joomla project asked for volunteers to help write the new Joomla 1.5 template documentation I instead offered my services to Chris and the team.

I intend to offer the blank template for download to anyone who wants it. I've offered it to the project and my offer has been warmly received, once the volunteers have been finalised and the template documentation project kicks off in earnest then I'm sure we'll all be able to build the best template documentation there is for any CMS on the market.

Hope this helps someone

Waseem

Waseem Sadiq · Post by **Waseem Sadiq** » Fri Aug 17, 2007 2:10 pm

Hi Guys,

I wanted to provide everyone with an update on my blank skeleton template. The good news is that it is 99% finished, I have one thing left to do, I had added a JQuery styleswitcher to switch between narrow and wide layouts, but as the Joomla 1.5 framework already makes use of mootols I thought it would be more advantageous if I used a mootools style switcher insted - that way we don't have to load an extra library.

The skeleton template is exactly what it says on the tin - it's a blank template intended to provide the basic layout for a Search Engine Optimised (SEO) SOURCE ORDERED template. It has neither background nor indexed images and it'll come un-coloured allowing one to start editing from a "clean-slate". In the spirit of Joomla 1.5 and open source I've decided to release the template under the same GPL/GNU License as Joomla itself.

The template has the features I listed in my previous post - plus:

Fixed narrow width / fixed wide width - with styleswitcher
16 collapsible module positions
logged in user only message - to demonstrate the Joomla 1.5 replacement for the old ($my->id) check
Left-to-Right language aspect / Right-to-Left language aspect
On page anchor links - to demonstrate how to add anchor links in Joomla 1.5

I'm working on the styleswitcher this afternoon and hope to have the template packaged for release by Monday (I'm not working this weekend for a wee change

)

As an added bonus, I've also created a Joomla 1.5 version of the famous templateDetails.xml generator - I need to tidy up one piece of code and then I'll release that too.

Hope this helps someone,

Waseem

**Edit**

I almost forgot to mention, that the XHTML validates and that the CSS validates as far as is possible.

There are some msie6 specific style rules / hacks which do not validate. These have been moved to an ie6 specific stylesheet
There is a clearfix CSS declaration which doesn't validate due to the "inline-block" declaration and (again moved to a specific stylesheet for css clearing rules)
there are several warnings due to the fact that background colours have deliberately not been declared - these in themselves do not invalidate a css stylesheet and should be organically removed once the skeleton is fleshed out.

quiquedcode · Post by **quiquedcode** » Fri Aug 17, 2007 2:20 pm

Hi Waseem
Where can we see the template you created ? will it be available in the default joomla 1.5 stable release installation ?

Waseem Sadiq · Post by **Waseem Sadiq** » Fri Aug 17, 2007 3:05 pm

Hi Quiquedcode long time no see my friend

I don't currently have the skeleton template on an accessible demo anywhere (it's on my local server), I can easily stick a copy on my sever though if anyone wants to see it.

And as for your second question I don't think it'll be released with the default joomla 1.5 stable release, unless the powers that be decide that it would be a useful thing to include in the package. I'm happy to donate it to the project - that was my intention and motivation in creating the template in the first place.

Waseem

Waseem Sadiq · Post by **Waseem Sadiq** » Fri Aug 17, 2007 10:53 pm

I was going to wait until Monday to release the template but as we have a new home for Joomla 1.5 template related stuff I've uploaded it there

http://forum.joomla.org/index.php/board,466.0.html

Enjoy,

Waseem

Jenny · Post by **Jenny** » Sat Aug 18, 2007 12:12 pm

Thank you so much Waseem! I am really looking forward to digging in deep to templates for 1.5 and your example is a great place to start.

Waseem Sadiq · Post by **Waseem Sadiq** » Sat Aug 18, 2007 12:35 pm

You're welcome Jen

It was about time I gave something useful back to this great community.

Waseem

Post by **JoeJoomla** » Sat Aug 18, 2007 2:39 pm

Thanks Waseem. It's much appreciated.

swiftly · Post by **swiftly** » Sat Aug 18, 2007 5:08 pm

maybe a stupid question, but what exactly is the advatage of this template compared to thestandard template shipped with Joomla 1.5 RC1?

Jenny · Post by **Jenny** » Sat Aug 18, 2007 5:34 pm

swiftly wrote: maybe a stupid question, but what exactly is the advatage of this template compared to thestandard template shipped with Joomla 1.5 RC1?

Having a blank template means it is just the structure, some call it wireframe, or just the base functionality of the template. What you add is the design, colors, images, etc.

Edit: Please also see these posts from Waseem regarding his template:

http://forum.joomla.org/index.php/topic ... #msg945077
http://forum.joomla.org/index.php/topic ... #msg952351

swiftly · Post by **swiftly** » Sat Aug 18, 2007 7:15 pm

Yes, i understand, thanks for explaining...i am learning..

Oh, by the way, it is not completely blank, as there is some hard html/php to direct my user to the (wrong) standard module for user profile updating.

btw. Waseem, it sound you ar such a nice guy doing this all for free...

thanks [Mod edit - I removed offtopic comments that were added to this post. Please stay on topic.]

Edit: no critical remarks are allowed.....

quiquedcode · Post by **quiquedcode** » Sat Aug 18, 2007 7:20 pm

Awesome!
Thanks Waseem

kili · Post by **kili** » Sat Aug 18, 2007 9:53 pm

Yeah thanks Waseem. All I need now is a tutorial written for complete dummies lol..

Many Thanks

Kili

Waseem Sadiq · Post by **Waseem Sadiq** » Sat Aug 18, 2007 9:57 pm

swiftly wrote: Yes, i understand, thanks for explaining...i am learning..

Oh, by the way, it is not completely blank, as there is some hard html/php to direct my user to the (wrong) standard module for user profile updating.

btw. Waseem, it sound you ar such a nice guy doing this all for free... thanks [Mod edit - I removed offtopic comments that were added to this post. Please stay on topic.]

Edit: no critical remarks are allowed.....

Hi Swiftly,

The template is meant only as a blank skeleton, the php within the template is there to show some of the new code required for a Joomla 1.5 template.

I didn't really do this work for free

as many people around here know I earn my living from Joomla so I've been paid many times over for this knowledge, I'm just sharing it back with the community from which I learned it in the first place.

Ps. I don't mind constructive criticism, if there's something you'd like to see added/taken out of the template please just let me know and I'll consider it for future versions.

Waseem

swiftly · Post by **swiftly** » Sat Aug 18, 2007 10:20 pm

The template directs users to the profile page, from the standard joomla build in profile mannager. I got CB on my site, as many others have. Maybe the handling of this would better be taken out from the blank template.

Waseem Sadiq · Post by **Waseem Sadiq** » Sat Aug 18, 2007 10:39 pm

Point taken

I'm not certain that the point of this template has been properly explained, so let me try..

I created this template not so that it could be used straight away on a production website, it's intended as a wireframe for the user (that's someone who's downloaded it not the end user of a website) to edit.

I understand your point about the link to the registration page but that's really just there to demonstrate the php logic required to determine whether a user is logged in or not - it should be very easy for anyone who doesn't need that feature to edit the template and take it out.

Waseem

Waseem Sadiq · Post by **Waseem Sadiq** » Sat Aug 18, 2007 10:42 pm

JoeJoomla wrote: Thanks Waseem. It's much appreciated.

Almost missed your post there Joe

You're most welcome my friend

(same goes to kili and quique)

Waseem

NickW-ZA · Post by **NickW-ZA** » Wed Aug 22, 2007 9:38 am

SOLVED: My own ignorance was battering me about the ears. (Detail not included)

Good day Waseem

( I know it's been all of a whole day since we spoke, so long

-- i.e. http://forum.joomla.org/index.php/topic ... #msg958023 )

I don't want to clutter up this thread with a request that may simply be a newb showing his ignorance so I've no problems if this post gets shifted to another thread...

I wanted to clarify something with regards to the Blank Template. Is this an "accordion" type menu that is setup? Or is it a suckerfish?

I'm confused because what is happening at the moment is, I've setup up my menu items, and if I click a menu item that has children, then only on THAT page can I see the on-hover dropdown working for that parent item. But if I am on a different parent-level item (i.e. a childless one), the dropdown for the other parent (the one with children) doesn't work.

Just to find out if this is the way it is meant to be. ( I'm generally confused about 1.5

alright, I was confused even about 1.0) So maybe I'm making the wrong assumptions.

Thanks, and sorry if this post is in the wrong place.

BR,

-Nick

hlarsen · Post by **hlarsen** » Wed Aug 22, 2007 6:11 pm

Hi -

First: Thanks for your effort and for making it available for all -
Second, a request: Would it be possible for you to add fluid (100%) width as an option?

Cheers and thanks again -

Waseem Sadiq · Post by **Waseem Sadiq** » Wed Aug 22, 2007 7:47 pm

Hi,

It's possible to add fluid width as an option but it would mean rewriting the template slightly. Fluid width and Source Ordering don't (in my experience) play well together, unless using quite advanced CSS to place the left and right columns in the border of the centre column.

If enough people request it I'll build an alternative template which isn't source ordered but allows for fixed narrow, fixed wide, and fluid width setting and add that as an another download (and/or selectable as a template parameter in Joomla 1.5)

Waseem

72dpi · Post by **72dpi** » Tue Aug 28, 2007 3:58 am

fantastic stuff Waseem =)

Slap some color and images in there, and you are done for the template COmp.

Thanks for sharing, I am fine with Joomla 1.X templates, but 1.5 is really new, so gotta get my head around it, thanks to u I now can.

Cheers mate!

Waseem Sadiq · Post by **Waseem Sadiq** » Tue Aug 28, 2007 11:39 am

Ur welcome 72dpi

Waseem

hlarsen · Post by **hlarsen** » Sun Sep 02, 2007 7:25 pm

Hi Waseem -

I've started to play around with your excellent contribution and I don't know if you take technical questions, but here goes: How do I center the User3-module position - I am trying to add a centered 'top'-'dropdown'-menu in module position user3, but for some reason all my 'tricks' won't work - Help would be deeply appreciated -

Cheers and thanks in advance

Waseem Sadiq · Post by **Waseem Sadiq** » Sun Sep 02, 2007 8:46 pm

Hi hlarsen,

As this template uses the suckerfish dropdown technique it's not easy to centre the menu list. That said however it is doable using slightly more advanced CSS.

What you'll need to do is use the CSS display:table-cell; property, like so:

Code: Select all

		#nav {  
			text-align: center 
		}

		#nav ul { 
			display: table;
			margin: 0 auto;
		}
		
		
		#nav li { 
			display: table-cell;
			position: relative;
			width: 11em; /* salt to taste */ 
		}
		
		#nav a { 
			display: block;
			width: 11em; /* salt to taste */
		} 
		
		#nav a:hover {  }

		#nav li ul { 
			display: block;
			position: absolute; 
			width: 11em; /* salt to taste */
			left: -999em;
		} 
		
		#nav li:hover ul { left: auto }
		
		#nav li li, #nav li li a { display: block }
		
		#nav li li a { width: auto; padding: 0 }

You will also have to add this code to the ie6 only stylesheet:

Code: Select all


		#nav ul { display: inline-block }
		#nav li { display: inline }
		#nav a { display: inline-block }
		#nav li:hover ul { 
		top: 1.3em; /* salt to taste*/
		left: 0;
		}

Your other option would be to give the ul a defined width (add up the width of your top level menu items) and add your code like this:

Code: Select all

		#nav ul { 
			width: 450px; /* salt to taste */
			margin: 0px auto;
		}

Hope this helps,

Waseem

hlarsen · Post by **hlarsen** » Mon Sep 03, 2007 3:10 pm

Thanks a ton -

Cheers

Rapunzl · Post by **Rapunzl** » Tue Sep 04, 2007 1:24 am

Waseem Sadiq wrote: Hi,

It's possible to add fluid width as an option but it would mean rewriting the template slightly. Fluid width and Source Ordering don't (in my experience) play well together, unless using quite advanced CSS to place the left and right columns in the border of the centre column.

If enough people request it I'll build an alternative template which isn't source ordered but allows for fixed narrow, fixed wide, and fluid width setting and add that as an another download (and/or selectable as a template parameter in Joomla 1.5)

Waseem

It's possible to have both with a little creativity. Check this out: http://webhost.bridgew.edu/etribou/layouts/skidoo_too/

PS- Add me to the list of requestors

Waseem Sadiq · Post by **Waseem Sadiq** » Tue Sep 04, 2007 8:18 am

Hi Rapunzl,

Ruthsarian layout is exactly what I was talking about in my previous post

I felt that the CSS required would be a little too advanced for the average newbie hence I steered clear for this template.

Waseem

Ps. request noted

Rapunzl · Post by **Rapunzl** » Tue Sep 04, 2007 11:14 am

Waseem,

Wouldn't the average user just need to keep their important stuff in the horizontal navigation?

Rapunzl

Waseem Sadiq · Post by **Waseem Sadiq** » Tue Sep 04, 2007 7:27 pm

Hi Rapunzl,

I think we've got crossed wires here and are talking about different things

This is the post I was referencing...

Waseem Sadiq wrote: Hi,

It's possible to add fluid width as an option but it would mean rewriting the template slightly. Fluid width and Source Ordering don't (in my experience) play well together, unless using quite advanced CSS to place the left and right columns in the border of the centre column.

If enough people request it I'll build an alternative template which isn't source ordered but allows for fixed narrow, fixed wide, and fluid width setting and add that as an another download (and/or selectable as a template parameter in Joomla 1.5)

Waseem

Pope Pius X2 · Post by **Pope Pius X2** » Wed Sep 05, 2007 2:55 am

Hi Waseem, great addition to the community which lets me improve my templating and theming skills. Just a couple of questions. Firstly, in the menu css file, I'm struggling to add a separator for the menu items on the top menu.

Code: Select all

#mainlevel-nav li a, #mainlevel-nav li a:visited, #nav ul.menu-nav li a, #nav ul.menu-nav li a:visited {display:table; text-decoration:none; color:#fff;width:104px; height:23px; text-align:center;border:0px solid #fff;line-height:20px;overflow:hidden;}

The code normally is what you see above, but I'm adding this piece of code on to the end of the last part to no effect. Can you see what I'm doing wrong?

Code: Select all

background: url(../images/seperator.gif) top right no-repeat;

Also, when changing the values of narrow.css, when I try to make #page smaller, the right menu is squeezed to the bottom (as in on the correct side but below the main content div), and if any changes are made to the other values both menus, left and right squeeze to the bottom. Any ideas?

Thanks for your great work.

The Joomla! Forum™