Download

BTW, don’t forget to hit the share buttons.

Joomla version support

• Joomla1.5 Native
• Joomla1.6 Native
• Joomla1.7 Native

Licence

GPL2 or later, non commercial.

Usages

Download, install, active and … voila !

note: paths are windows style
folder components\com_virtuemart\views\productdetails open file view.html.php line 97

if ( VmConfig::get('enable_content_plugin',0)) {
			// add content plugin //
			$dispatcher	=& JDispatcher::getInstance();
			JPluginHelper::importPlugin('content');
			$product->text = $product->product_desc;
			$params = "";
                        //var_dump($product);
			$results = $dispatcher->trigger('onPrepareContent',array (& $product, & $params, 0));
			$product->product_desc = $product->text;
		}

Here the content plugin trigger event is for 1.5 series. from joomla 1.6 the “onContentPrepare” and also takes one more input.

So for line 104 there should be a check for joomla version and add conditional event hook.

It’s not hard to check the joomla version. sample code used in k2 component

// Determine Joomla! version
		if(version_compare( JVERSION, '1.6.0', 'ge' )) {
			define('K2_JVERSION','16');
		}
		else {
			define('K2_JVERSION','15');
		}

here is how the code can be for both 1.5 and 1.6+ content plugins support

if ( VmConfig::get('enable_content_plugin',0)) {
			// add content plugin //
                        // Determine Joomla! version
                        if(version_compare( JVERSION, '1.6.0', 'ge' )) {
                                define('VMJ2_JVERSION','16');
                        }
                        else {
                                define('VMJ2_JVERSION','15');
                        }

			$dispatcher	=& JDispatcher::getInstance();
			JPluginHelper::importPlugin('content');
			$product->text = $product->product_desc;
			$params = "";
                        //var_dump($product);
                        if(VMJ2_JVERSION=='16'){
                            $results = $dispatcher->trigger('onContentPrepare',array ('com_virtuemart.productdetails',& $product, & $params, 0));
                        }
                        else{
                            $results = $dispatcher->trigger('onPrepareContent',array (& $product, & $params, 0));
                        }

			$product->product_desc = $product->text;
		}

Note2: I have opened a thread on virtuemart forum here.

Joomla Version Support:

• Joomla1.5 Native
• (Coming soon) Joomla1.6 Native

Licence: GPL2 (See the licence)

Features

• Skip home page or not
• Skip by item id
• Skip home page or not
• Supported Components
  • Content (com_content)
    • Skip Category view
    • Skip Section view
    • Exlcude category(s) by id
    • Exclude section(s) by id
• Possible Module positions
  • After Title
  • Before Content
  • After Content
  • Inside Content(pending feature)
• Possible ways of module(s) injection
  • Module position name(s)
  • Module id (s)
  • Use comma separator for muktiple module position name or multiple module id
  • Position name or module id both can be used

Downloads

To Download please click here.

Good news is I just made a small system plugin which will do some cool things. Please, it’s a start, I will add more features if you ask, just ask me
Let’s download the plugin, it’s for joomla1.5
To download please click here.

1. Create new view
2. Add custom option for that view via xml configuration
3. Adding new menu with the new custom view
4. Edit a core file to make this happen.

Create new view

To create a new view(view of MVC model used in joomla) at first copy paste the two files(form.php and form.xml) and rename as form2.php and form2.xml from directory components/com_content/views/article/tmpl.

Now modify the code for form2.php

<?php // no direct access
defined('_JEXEC') or die('Restricted access');

$config =& JFactory::getConfig();
$publish_up =& JFactory::getDate($this->article->publish_up);
$publish_up->setOffset($config->getValue('config.offset'));
$publish_up = $publish_up->toFormat();

if (! isset($this->article->publish_down) || $this->article->publish_down == 'Never') {
	$publish_down = JText::_('Never');
} else {
	$publish_down =& JFactory::getDate($this->article->publish_down);
	$publish_down->setOffset($config->getValue('config.offset'));
	$publish_down = $publish_down->toFormat();
}
?>

