Protostar as a base for your template, steps for coding up a design with Joomla 3
5
What Next?
...Well, that depends on your design...
...Perhaps start chopping it up...
...lets start with an example.
Hello, I'm Andy Gaskell
No, not at all
That's fine, but can it do any sort of site? Does it have to look normal?
You can just use it to code away as you like, as little or as much CSS as you need.
<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>
What is Protostar?
https://twitter.com/AndyGasman
http://www.ssofb.co.uk
- 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.
Don't forget to modify your template XML file
So, what next?...
Well, just carry on working your design in with CSS
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
Protostar as a base for your template, steps for coding up a design with Joomla 3
Thanks for Listening
Active variables, useful in the CSS
Code related to template options can just be stripped out
Code related to template parameters, colours, fonts, logo and title has been stripped out.
This really cleans up the header
Adding JavaScript and CSS
So, you have a design, and you need to turn it into a template, let's start with Protostar.
Code related to template columns can be useful, depending on your design
Why Protostar
Protostar uses template params for logo and site title, I tend to just put these in a module, so would strip this out
Any...
- Questions
- Ideas
- Comments
- Examples
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.
Right, so lets have a look at the code :)
Bit of an anatomy class here
So we can strip it down, before we build it up again.
This is it, in a cut-down with just six modules
The first row, the header, is just divided in two even halves, with a modules in each
Then we have the navigation
You can see the active variables, getting added to the body tag, whihc is great to CSS style based on these
https://twitter.com/AndyGasman
A row for the main content
The logo is done via the template params.
I tend to just set it up with a Custom HTML module
We'll check if there is a left column module, and if so, we'll show that column
http://www.ssofb.co.uk
You can see the content here
Then the footer, just divided in two even halves, with a modules in each
And the footer, and that's it.
- 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.
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
Getting Started, The Basics
Copy the "templates/protostar"
Edit the "templateDetails.xml"