Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


Protostar as a base for your template, steps for coding up a design with Joomla 3

Presentation for Joomla! Day UK, 5th and 6th October 2013

Andy Gaskell

on 5 November 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Protostar as a base for your template, steps for coding up a design with Joomla 3

What is Protostar?
Protostar is the default template in Joomla 3
Created by Kyle Ledbetter
For more general info on using Protostar in it's default format, see "A Guide to Joomla 3's Protostar Template" on Andrew Eddie's "The Art of Joomla" site.
Why Protostar
It's all bootstrap, for a nice clean & light framework.
Only one CSS file, not clutter.
A sensible number of module positions.
Responsive, out of the box.
Can modify it a little or a lot.
The responsive grid fits a lot of designs.

Basically, all you need, without too much you don't need.
Hello, I'm Andy Gaskell

<boring intro> I'm developer with a design background, developing on Joomla since the Mambo days.

Over the years I've produced a wide range of Joomla sites for financial corporations, football clubs, MPs, non-profits, news outlets, business directories, e-learning, the NHS, hospitality and a range of other clients. I typically work for digital agencies to assist and extend their development teams. My company is call SSOFB.

I live Aberdeen, but grew up in London, and have also lived in Edinburgh, Sydney and Glasgow. </boring intro>
So, you have a design, and you need to turn it into a template, let's start with Protostar.

Protostar as a base for your template, steps for coding up a design with Joomla 3

Getting Started, The Basics
Copy the "templates/protostar"
Edit the "templateDetails.xml"
Rename Folder
Edit the...
<name>, <author>, <authorEmail> and
What Next?
...Well, that depends on your design...
...Perhaps start chopping it up...
...lets start with an example.
Website for Jim McGovern MP
Designed by Pukka Digital in Forfar
Chopped into rows, here we have 9, each one of these will go in a..
<div class="row-fluid">
Figure out your modules....
I tend to do this on paper
And we'll need to work out how wide they all are.
This is as a 12th of the total width
Right, so lets have a look at the code :)

Bit of an anatomy class here
Active variables, useful in the CSS
Code related to template options can just be stripped out
Code related to template columns can be useful, depending on your design
Protostar uses template params for logo and site title, I tend to just put these in a module, so would strip this out
Protostar also has template params for some colours and the font, I would strip this out too.
There is quite a bit of code in the head tag for this.
The logo is done via the template params.
I tend to just set it up with a Custom HTML module
You can see the content here
And the footer, and that's it.
You can see the active variables, getting added to the body tag, whihc is great to CSS style based on these
Adding JavaScript and CSS
So we can strip it down, before we build it up again.

This is it, in a cut-down with just six modules
Code related to template parameters, colours, fonts, logo and title has been stripped out.
This really cleans up the header
The first row, the header, is just divided in two even halves, with a modules in each
We'll check if there is a left column module, and if so, we'll show that column
You can see the content here
Then we have the navigation
Then the footer, just divided in two even halves, with a modules in each
A row for the main content
Don't forget to modify your template XML file
We will need to adjust the module positions to match what we put it in and clear out the ones we're not using
You are probably not using the language files, so could take them out
Are we can removed nearly all of the template parameters too
So, what next?...
Well, just carry on working your design in with CSS

That's fine, but can it do any sort of site? Does it have to look normal?
No, not at all
You can just use it to code away as you like, as little or as much CSS as you need.
Thanks for Listening
Full transcript