<script language="javascript" type="text/javascript">
<!--
function setgood() {
	// TODO: Put setGood back
	return true;
}

var sectioncategories = new Array;
<?php
$i = 0;
foreach ($this->lists['sectioncategories'] as $k=>$items) {
	foreach ($items as $v) {
		echo "sectioncategories[".$i++."] = new Array( '$k','".addslashes( $v->id )."','".addslashes( $v->title )."' );\n\t\t";
	}
}
?>

function submitbutton(pressbutton) {
	var form = document.adminForm;
	if (pressbutton == 'cancel') {
		submitform( pressbutton );
		return;
	}
	try {
		form.onsubmit();
	} catch(e) {
		alert(e);
	}

	// do field validation
	var text = <?php echo $this->editor->getContent( 'text' ); ?>
	if (form.title.value == '') {
		return alert ( "<?php echo JText::_( 'Article must have a title', true ); ?>" );
	} else if (text == '') {
		return alert ( "<?php echo JText::_( 'Article must have some text', true ); ?>");
	} else if (parseInt('<?php echo $this->article->sectionid;?>')) {
		// for articles
		if (form.catid && getSelectedValue('adminForm','catid') < 1) {
			return alert ( "<?php echo JText::_( 'Please select a category', true ); ?>" );
		}
	}
	<?php echo $this->editor->save( 'text' ); ?>
	submitform(pressbutton);
}
//-->
</script>
<?php if ($this->params->get('show_page_title', 1)) : ?>
<div class="componentheading<?php echo $this->escape($this->params->get('pageclass_sfx')); ?>"><?php echo $this->escape($this->params->get('page_title')); ?></div>
<?php endif; ?>
<form action="<?php echo $this->action ?>" method="post" name="adminForm" onSubmit="setgood();">
<fieldset>
<legend><?php echo JText::_('Editor'); ?></legend>
<table class="adminform" width="100%">
<tr>
	<td>
		<div style="float: left;">
			<label for="title">
				<?php echo JText::_( 'Title' ); ?>:
			</label>
			<input class="inputbox" type="text" id="title" name="title" size="50" maxlength="100" value="<?php echo $this->escape($this->article->title); ?>" />
			<input class="inputbox" type="hidden" id="alias" name="alias" value="<?php echo $this->escape($this->article->alias); ?>" />
		</div>
		<div style="float: right;">
			<button type="button" onclick="submitbutton('save')">
				<?php echo JText::_('Save') ?>
			</button>
			<button type="button" onclick="submitbutton('cancel')">
				<?php echo JText::_('Cancel') ?>
			</button>
		</div>
	</td>
</tr>
</table>

<?php
echo $this->editor->display('text', $this->article->text, '100%', '400', '70', '15');
?>
</fieldset>
<fieldset>
<legend><?php echo JText::_('Publishing'); ?></legend>
<table class="adminform">
<!--tr>
	<td class="key">
		<label for="sectionid">
			<?php echo JText::_( 'Section' ); ?>:
		</label>
	</td>
	<td>
		<?php echo $this->lists['sectionid']; ?>
	</td>
</tr>
<tr>
	<td class="key">
		<label for="catid">
			<?php echo JText::_( 'Category' ); ?>:
		</label>
	</td>
	<td>
		<?php echo $this->lists['catid']; ?>
	</td>
</tr-->
<input type="hidden" name="sectionid" value="<?php  echo $this->params->get('customsectionid', 0); ?>" />
<input type="hidden" name="catid" value="<?php  echo $this->params->get('customcategoryid', 0); ?>" />
<?php if ($this->user->authorize('com_content', 'publish', 'content', 'all')) : ?>
<!--tr>
	<td class="key">
		<label for="state">
			<?php echo JText::_( 'Published' ); ?>:
		</label>
	</td>
	<td>
		<?php echo $this->lists['state']; ?>
	</td>
