In January 2011 when we released Anahita 1.5 it was mainly a distribution of Joomla! 1.5 with Anahita libraries installed on it. We even had the intention of bringing compatibility between Anahita and the templates and extensions that Rockettheme was distributing. However soon we learned that the best strategy for the Anahita project would be dropping all the Joomla code and rewriting all the required parts using Anahita’s native framework. That also meant the compatibility between Anahita and RocketTheme extensions was going to be broken, because Anahita was no longer a Joomla! distro and she was on her path to become a stand alone technology.

In Anahita 2.0 we were using very little of what Gantry framework was providing us so it was time to completely remove it from Anahita. I must say that Gantry has been a great concept, however it was really built to compensate with the shortcomings of Joomla! as well as creating an environment for the Rockettheme specific extensions.

For the past year the Gantry framework has been providing us a 960 grid system and means to manage it. In fact Gantry provides a lot more that are really useful in a Joomla environment, however we have been removing more and more of what was left of Joomla code from Anahita and writing all the required parts using Anahita’s native libraries. So in Anahita 2.0 very little of Gantry was being used while we were carrying around the entire library and codebase. It was time to build our own native template framework suitable for Anahita and say goodbye to Gantry.

We would like to thank the Rockettheme team for developing Gantry; such a great technology that helped us go through last year. In fact we did get some inspiration from the Gantry while developing the Anahita’s grid management system and bootstrap. We just didn’t need the other 90% of Gantry that we were not using. If you are a Joomla, WordPress, Drupal, or PHPBB3 user, you should really checkout Rockettheme’s products at RocketTheme.com Those people have been building some solid and beautiful templates and extensions and distributing them at very reasonable prices.

As for the Anahita Embryo 2.1 goes, the packages will be available to the Premium Tribe shortly. As soon as we are confident that the code is stable, we will branch out a 2.1 Birth release and make it available for free to public.

Until now the Anahita Shiraz template only came with a light theme. This month I had some time to develop the dark theme for the Shiraz template as well. Use the dark theme for your gaming, fashion, artistic, or that none-vanilla subculture lifestyle social networking project that you are about to launch and let your members experience the dark side of Anahita.

Change Log

The following is the change log for the Anahita Shiraz template 1.2 Birth Release:


Legend:

* -> Security Fix
# -> Bug Fix
$ -> Language fix or change
+ -> Addition
^ -> Change
- -> Removed
! -> Note?>

===Version 1.1===
^ hardcoded url for the favicon has been removed
^ manifest date, author, and desicription have been updated.
+ style2.css has been added
^ color codes have been moved to the anahita social networking engine and apps to the style1.css file
+ preset2.png icon in the admin/presets has been added
^ The preset2 info has been added to the gantry.config.php as the Dark theme


Do Update Your Shiraz Template

If you are using the default Shiraz template on your Anahita installation do update your Shiraz template. A lot of improvements and changes have been done in the new release that are necessary for the next releases of Anahita ™, Groups, Discussions, Photos, and Connect to render properly. For example all the css color codes have been removed from the Anahita™ and applications and instead they have been added to the Shiraz template. If you don’t upgrade your Shiraz template, the next time that you will be upgrading the Anahita™ and apps a lot of the colors will be missing until you upgrade your template.

To upgrade the Shiraz template, download the most recent copy of Anahita package from here and then go to the administration back-end of your Anahita Installation. Under Extend > Install/Uninstall select and upload your template zip file package.

Do Update Your Anahita Templates

If you have developed you own custom Anahita templates that are perhaps a derivative of Shiraz template, you very likely need to upgrade your css files so the next updates of Anahita social networking engine, Groups, Discussions, Photos, and Connect won’t won’t distort how your pages are rendered.

That is because all the css color codes from the Anahita™ and the existing applications have been moved to the new Shiraz template. To get a list of CSS tags that contained color codes (or styling images) checkout the style1.css and style2.css files in the css directory of the new Shiraz template.

What’s next?

