How To Develop a Template for Anahita

The focus of Anahita Social Engine 0.9.3 release was mainly to improve the template structure, views, and developing a set of standard CSS tags for the social engine and other existing applications. Before this release, our implementation was trying to accommodate every possible case scenario, but soon we learned that it was rather adding more to the complexity of the system than providing new options to the developers, so we decided to simplify, simplify, simplify instead!

We have also developed the first set of CSS tags that are descriptive and name-spaced properly so they won’t conflict with any other Joomla extensions that will be running on the same system.

So How Different is an Anahita Template with a Joomla Template?

The answer is not much! Developing template for Anahita is not much different than developing a template for Joomla, except one issue: Joomla 1.5 is natively using mootools 1.1 as the javascript framework and Anahita is currently using the mootools 1.2.3. So you’ll need to include these files in the index.php of your template:

<script src="<?php print $this->baseurl ?>/media/plg_anahita/js/mootools.pack.js" />
<script src="<?php print $this->baseurl ?>/media/plg_anahita/js/anahita.js" />

Basically anytime that Anahita renders a page, it switches from the older 1.1 to the new 1.2.3, so if there are any modules that are developed using the older version of mootools, may not work properly withing the Anahita environment.

Other than that we haven’t changed the nature of how Joomla! 1.5 framework behaves and as a matter of fact extended the possibilities to make the template development for Anahita even simpler and more fun.

You Get To Enjoy the View!

Anahita is developed following a very clean and structured MVC code thanks to the Nooku ™ Framework, which means all the views rendered by the Anahita Social Engine, Extensions, and Social Applications can be overwritten at the template level. That is nothing new since Joomla! 1.5 is already providing that functionality to us and we’ve just made sure that it has been used to its full potential.

View-layout-0.9.3

That means if you don’t like the classic social network look for your project, you can restructure the HTML outputs entirely and come up with your own version.

No Funny Ways To Incorporate the CSS

Have you seen how some Joomal extensions come up with funny and inconsistent ways to skin their components? For Anahita we have came up with a simple convention.

Anahita Social Engine, Extensions, and Social Apps all come with their own default style sheet that will be stored in the media/css/{com_extension_name}/ directory. For example:

  • media/com_socialengine/css/socialengine.css
  • media/com_discussions/css/discussions.css
  • media/com_photos/css/photos.css

What they provide is a set of CSS styling for the user interfaces with a neutral grey & white look & feel that doesn’t’ compete with the colors of your existing template. You can also overwrite the default stylesheet at the joomla template level. For example to completely overwrite the:

media/com_socialengine/css/socialengine.css

by just creating a file here:

templates/yourtemplatename/css/com_socialengine/socialengine.css

This is the same case for all other Anahita based components such as photos and discussions. To overwrite their default CSS files just create the following files respectively

  • templates/anahita/css/com_discussions/discussions.css
  • templates/anahita/css/com_photos/photos.css

One note about socialengine.css. socialengine.css  is a global styling for all the Anahita Social ™ apps and many of the tags in that file are and can be reused within the social application layouts. it’s always included automatically whether you are within the social engine environment or a social application environment.

If you decided to overwrite a tag at the template level intead of overwriting the entire stylesheet file, just include a new stylesheet file with a different name in your template’s

/html/componentname/viewname/layoutname.php

that way Anahita will still include the file from the media folder, yet you still get the chance to overwrite only some of the tags in your newly created CSS file.

All CSS Tags Are Name Spaced

All the tags are names spaced so they won’t possibly conflict with other components layouts. Here is the convention for name spacing the CSS tags:

.an-se-people

“an” stands for Anahita, “se” stands for Social Engine, and the class name follows.

as you can see they are dash “-” separated.

for the social apps you can use:

.an-photos-albums

“an” stands for Anahita, “photos” is the component com_photos, albums is the class name

Don’t Have to Squish The Application Interface In The Middle!

A Joomla! component as an application often needs more room than just the main component area. We have seen scenarios that an entire discussion board is squished in the middle component area and that just doesn’t look right. In Anahita we have an easy solution to that problem:

Traditionally we thought template positions (top, left, right, bottom, footer, user1, user2, … ) were used only for Joomla modules and that made sense if Joomla was mainly used as a CMS for publishing web pages, but when we are using Joomla as a web application framework, sometimes we need modules that only show on one particular screen rendered by a component. Anahita Social Engine has many screens and therefore developing modules for every page is a lot of work right?