</tr-->
<input type="hidden" name="state" value="<?php  echo $this->params->get('customstate', 1); ?>" />
<?php endif; ?>
<!--tr>
	<td width="120" class="key">
		<label for="frontpage">
			<?php echo JText::_( 'Show on Front Page' ); ?>:
		</label>
	</td>
	<td>
		<?php echo $this->lists['frontpage']; ?>
	</td>
</tr-->
<input type="hidden" name="frontpage" value="<?php  echo $this->params->get('customfrontpage', 0); ?>" />
<tr>
	<td class="key">
		<label for="created_by_alias">
			<?php echo JText::_( 'Author Alias' ); ?>:
		</label>
	</td>
	<td>
		<input type="text" id="created_by_alias" name="created_by_alias" size="50" maxlength="100" value="<?php echo $this->escape($this->article->created_by_alias); ?>" class="inputbox" />
	</td>
</tr>
<tr style="display:none;">
	<td class="key">
		<label for="publish_up">
			<?php echo JText::_( 'Start Publishing' ); ?>:
		</label>
	</td>
	<td>
	    <?php echo JHTML::_('calendar', $publish_up, 'publish_up', 'publish_up', '%Y-%m-%d %H:%M:%S', array('class'=>'inputbox', 'size'=>'25',  'maxlength'=>'19')); ?>
	</td>
</tr>
<tr style="display:none;">
	<td class="key">
		<label for="publish_down">
			<?php echo JText::_( 'Finish Publishing' ); ?>:
		</label>
	</td>
	<td>
	    <?php echo JHTML::_('calendar', $publish_down, 'publish_down', 'publish_down', '%Y-%m-%d %H:%M:%S', array('class'=>'inputbox', 'size'=>'25',  'maxlength'=>'19')); ?>
	</td>
</tr>
<tr style="display:none;">
	<td valign="top" class="key">
		<label for="access">
			<?php echo JText::_( 'Access Level' ); ?>:
		</label>
	</td>
	<td>
		<?php echo $this->lists['access']; ?>
	</td>
</tr>
<tr style="display:none;">
	<td class="key">
		<label for="ordering">
			<?php echo JText::_( 'Ordering' ); ?>:
		</label>
	</td>
	<td>
		<?php echo $this->lists['ordering']; ?>
	</td>
</tr>
</table>
</fieldset>

<fieldset style="display:none;">
<legend><?php echo JText::_('Metadata'); ?></legend>
<table class="adminform">
<tr>
	<td valign="top" class="key">
		<label for="metadesc">
			<?php echo JText::_( 'Description' ); ?>:
		</label>
	</td>
	<td>
		<textarea rows="5" cols="50" style="width:500px; height:120px" class="inputbox" id="metadesc" name="metadesc"><?php echo str_replace('&','&amp;',$this->article->metadesc); ?></textarea>
	</td>
</tr>
<tr>
	<td  valign="top" class="key">
		<label for="metakey">
			<?php echo JText::_( 'Keywords' ); ?>:
		</label>
	</td>
	<td>
		<textarea rows="5" cols="50" style="width:500px; height:50px" class="inputbox" id="metakey" name="metakey"><?php echo str_replace('&','&amp;',$this->article->metakey); ?></textarea>
	</td>
</tr>
</table>
</fieldset>

<input type="hidden" name="option" value="com_content" />
<input type="hidden" name="id" value="<?php echo $this->article->id; ?>" />
<input type="hidden" name="version" value="<?php echo $this->article->version; ?>" />
<input type="hidden" name="created_by" value="<?php echo $this->article->created_by; ?>" />
<input type="hidden" name="referer" value="<?php echo str_replace(array('"', '<', '>', "'"), '', @$_SERVER['HTTP_REFERER']); ?>" />
<?php echo JHTML::_( 'form.token' ); ?>
<input type="hidden" name="task" value="" />
</form>
<?php echo JHTML::_('behavior.keepalive'); ?>

Here what we did is,

We set fixed section id got from menu option[see about this bellow in xml modify section], fixed category id, fixed option for publish state, fixed option for front page publish etc… just check the modified code. Also we hide some blocks using css so that the form submit page is more clean, you can remove that changes if you want.
Now we need to modify the xml file to put the custom/new title, descriptions so that while creating menu we get the new menu with new title & description. So this is what I changed the xml file

