Exploring alternatives to Joomla’s default sidebar module position names
One thing that has bugged us for absolute ages is the default names of module positions used in Joomla templates. Specifically, the “left” and “right” positions, which are generally used in a templates sidebars.
The issue we have with the current naming convention is that it assumes that the sidebar’s position will always be on the left or right of the primary content.
This issue is especially transparent now with Morph, where you have a whole new level of flexibility when it comes to the different page layouts that are possible. (see the interactive layout demo)
Whether it’s setting the global site-wide default layout or changing the default layout for a specific component or for a specific page – gone are the days where you are constrained to having your sidebars “fixed” to either the left or right.
Why not just change them?
You may be thinking that if this has bugged us for so long why we haven’t just changed them to something more appropriate? Well, the answer is simple.
Joomla’s sample content uses these positions to assign the default modules and if we were to change these, it would take us further from having Morph work “out-the-box” on a default install.
This is all about to change. Over the past week i have been working on a new alternative to Joomla’s sample content, with the aim of not only making it easier for our members to get up and running with Morph, but also to act as a tool to learn from. Our aim with Morph has and always will be to help you “Go live faster” and we are hoping that the new sample content installer will help you do just that.
Specific details about the actual new installer will be posted soon, but in the mean time here is a quick summary:
“The sample content installer is a combination of the latest version of Joomla, a number of pre-installed and configured extensions that we have tried and tested to be useful time savers, along with well structured dummy content and menu items.
On the one side, it is a pre-configured Joomla install, aimed to help you get up and running quicker and on the other side, it is a tool for you to learn from. Think of it as a practical example of Morph in action.“
So now with this new generic Quick Installer, we are free to explore the idea of renaming the default module positions to something more appropriate.
Quick overview of Morph’s sidebars structure
Current sidebar module positions in Morph
Looking at the diagram above, the sidebar on the left is the “outer” sidebar, as it is outside of the main content block and irrespective of whether it is positioned to the left or right of the content, it always stays on the “outside”.
The “inner” sidebar, works a bit differently and as you can see below, sits within the main content block. Like the outer sidebar, it too stays “inside” the main content block irrespective of which side its set to.
The proposed sidebar position names
Based on how Morph’s sidebars are structured, our thinking is that the most appropriate name for the sidebars is aptly “outer1-5″ and “inner1-5″.
Outer (previously “left”) sidebar positions:
- Outer split menu (outersplitmenu)
- Outer sidebar position 1 (outer1)
- Outer sidebar position 2 (outer2)
- Outer sidebar position 3 (outer3)
- Outer sidebar position 4 (outer4)
- Outer sidebar position 5 (outer5)
Inner (previously “right”) sidebar positions:
- Inner split menu (innersplitmenu)
- Inner sidebar position 1 (inner1)
- Inner sidebar position 2 (inner2)
- Inner sidebar position 3 (inner3)
- Inner sidebar position 4 (inner4)
- Inner sidebar position 5 (inner5)
A note on the split menu positions
The top “split menu” positions in both sidebars are reserved for the split menu. We are planning on extending the default split menu implementation in Morph to use the parent menu item as the sub menu module heading.
For example, if the parent item in the top menu is Products, the sub menu module heading would be Products. For that reason, the position will be reserved for and only displayed when there are sub menu items set to display on any given page.
But wait, what if…
In case you are thinking “what happens for sites that choose not to use the new installer, like existing installs?“. Well, that is a good point and I’m glad you raised it ;)
Our thinking is that we could easily add a simple tool into Configurator that would allow you to move your existing modules assigned to the left/right module positions over to the new ones and vice versa.
Five module positions in each sidebar? Isn’t that overkill?
You may also be wondering why we are increasing the module positions to five in each sidebar (not including the split menu positions), but if you consider for a moment how Morph’s module chromes work, that each of these positions can host either a stack of modules (default), a side-by-side grid, an accordion block or a tab block you’ll soon understand why having the extra positions will be beneficial.
Based on the implementations and our own usage of Morph, we feel that five should be sufficient and if we find later that more are needed, increasing the number of positions in each is quick and easy.
So now, over to you. What do you think about the proposed names? Nothing is set in stone yet, as we want to hear what you guys think and any possible suggestions for how we can improve this concept further are most welcome.
Tags: discussions, framework, Joomla, Morph, templates
It looks like a really easy way to set up what I’ve spent ages doing by hand wsith my own templates. My one concern is the layout; is it table based, or is all based on CSS? I mainly design accessible websites, and try to avoid tables where possible.
p.s. I like the built in accessibility features like em-based text sizes.
Hi Joe,
Thanks for stopping by :)
Yes, Morph is completely tableless, with clean semantic, source ordered xhtml & css.
We have also done extensive work on Joomla’s html overrides to ensure that the frontend uses clean meaningful markup. You can see this in action by checking out the code in our themelet demos -> http://demo.joomlajunkie.com.
Also try increasing the font size in your browser and you will notice the entire layout is elastic ;)
Please don’t hesitate to ask if you have any other questions :)
Cheers,
Chris
Chris´s last blog ..5 Firefox plugins for website development
Hmm.. I thought we have been using this for awhile in Morph, arent we?
Or you meant outer sidebar is for the outer content sidebar that can be assigned left or right AND inner sidebar are the ones besides main content and inset which also can be assigned left or right?
I imagine if I haven’t use Morph, maybe this post isn’t this confusing. Or I already know it since I used Morph, and I just confuse the hell out of myself :P
Hey Ajmal :)
Morph currently uses the following module position names in the sidebars:
Outer sidebar:
- splitleft
- topleft
- left
- bottomleft
Inner sidebar:
- splitright
- topright
- right
- bottomright
Since both of those can be positioned on either side of the content, we are proposing renaming the module position names to something more appropriate (as outlined in the post).
Does that help clarify?
Cheers,
Chris
@Chris,
I get you now, I think. Hmm I think you guys should just go and set the trend. After all the current one is indeed confusing. See for now outer sidebar uses splitleft etc. for the time being, and if I want the outer sidebar to be on the right, it will still named splitleft (confusing right?)
Using inner1, inner2, outer1, outer2 make so much sense. And then the ability to assign inner/outer to the left or right is absolutely clearer.
The way I see it when people invest in Morph, like it or not they have something new to pick up, as a trade off of “go live faster”. See only Morph are being administered or controlled via Component section of Joomla backend (see thats new!), while all other templates by other devs use Template Manager. IMO, this “inner” and “outer” is one of those new things that all of us have to adapt.
Plus it makes clearer senses when we use inner-side or outer-side, and those two different positions are assignable to left or right of the template, instead of splitleft,left etc. are assignable to left and right??? side of the template?
btw I love inner and outer sidebar, one of the flexibilities of Morph that others don’t have.
Thanks Ajmal!
That was exactly our thinking and its something we have debated to great length.
Writing the documentation and referring to the left module position on the right hand side is bound to leave anyone scratching their head :P
Cheers,
Chris
Thank you guys as well.
Anyway, when I come to think of it, I guess the hard part is to tackle those simple questions that come up from users that have so used to left and right template accustomed from Joomla and other Joomla template.
One of the way is to educate that both inner and outer can be left or right. I like how you include that figure in this blog post to illustrate the structure of Morph. That would definitely give an idea to those users that came up with that sort of questions.
What I would do if I were you, I will come up with better illustration that differentiate inner and outer. Say inner is orange, and outer is green. Make both (inner and outer) appears in both side of the template (left and right) but with their distinctive colors. Put in;
outer-left-green | inner-left-orange | … (you get the idea)
Therefore it will be clearer that both outer and inner are assignable to left and right. Just my 0.02.
Like i said before, this is something that comes with Morph, like it or not. It offers great flexibility plus more more option to Morph users. Also, it suits the slogan of “go live faster”. It takes time to make a change, even if it’s “great” change :)
I was thinking that the names in Morph makes lots of sense and are less restrictive and specific. So what you propose above sounds good to me.
Thanks for your input Cristina :)
Hi everyone,
Maybe this is not the best ocation for this but I need to know if you know an extension menu for a joomla site that can make this button on the left (TWEETS) or somthing similar because I need to link it to a form and I want it to be allways visible.
Please help me!
Yunior