We came up with a simple way to let the component inject HTML code snips (partials) to the template positions while rendering a UI. These partials look just like modules. Take a look at the following screen capture:

Anahita Component Partials

The green regions are not modules. They are code snips (partials) injected by the component in those positions. This will save you lots of time from developing modules, configuring and maintaining them. The red region is a module pushed down by the component partial. You can have the component inject partials under the modules if you like.

So how do we do that in Anahita? in your component view layout simply do this:

<component:right>
<div>
<?= @$gadget->render('socialengine', 'socialcloud') ?>
<?= @$gadget->render('socialengine', 'publicmessages') ?>
</div>
</component:right>

and this is how you can retrieve them in your template index.php file:

<?php if( ($this->countModules('right') || $this->countModules('component.right')) ): ?>
<div id="right">
<jdoc:include type="modules" name="component.right"  />
<jdoc:include type="modules" name="right" style="rounded" />
</div>
<?php endif; ?>

and what that does is to inject the generated HTML for the social cloud or public messages in the template position “right”. If you are still confused, here is the generic code:

<component:position_name>
HTML code goes here
</component:position_name>

and since all the layouts can be over written at the Joomla template level, that means you have the freedom to rewrite and change the positions that the code snips are injected too.

Here is a question: what if a position that component is trying to inject the HTML code into didn’t exist? well, in that case the <component:position_name> will be ignored and that code snip will render within the component area.

You have noticed that because we are using the Nooku ™ Framework you don’t have to use

<?php print $this->gadget->render(...) ?>

and instead you can use:

<?= @$gadget->render() ?>

You can also use @script($path) to include a javascript file, @style($path) to include a style sheet, @route($URI) for creating a SEF URL.

Questions? Comments?

Please post them here or ask us on twitter @anahitapolis

7 Replies to “How To Develop a Template for Anahita”

  1. The partials functionality is very impressive as is the mootools\nswitching. Anahita really is good. Will all open social apps soon to be created for the Ning network (since they have now realease ning apps) be able to work with Anahita.

  2. @lance,

    True, right now we are considering and following the Open Social guidelines and philosophy while we make sure we are not exclusively married to it. At this moment we are focused to perfect the platform and API first. We also have to finish migrating to the next release of Nooku Framework which is 0.7 before investing in developing APIs for social apps that are not running directly inside the Anahita Social Engine container.

  3. hello Rastin Mehr and all, I am visitor here and after about an hour of reading almost every page of Anahita, I can quite say this component or engine is super-impressive!

    I couldn’t find the right post to get this out so I hope you guys dont mind I am posting this here. I want to share my overall feedback after went through this whole Anahita thing:

    What catch my attention the most was the scalable Amazon cloud option and injected module, Gadget (could use some explanation on Gadget). These are really the killer-features IMO.

    Another thing is I am surprised to see that Anahita doesn’t utilize real-time (or relative) timestamp just like every others do. Namely Facebook, Twitter and more. Even some other Joomla’s components like k2, etc. also make use of this timestamp format.

    From the option of scalable Amazon sw3, we could assume we are looking at potentially large pool of users. This pool could mean the end users could consist of regional or even worldwide user base. This is when relative timestamp comes in. 4 hours ago means its 4 hours ago, regardless where we are in the globe.

    The problem with typical Joomla components (BuddyPress etc. already utilize relative timestamp as option) are indeed, this. Yes there is timezone setting. But that just means, whenever users login/logout, the time will show differently when users’ local time aren’t the same as server’s timezone setting.

    Another thing that I found missing is, the backend screenshots from Anahita.

    From my quick run through, this minimalist looking yet extensible social engine are doing everything so perfectly up to this point. Hopefully some issues or challenges could make this goddess matures even faster and better! 🙂

    my $0.02. Thanks for your time.

  4. upon my comment above,

    I overlooked two most interesting features listed by Anahita core devs.

    1) Translatable Interface & Messaging! My goodness looks like Anahita has been planned flawlessly. Again with that Amazon sw3 in mind, having multiple languages support is much need. This is something that other devs could easily overlook.

    2) Facebook Connect – import friends and Activity Stories. This has not been done by any Joomla social components out there yet. None. If anything really do this, then Anahita is really the pioneer of this feature.

    seems like killer-features are almost half of list. I could say this is not just another great looking Joomla community handler. Anahita has substances, from the look of it.

Comments are closed.