Add custom option for that view via xml configuration

<?xml version="1.0" encoding="utf-8"?>
<metadata>
	<layout title="Article Submission Layout2">
		<message>
			<![CDATA[ARTICLE SUBMISSION LAYOUT2 DESC]]>
		</message>
	</layout>
	<state>
		<name>Article Submission Layout3</name>
		<description>ARTICLE SUBMISSION LAYOUT3 DESC</description>
		<params>
			<param name="customsectionid" type="text" default="" label="Section ID" description="Put section ID" />
			<param name="customcategoryid" type="text" default="" label="Category ID" description="Put category ID" />
			<param name="customstate" type="radio" default="1" label="Default Published" description="Articles will be default published">
				<option value="0">No</option>
				<option value="1">Yes</option>
            </param>
            <param name="customfrontpage" type="radio" default="0" label="Default show on frontpage" description="Defautl show the articles in front page">
				<option value="0">No</option>
				<option value="1">Yes</option>
            </param>
		</params>
	</state>
</metadata>

Here the changed titles are
Article Submission Layout -> Article Submission Layout2
ARTICLE SUBMISSION LAYOUT DESC -> ARTICLE SUBMISSION LAYOUT2 DESC

To add the new strings we need to add two lines more in language file. Open file administrator/language/en-GB/en-GB.com_content.ini and add at bottom of that file
ARTICLE SUBMISSION LAYOUT2=Custom Article Submission Layout
ARTICLE SUBMISSION LAYOUT2 DESC=Allows Users to submit an Article. Note: this will only work for Authors and above!

And we added some new options so that we can set from menu

• Set(fixed) category for posting(here category will be set as hidden field)
• Set(fixed) section for posting(here category will be set as hidden field)
• Set option for auto publish or not
• Set option for publish in front page or not

Adding new menu with the new custom view

Ok, now go to menu manager and try to create new menu for article submit, I think you will get new option for submit form. Select that and fill the options in right for the menu… remember ? …we set some custom option in xml file for adding some fixed option to show in front end submit form ?

Edit a core file to make this happen

So as I told you, to load the new template(that form, form2 are actually view) from view(view.html.php is the view file that loads the templates). Open file components/com_content/views/article/view.html.php and add few lines after line 52

if($this->getLayout() == 'form2') {
			$this->_displayForm($tpl);
			return;
		}

<jdoc:include type="component" />

Yes I am talking about how we can load only the component with any link that the above line does. let you are in a link in your site for com_content, for me now I am in that link in my local test site. http://localhost/jtest/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50

If I go to the link I see full site. Ok now if I modify the url by appending &tmpl=component at end

http://localhost/jtest/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=50&tmpl=component

I see only the component part. Please try yourself. This is how we can just show the component part. If you check your template folder there is a file named component.php which actually shows if component only link is opens. If that file is missing in your template then find in the system template folder. Also there are another two template files for error.php and offline.php which shows the error page and site offline mode page.

Now let me discuss when you may need to load the component only part. Let’s you want to show something via joomla native popup window, like you want to make popup login you can do this trick. Once I wrote a article about how to make modal (popup window) using joomla native modal javascript library.

Example: go to my joomla demo site  http://idea52.com/old/ click the feedback button, it will load the com_contact component in joomla native modal window.

Thank you.

<meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />

We can modify this generator tag and also can put option in our custom joomla template to change this meta tag to site name or something different. so let’s start

In you template index’s file header tag you can write a line like bellow

<?php
$this->setGenerator("your custom generator name");
$this->setGenerator(""); // you can leave that as blank too
?>

We can set a option in template

in template index.php file

<?php
 	  $myconfig = new JConfig();
	  $mysitename = $myconfig->sitename;
 ?>
 <?php
 if($this->params->get('removegeneratortag') == "yes"):
	// Remove the generator meta tag
	$this->setGenerator($mysitename);