In the upcoming releases of Anahita Shiraz template we would like to experiment with the iPhone friendly features of the Gantry framework so we can have pages that are more user friendly for the iPhone devices.

The great folks at the RockeTheme have been working for us to make their new template – Tachyon - which is compatible with the Anahita™ Social Networking Engine. The template was released yesterday and now it is available to all the RocketTheme paid members.

I must say it was such a pleasure working with the RT guys. They are just amazing and I really had fun during this collaboration. So thank you so much!

• Andy Miller, the founder and CEO of RocketTheme.com for making this possible and providing last minute feature request support.
• Brian Towles for the last minute feature implementation
• James Spencer for putting together the updates in the last minute and being so patient with us.

More On the Tachyon Template and Anahita

The minimalist Tachyon template from RocketTheme provides styling for the Anahita™ main user interfaces as well as 4 of the existing Anahita social applications: Groups, Discussions, Projects, and Photos.

The Tachyon template provides a custom layout with a 2,6,4 ratio by default which is required by the Anahita. This feature activates automatically when the Tachyon template detects the Anahita framework on the system.

We have a promotion

If you are a RocketTheme.com member we are giving away 100$ off on the first 100 people who sign up as Premium Tribe members with Anahitapolis.com

That is an awesome 35% discount. Go to RocketTheme.com/promotions to obtain your discount coupon and sign up for one year Premium Tribe membership plan with Anahitapolis.com

Template is important. It skins and renders all the application user interfaces and delivers all the things that we are all obsessed about: The User Experience, the Branding, and all those good things!

We’ve had a basic template for Anahita which was quite good, except that it could only be used in one configuration. Anahita also uses the more recent version of the Mootools javascript library and since Joomla! was using the old mootools 1.1 for a while, that meant a lot of existing Joomla templates and modules could not be upgraded to work with the Anahita social networking engine.

Now things have changed. The Joomla! team has finally, … FINALLY! came up with a solution to upgrade the mootools library.  Also the wonderful Gantry Framework was released by the RocketTheme which provides an awesome 960 standard grid system, a very snazzy administration interface, and a wonderful framework to help us build flexible templates that are great not only for a CMS but also for more sophisticated software such as social networks. After doing some client projects with the Gantry framework, we really liked it and we have decided to develop the new default Anahita template using the Gantry Framework. That is how the Shiraz template was born.

The Shiraz template for Anahita ™ provides almost all the key features and main positions that the Gantry framework does, in 12 column positions, as well as all the styling for the Anahita ™ and the following list of social applications:

• Anahita Social ™ Discussions
• Anahita Social ™ Photos
• Anahita Social ™ Groups
• Anahita Social ™ Projects

The Shiraz template is not a done and finished template. It is a blueprint for all the Anahita developers to learn how to customize the develop their own templates while exploiting all the features that the Anahita and Gantry framework provide. This also means that Anahita powered social networks can now use other great extensions that are being distributed via the RocketTheme.com website as long as they are using the recent version of Mootools library.

To give you an example we are currently using the Shiraz template and the RocketTheme’s RokNavMenu extension on the Anahitapolis social network. We will be testing and using more of the RocketTheme’s extensions on the Shiraz template once we have merged the Anahitapolis.com and community.anahitapolis.com websites in a few weeks.

This however does not mean that all the rest of RocketTheme templates that are built using the Gantry Framework will be able to render the Anahita user interfaces yet. That is because they are still missing the required Anahita styling. If you have noticed RocketTheme actually includes additional styling for all the 3rd party extensions that they are supporting.

Some Screen Captures

Here are some screen captures that I have prepared for you. You can click on the images and see the original size images on the flickr.com website.

Don’t stay behind

Get an account on Anahitapolis to learn more about the project and ask your questions before signing up.

Sign up here to gain access to the most recent version of Anahita code, existing social applications, project management sites, and the support groups.

Join the Anahita Facebook page
Follow us on Twitter @anahitapolis

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.

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:

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