endif;
 ?>

in params.ini file add extra line
removegeneratortag=yes

in templateDetails.xml file

<params>
		<param name="removegeneratortag" type="list" default="yes" label="Remove Joomla Generator Tag" description="Remove or disable joomla generator tag from head tag for security reason">
			<option value="yes">Yes</option>
			<option value="no">No</option>
		</param>
	</params>

before

"</install>"'

tag

you are done. I think now you can add/customize in your own way as you need. If you don’t know how to modify the above code then don’t try

Thank you

JED Team approved the webmastertool pluginf or joomla. So, now it’s your turn to help me, writting review(good or bad), voting in JED.

What is webmaster tool?

Webmastertool is a simple joomla plugin. It will allow you to put verification meta tag for diff search engines like google, yahoo, bing and alexa which needs to upload a file or edit template manually. But using this plugin will save your time or help you to avoid using ftp to edit template files. Some months ago I developed same type plugin for wordpress webmaster key.

I think it will be handy for webmaster. Quick links for Google,Yahoo and Bing,Alexa webmaster tool

• Google Webmaster
• Yahoo Siteexplorer
• Bing/Live webmaster
• Alexa Siteowners

How to collect meta tags

I know max ppl are smart enough and can do it easily but some ppl are not mcuh technical and don no how to upload file or add meta tag in theme file and where. so, to get google meta tag key go to Google Webmaster, login using your google id and your site. See image bellow and check you will see something like this. Copy meta value (red underline in screenshot)

Downloads

Plugin installation

• Download the zip
• Unzip and install like any other joomla plugin
• Activate it
• Go to plugin setting
• Add meta tag keys and save, you are done!

Screenshots

Webmaster tool for joomla

Update 03.09.2010: This extension got approved in JED. If you like this extension pls write reviews and vote in JED.

All share count or “Social share/Vote button” is a joomla plugin that shows social share or vote button in articles. It contains all popular social network or share/bookmark sites that supports button/badge for vote/share. I was inpired by the wordpres plugin “Digg Digg WordPress Plugin” which I am using in my blog for many days.

Social share/Vote button

Features

Social Share/Vote Button plugin supports the following social network:

• Facebook
• Fbshare.me(Alternative for facebook share)
• Twiter
• Topsy(Alternative for twitter share)
• Tweetmeme(Alternative for twitter share)
• Diggg
• Delicious
• Stumble
• Google Buzz
• Yahoo Buzz
• Dzone
• Facebook Like
• Flattr
• Reddit
• linkedin

Social Share and Vote button now supports other components!

• Content (com_content)
• K2(com_k2)
• Quickfaq (com_quickfaq)
• Eventlist(com_eventlist)

Button positions

• Before Article
• After Article
• Left Aligned
• Right Aligned

Button Visibility and Control

• Control Each button’s visibility(Show/Hide)
• Exclude for specific section
• Exclude for specific category
• Exclude for specific menu id
• Show/Hide on front page
• Sort button as weight

There are options to show before content, after content, left float, right float

Again, there are options to show/hide button for home page/front page, category view, section view or for any sepecific category whatever you need.

I am working to sort by weight to show buttons oder as you need. Also will add redit. If you have other ideas let me know. Btw, adding lazzy load like the digg-digg plugin of wordpress will be cool, hope to add in my joomla plugin.

How to install

• Download the plugin as zip
• Install from joomla admin panel like any other joomla extension
• Go to plugins page and “publish” the plugin
• Configure the plugin as you need
• Change order of that plugin for all content plugins to change the plugin action order so that buttons show near content perfectly…
• that’s it baby!

Download

Please Download from here
Note:As download system was making problem here, I moved it to my bzness domain for better support and service.

Support given via mail(Put mail subject as “Support for Social Share/Vote Button plugin” to sabuj at idea52 dot com) . If you need extra works like installation or other modification I will give support @rate $10/hr.

Note: You can get a free copy if you put a text link add with a follow rel in your site home page, contact me.

Change Log

• V1.8 Date 02.12.2010
  • Added locale support for facebook like
  • Added linkedin share button
• V1.7 Date 30.11.2010 [Keep backup of version1.6]
  • Added support for components K2, Quickfaq, Eventlist, more is coming soon
  • Fixed height problem in compact mode
  • Fixed compoct mode problem for Dzone
  • More idea is on the way to compile
  • Who paid for old versions please contact with me if need the new version.
• V1.6 Date 17.11.2010
  • Added Flattr button
  • Added Reddit btuton
  • Download again for updated version.
• V1.5 Date 09.10.2010
  • Fixed tag missing bug for Google buzz. Thank @ met
  • Fixed bug for other component like com_weblinks, com_contact etc that use same type plugin event I used in that plugin. Bug report here
• V1.4 Date 22.09.2010
  • Added sorting by weights, low to high order
  • Fixed position problem for stubbleupon
• Date 12.09.2010: Added height param for faceboo like, I am too lazy to finish all at a time
• V1.3 Date: 09.09.2010
  • Added width parameter for facebook like
• V1.2 Date: 09.09.2010
  • Added Official twitter button
  • Added option to exclude section
  • Added option to exclude itemid
  • Fixed some bug and typing mistake
• 09.09.2010: Fixed link issue for category or blog view that was causing wrong share count in blog/section view. Thanks @Ioannis
• 03.09.2010: A critical bug is fixed “Fatal error: Class ‘JSite’ not found in…” while saving content from admin panel. Thanks @ sspider. Every body is requested to download again.

Facebook Language Locale list

View Demo

To see demo you can check my portfolio page.

So use it, enjoy it and don’t forget to let me know how you like this new baby. Have a nice joomla time.

joomla native drop down menu

• Adding joomla native modal to frontend
• Using wordpress native thickbox
• জুমলাতে নেটিভ টুলটিপ এর ব্যবহার
• Home made tab and slider module for joomla1.5

Ok then let’s move for how we can use the main menu module as ‘top to bottom‘ drop down menu like the joomla admin panel top menu. we will work on default template of joomla1.5

Adding javascript file

Create a new folder named js in default template like this templates\rhuk_milkyway\js

Now copy two js files from admin default template from this location administrator\templates\khepri\js or you can just copy the js folder from admin default template khepri to front end default template rukh_milkway. That’s it. Btw, pls check you copied at least two files named menu.js and index.js. Now add the follow two lines in index.php file of default template before </head> tag like bellow

<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/menu.js"></script>
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/js/index.js"></script>
</head>

Adding CSS or style code

Open template.css file from your default template css folder i.e., templates\rhuk_milkyway\css and put this bellow css code at last or somewhere.

#menu, #menu ul, #menu li { margin: 0; padding: 0; border: 0 none; }

#menu       { position:relative; z-index: 100;}
#menu li    { float:left;  position:relative; list-style: none; display: inline;}
#menu li a  { display:block; white-space: nowrap;  }
#menu li li { /*width: 100%;*/ clear: both;  /*FF 1.0.7 needs this */  }
#menu li ul { visibility: hidden; position:absolute; }

#menu li li ul {  top: 0; left: 0; }

#menu li.hover ul               {  visibility: visible; }
#menu li.hover ul li ul 		  {  visibility: hidden;  }
#menu li.hover li.hover ul      {  visibility: visible;  left: 100%; }

/* ---- Menu layout -------------------------- */

#menu li {
	border-left: 1px solid #fff;
	border-right: 1px solid #d8d8d8;
}
#menu li li { border: 0;}

#menu ul    { border: 0.1em solid #ccc; background: #f6f6f6 url(../images/bg-menu.gif) repeat-y left;}
#menu ul li.node { background: transparent url(../images/j_arrow.png) no-repeat right 50%; }
#menu ul li.separator { background: #DDE1E6 url(../images/bg-menu.gif);  height: 1px;  }

#menu a, #menu div {
	padding: 0.35em 1em 0.35em;
	margin: 0 1px 0 1px;
	color: #333333;
	line-height: 1.6em; vertical-align: middle;
	font-size: 11px; font-weight: bold; text-decoration: none;
	cursor: default;
	background-repeat: no-repeat; background-position: left 50%
}

#menu li.disabled a { color: gray; }

#menu ul a {
	font-size: 11px;
	font-weight: normal;
	padding-left: 25px;
	padding-right: 20px;
	line-height: 1.2em;
}

/* 1 level - hover */
#menu li.hover a {  background-color: #E7EDDF; border-left: 1px solid #6D9D2E;  border-right:1px solid #6D9D2E; margin: 0; }
/* 2 level - normal */
#menu li.hover li a { background-color: transparent; border: 0 none;   margin: 2px;  }
/* 2 level - hover */
#menu li.hover li.hover a { background-color: #E7EDDF; border: 1px solid #6D9D2E;  margin: 1px;   }
/* 3 level - normal */
#menu li.hover li.hover li a { background-color: transparent; border: 0 none;   margin: 2px;  }
/* 3 level - hover */
#menu li.hover li.hover li a:hover { background-color: #E7EDDF; border: 1px solid #6D9D2E;  margin: 1px;  }

/* submenu styling */
#submenu {
	list-style: none;
	padding: 0;
	margin: 0;
}

#submenu li {
	float: left;
	padding: 0;
	margin: 0;
}

#submenu li a,
#submenu span.nolink {
	cursor: pointer;
	padding: 0px 15px;
	border-right: 1px solid #ccc;
	font-weight: bold;
	color: #0B55C4;
	line-height: 12px;
	height: 12px;
}

#submenu span.nolink {
	color: #999;
}

#submenu a.active,
#submenu span.nolink.active {
	color: #000;
	text-decoration: underline;
}

I collected this css code from admin template khepri template css file. So we are still using the native resources

Configure Menu module

If you are using default template then the topmenu is published in user3 position . So go to module manager and find tehe module for top menu published in user3 position and set configuration like bellow screenshots.

Menu module configuration

Changing template code to accomodate for our new style top menu

In your rukh_milkway default template open the index.php file fine a line near this html code <div id=”tabarea”> . Sorry I can not give line number exactly now as I changed my default template many times Here is the code used in defailt templte and I make the comment except the module include line.

<!--div id="tabarea">
	<div id="tabarea_l">
		<div id="tabarea_r">
			<div id="tabmenu">
			<table cellpadding="0" cellspacing="0" class="pill">
				<tr>
					<td class="pill_l">&nbsp;</td>
					<td class="pill_m">
					<div id="pillmenu"-->
						<jdoc:include type="modules" name="user3" />
					<!--/div>
					</td>
					<td class="pill_r">&nbsp;</td>
				</tr>
				</table>
			</div>
		</div>
	</div>
</div-->

You can use a simple line for the replacement of the above codes and fix your css as u need like this

<div class="topmenu">
   <jdoc:include type="modules" name="user3" />
</div>

Hei, we are about to done

Changing a core file of main menu module

Yes I am not happy any more at this point as we going to change a line in a core file but what to say … if we want to do something great we can do a little hack to core and shout like “hei ! I don’t care to hack core if I need ”
I am sorry I just forgot that we can ovverride the view part of any module and will do this now. Just check if there is any folder in your template named “html”, if not then create one. now created a folder in it named “mod_mainmenu” and then copy modules\mod_mainmenu\tmpl\default.php and modules\mod_mainmenu\tmpl\index.html file from this location and paste in the new created folder mod_mainmenu ie, template\{yourtempalte folder}\html\mod_mainmenu

and now
open file modules\mod_mainmenu\tmpl\template\{yourtempalte folder}\html\mod_mainmenu\default.php and look for near line 36 and change this line to

	if (($node->name() == 'li') && isset($node->ul)) {
		$node->addAttribute('class', 'node parent');
	}

Pls notice that I added an extra class name ‘node’ in 2nd line. that what we need exactly to use the core css file and js.

Here is another screenshot of the top menu that we just made.

joomla native drop down menu2