12
Comments

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

0
Comments

Hei! it’s bengali unicode text, This post is wrriten for amaderprojukti forum.
অনেক দিন বাংলায় ব্লগ বা টিপ্স কিছু লেখা হয় না। আজকের বিষয় আমার অনেক গুলো গার্লফ্রেন্ড এর ভেতর অন্যতম “জুমলা”। যদিও আজকের লেখাটা জুমলার একটি গোপন সুন্দর দিক নিয়ে আর তা হলো জুমলা ১.৫ এর নেটিভ টুলটিপ।
প্রথম একটি ছবি দেখায়ঃ

এডমিন প্যানেলে কোন কিছু কনফিগারেশনে ঢুকলে বা অনেক সময় কোন লিঙ্কএ মাউস হোভার করলে উপরের মতো টুলটিপ দেখায়। একই রকম টুপটিপ চাইলে আমরা ফ্রন্ট এন্ড এ ব্যবহার করতে পারি আর তার জন্য এক্টিভ টেমপ্লেটে দরকার সামান্য পরিবর্তন, সেই পরিবর্তন কিভাবে করা যায় তা নিয়েই আজকের আলোচনা। পরের ছবিটি ফ্রন্ট এন্ড এর।

কিভাবে ফ্রন্ট এন্ডে টুলটিপ ফিচার যুক্ত করবেনঃ
টুলটিপ ফিচার যুক্ত করার জন্য আপনাকে প্রথম টেমপ্লেটের ইন্ডেক্স ফাইল(index.php) এ একটি লাইন যুক্ত করতে হবে। যদি আপনি ডিফল্ট টেমপ্লেট ব্যবহার করেন তাহলে rhuk_milkyway হচ্ছে আপনার টেমপ্লেট এর নাম, এর ভেতর index.php ফাইলটি ওপেন করুন কোন এডিটরে, এখন হেড ট্যাগ() এর আগে

</head>

নিচের লাইনটি বসিয়ে দিনঃ

<?php
JHTML::_('behavior.tooltip');
?>

উপরের কোড টুকু যা করবে তা হলো কিছু জাভা স্ক্রিপ্ট এর কোড তৈরি করে দেবে যা আপনাকে টুলটিপ যুক্ত করতে সাহায্য করবে।

<script type="text/javascript">
    window.addEvent('domready', function(){
       var JTooltips = new Tips($$('.hasTip'),
       { maxTitleChars: 50, fixed: false});
    });
</script>

কন্টেন্ট এর ভেতর বা কিভাবে টুলটিপ এর টিপ যুক্ত করতে হবেঃ
ধরুন এখন এডমিন প্যানেল থেকে একটি আর্টিকেলে আমি লিখছি এমন একটি লাইন
আমি আমাদের প্রযুক্তি ফোরামে এখন একটি টিউটোরিয়াল লিখছি।
এখানে আমি চাই “আমাদের প্রযুক্তি” শব্দবলীর উপর মাউস নিলে টিপ দেখাবে। এটা করার জন্য নিচের মতো লিখতে হবে।

আমি <span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " class="hasTip">আমাদের প্রযুক্তি</span> ফোরামে এখন একটি টিউটোরিয়াল লিখছি।

এখানে প্রথমে

<span>আমাদের প্রযুক্তি</span>[/quote]
এরপর স্প্যান ট্যাগে এ টাইটেলে আমি বিশেষ ভাবে কিছু লিখেছি, এই টাইটেল ফ্রন্ট এন্ডে থাকবে না যা আসলে টুলটিপে পরিবর্তিত হবে। এখন খেয়াল করুন আমি ব্যবহার করেছি ::   এই রকম একটা সেপারেটর। এখানে :: এর আগের অংশ হবে টাইটেল আর ::  এর পরের অংশ হবে বর্ণনা।
[code='html']<span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " >আমাদের প্রযুক্তি</span>[/quote]
তারপর
[code='html']<span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " class="hasTip">আমাদের প্রযুক্তি</span>[/quote]
এখন যা করেছি স্প্যান ট্যাগে বসিয়ে দিয়েছি একটা ক্লাস নামে "hasTip",
তাহলে পুরা লাইন হবে নিচের মতোঃ
[code ='html']
আমি <span title="আমাদের প্রযুক্তি ফোরাম:: আমাদের প্রযুক্তি বিজ্ঞান ও প্রযুক্তি বিষয়ক একটি ইউনিকোড কম্পেটিবল বাংলা ফোরাম " class="hasTip">আমাদের প্রযুক্তি</span> ফোরামে এখন একটি টিউটোরিয়াল লিখছি।

এখন যদি আপনি আর্টিকেলটা ফ্রন্ট এন্ডে দেখেন তাহলে নিচের ছবির মতো দেখাবে যদি "আমাদের প্রযুক্তি" লেখার উপর মাউস ধরেন।

সব কিছু ঠিক ঠাক মতো হবার জন্য আপনাকে আরো একটা জিনিস চেক করতে হবে আর তা হলো টেমপ্লেট এর template.css ফাইলে এ নিচের মতো করে css কোড যদি না থাকে তাহলে বসিয়ে দিতে হবে।

/* Tooltips */
.tool-tip {
   float: left;
   background: #ffc;
	border: 1px solid #D4D5AA;
   padding: 5px;
   max-width: 200px;
}
.tool-title {
   padding: 0;
   margin: 0;
   font-size: 100%;
   font-weight: bold;
   margin-top: -15px;
   padding-top: 15px;
   padding-bottom: 5px;
   background: url(../images/selector-arrow.png) no-repeat;
}
.tool-text {
   font-size: 100%;
   margin: 0;
}

আর templates\system\images এই লোকেশন থেকে selector-arrow.png এই নামের ফাইলটা কপি করে আপনার টেমপ্লেট এর ইমেজ(templates\rhuk_milkyway\images) ফোল্ডারে পেস্ট করতে হবে। চাইলে কাস্টম টেমপ্লেটে একই ভাবে টুলটিপ যুক্ত করা যাবে।

আগামী পর্বে এটার আরো এডভান্সড ফিচার নিয়ে আলোচনা করবো।

0
Comments

Feeling bad any how and started to write a blog if that makes me smile

….Hei ‘time‘ I am too emotional … I can kill you if u make me sad again and again !

Any one regular reader of my blog can remember I developed a joomla module Simple tabslider for joomla1.5 (joomla extension link, my blog post Home made tab and slider module for joomla1.5). I developed it using the joomla native tab slider html helper that is known is JPane. Joomla has a great library for html …. check joomla dir libraries\joomla\html (windows style dir …. I like to use windows all time).

Ok if you are familiar with joomla then if you are in admin panel and in just article manager then you should see a button in right side named “Parameter”. Click that parameter… what do u see ? a popup box right. it’s a modal window, joomla native modal or popup window. Did u think which javascript is used to make this … let me tell you if you don’t …. go to media\system\js and see there is js file named “modal.js”

So let’s try to use that modal window in front end ?

Open index.php file of your joomla template and put these two line

<?php JHTML::_('behavior.mootools'); JHTML::_('behavior.modal'); ?>

before

Now the syntax is like bellow … in any content link any thing like bellow

<a rel="{handler: 'iframe', size: {x: 700, y: 400}}" class="modal" href="http://google.com">click me</a><br /><br />

so what u have to put is a class name “modal“, in a rel tag handler and window size

handler iframe, images etc .. and size is window size (width and height) in the anchor tag url put what u want to load url(link), iframe or image etc.

This is just a simple example how we are can load external site in a modal window … using joomla native modal , using joomla html helper.

this is how we can load image in iframe

<a rel="{handler: 'iframe', size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a><br /><br />

Ok now let’s change the handler to image and put this code, see the modal window is now as the image size

<br /><br />
<a rel="{handler: 'image', size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a><br /><br />

try more and let me us know.

6
Comments

Yes , I am back with my another joomla extension and this time , the baby is a plugin named “banglakeyboard”. I am happy to contribute another extenstion for bangla community about bangla. This plugin will help to write bangla in default joomla contact form. It will add java script based bangla keyboard phonetic, probhat and unijoy (all are from ekushey team ). As it’s the first release , it will do the basic things but soon i will update this with more features. Let me show you a screenshot first how it will look.

জুমলা কন্টাক ফর্মের জন্য বাংলা কীবোর্ড

Note: This is plugin is compatible with joomla1.5.x only, I didn’t test for joomla1.x and have no inerested. If any body need it for joomla1.x let me know I will try to update

Download

Installation

1. Download the plugin from above
2. Install as usual as u do in joomla1.5
3. Enable the plugin from your plugin manager. As it’s system type plugin so you will get it in system grp in plugin manager.
4. Visit your contact form page …. working na ?

To do

1. Need to add language files
2. Need to add options to select keyboard layouts, may be some ppl will not like to add all keyboard
3. Have plan to add jquery version,
4. Why not make a mootools version following new jquery driver ? Joomla loads mootools bydefault.
5. Clean code
6.Compress js
7. Support other components used for contact like com_qcontact I like this man

Thanks

Thank to you all who will use it. If possible pls put a backlink in your site to my blog site with rel=”follow” No need to think about donation as I can manage my tea/coffee cost . Oh I forget to mention I followed a captcha plugin to make this plugin as I don’t have intention or free time to invent the wheel agan !.

Hei! Don’t forget to make comments and vote in joomla extension dir .. I will update this plugin and submit to joomla dir then it upto you how u will vote this and make me happy to see your comments. Any kind of feedback is welcome dear.

0
Comments

We can include module in joomla content. I think experts know this well but this post will be helpful for newbie .Ok let’s start then.

Step1: Create a new module position
Normally the module positions available are all used in template , so we need to create a new module position. Go to yout current template folder and open the templateDetails.xml and go near

<positions>
		<position>breadcrumb</position>

Now add a new line like

<position>contentpos</position>

here contentpos is a new module position name. So the all module position will look like bellow

	<positions>
		<position>breadcrumb</position>
		<position>left</position>
		<position>right</position>
		<position>top</position>
		<position>user1</position>
		<position>user2</position>
		<position>user3</position>
		<position>user4</position>
		<position>footer</position>
		<position>debug</position>
		<position>syndicate</position>
		<position>contentpos</position>
	</positions>

check the last line Remember your new module position name.
Step 2: Add module position in content
Go to your admin panel and content manager. Open any article for edit and put code bellow in article in normal html mode. Default jomla editor is some kind of richeditor mode. If you are using default joomla editor then click the button ‘html’ ,if editor is jce then click show/hide. I am using jce editor, I always use this

{loadposition contentpos}

module position in content

Step 4: Set module position wrapping
Actually loading module in content item is done by a plugin, loadmodule . loadmodule is a content type plugin. So go to your plugin manager and filter plugins by content and check if the plugin named Content-loadmodule is published or not. Enable the plugin if unpublished. Go to the plugin configuration and check right side. There is option how the modules in content item will be wraped. See screenshot bellow

loadmodule plugin options

That’s all , any question ?

33
Comments

Hello guys hope you are fine, didn’t write any blog for many days. Ya I was really busy with work and had sick of high blood pressure(… hei I am not too old, but some months left to be 26!). I have changed my life style already.. left meat, egg and sometimes fish…. Trying to be vegetarian … ha ha. Trying to sleep early and rise early ya that’s manchu’s every day now ….

Let’s come to my blog post title “How to add extra fields in joomla registration and profile”. I was searching for solution about this but most common solution was put extra fields as joomla user meta tag. Don’t know about this ? Go to edit any user from admin panel then check right side… there are some option to choose language, timezone etc…. they are called ‘user meta’ in joomla. I tried how to hack core how to do that… don’t you like to change joomla core files ? what to do when you need to do that as a client’s requirement and if client doesn’t care about changing core files …. heh heh. So let me show you how you can add extra fields in joomla registration and profile changing core files. Hei I have tried to change less as much as possible, really!

Note: all file paths are windows style !

List of files need to edit/touch

libraries\joomla\database\table\user.php it’s the class file tor user table/user object

Let we need to put two extra fields like phone and website, let’s these fields as optional. So we need to initialize two var as string.
find the follow lines and then need to put before that [any php programmer will get easily but I am trying to write for all!]

	/**
	* @param database A database connector object
	*/
	function __construct( &$db )

now put the follow lines before above lines

	/**
	 * some extra fields like name
	 *
	 * @var string
	 */
	var $phone 			= null;
	var $website			= null;

Yes we are 50% done already.
Now use your phpmyadmin to add alter your user table. Please don’t ask me how to work with phpmyadmin !

ALTER TABLE jos_users ADD phone varchar(255) DEFAULT '' AFTER password;
ALTER TABLE jos_users ADD website varchar(255) DEFAULT '' AFTER phone;

Please take care about your table prefix. my table prefix. If you table prefix is something else like mysite then your user table will be like mysite_users and the sql code will be like this

ALTER TABLE mysite_users ADD phone varchar(255) DEFAULT '' AFTER password;
ALTER TABLE mysite_users ADD website varchar(255) DEFAULT '' AFTER phone;

Now go to administrator\components\com_users\views\user\tmpl
open file form.php and put the following lines after line 132 … just add as new row in table

<tr>
					<td width="150" class="key">
						<label for="phone">
							<?php echo JText::_( 'Phone' ); ?>
						</label>
					</td>
					<td>
						<input type="text" name="phone" id="phone" class="inputbox" size="40" value="<?php echo $this->user->get('phone'); ?>" />
					</td>
				</tr>
				<tr><td width="150" class="key">
						<label for="website">
							<?php echo JText::_( 'Website' ); ?>
						</label>
					</td>
					<td>
						<input type="text" name="website" id="website" class="inputbox" size="40" value="<?php echo $this->user->get('website'); ?>" />
					</td>
				</tr>

Seems joomla doesn’t allow output overirde for admin component ! If that was possible then we didn’t need to change core file but put this view file in template folder. I will show you how to do that in front end uesr component. But before that Let me show you how it will look after the above changes done properly.

Now we need to do some changes for front end. Please go to components\com_user\views\register\tmpl
and now open file default.php for edit
After line 73 , after the password verify row … add these lines

<tr>
	<td height="40">
		<label id="phonemsg" for="phone">
			<?php echo JText::_( 'Phone' ); ?>:
		</label>
	</td>
  	<td>
  		<input type="text" name="phone" id="phone" size="40" value="<?php echo $this->escape($this->user->get( 'phone' ));?>" class="inputbox" maxlength="50" /> *
  	</td>
</tr>
<tr>
	<td height="40">
		<label id="websitemsg" for="website">
			<?php echo JText::_( 'Website' ); ?>:
		</label>
	</td>
  	<td>
  		<input type="text" name="website" id="website" size="40" value="<?php echo $this->escape($this->user->get( 'website' ));?>" class="inputbox" maxlength="50" /> *
  	</td>
</tr>

Let me show you how this will l;ook in registration page if every thing is done properly.

I told you , we can do the same changes in view for front end component without changing core files. Copy that default.php file from components\com_user\views\register\tmpl and now go to your current template folder. Let’s it’s default rukhmilkway … Check there is a folder name html in it. if your custom template doesn’t have any html folder then create one. now go to the html folder and create a folder named “com_user” (if there is no folder with this name as some custom template use output override and use same method for styling) and create a folder in com_user folder as named “register” and paste the default.php file in it. Actually you need to copy all the php files from components\com_user\views\register\tmpl to templates\{your custom template name here}\html\com_user\register

Isn’t this fun ?

Oh we have left one thing still. If we want to give user to edit their profile from front end ? We need to edit one view file again. But this this time we will not change core file in view but at first copy the view from file front end component to template folder … follow the way I shown just now.

So according to default template go to templates\rhuk_milkyway\html\com_user\user (create folder “user” in com_user same way) and copy all the php files(two files default.php and form.php) from components\com_user\views\user\tmpl …. I think it’s now easy …

Open file form.php and edit/put new lines after 70(it’s just a end of a if-end condition)

<tr>
	<td width="120">
		<label for="phone">
			<?php echo JText::_( 'Phone' ); ?>:
		</label>
	</td>
	<td>
		<input class="inputbox" type="text" id="phone" name="phone" value="<?php echo $this->escape($this->user->get('phone'));?>" size="40" />
	</td>
</tr>
<tr>
	<td width="120">
		<label for="website">
			<?php echo JText::_( 'Website' ); ?>:
		</label>
	</td>
	<td>
		<input class="inputbox" type="text" id="website" name="website" value="<?php echo $this->escape($this->user->get('website'));?>" size="40" />
	</td>
</tr>

Let me show another screenshot how the edit details from front end looks

that’s all. Let me know if you have any problem.

1
Comments

Here I am back with tinybn(bangla writing plugin for popular wysiwyw editor tinymce). Oh please don’t think that I am trying to show you smiley face with new version of tinybn but new installation instruction for joomla 1.5.14+. Today a new user informed that the raw installation instruction for joomla 1.5.x is not correct … code is not matching


I don’t have any earlier version of joomla installed now but joomla 1.5.14 and joomla 1.5.15. What I noticed that the code in tinymce.php file in plugins\editors\tinymce.php … that the it’s now udpated. No need to edit code to add custom plugin. Just need to copy paste the custom plugin folder to plugins\editors\tinymce\jscripts\tiny_mce\plugins and add the plugin name to tinymce plugin setting/configuration from admin panel. Let me show u how to install tinybn plugin in joomla 1.5.14+ without any code edit(actually it’s better way now).

Old instruction is here in ekushey.
note: path are all windows style here.

Step A: Download the plugin file(download link is at end of this post). Unzip it and check there is a folder in that named banlgafkb. Copy that folder and paste in plugins\editors\tinymce\jscripts\tiny_mce\plugins

Step B: Login to your joomla admin panel . Go to plugins. Open the plugin Editor – TinyMCE.
Step C: I think you are now in configuration page of Editor – TinyMCE . Look right side the options.
Change Functionality to Extended

You are close to end . Now click the advance tab(Advanced Parameters). Check there is option to put custom plugin name and button name(though some plugin doesn’t need button name). We need to put custom plugin name here(for more than one.. need to put with comma seperated)
OK, just write plugin name “banglafkb” and button name “banglafkb”. See screenshot bellow

I think these steps are just easy as boiling eggs.

Every thing is ok then when you are writing new article you should see the plugin action like bellow….

Related Download links:
Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.
Note: There is a file embedded within this post, please visit this post to download the file.

note: First image courtesy ekushey.

50
Comments

Change Log:

Update 14, January, 2010

WOW, This extension has been approved by JED Team. Pls visit it and place you rating.

Update 8, June, 2010(Must see)

• Fixed a bug for php error, it was a typo error
• Transition parameter was missing for slider, it’s fixed now
• Download file is updated! Please reinstall or update the files only. Changes are in the mod_simplejoomlatabslider.xml, mod_simplejoomlatabslider.php and helper.php file

If you check joomla1.5.x backend(joomla1.x had same) in any component or module configuration the right col accordian slider is common. In some components u should see tab too.To make such tab and slider is just so easy !

I think you are thinking about my post title, why I used the words “home made”. Because I am going to show you how u can make such a tab/slider module for front end just using joomla own resource. Joomla gives some execillent api to make html grid, tab, slider etc within a moment. JPane is such an api to make tab and slider. Here you will get some code example about how to make tab using JPane.

jimport('joomla.html.pane');
//1st Parameter: Specify 'tabs' as appearance
//2nd Parameter: Starting with third tab as the default (zero based index)
//open one!
$pane = &JPane::getInstance('tabs', array('startOffset'=>2));
echo $pane->startPane( 'pane' );
echo $pane->startPanel( 'Example Panel 1', 'panel1' );
echo "This is panel1";
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 2', 'panel2' );
echo "This is panel2";
echo $pane->endPanel();
echo $pane->startPanel( 'Example Panel 3', 'panel3' );
echo "This is panel3";
echo $pane->endPanel();
echo $pane->endPane();

note: I thinkf or editor problem sample code may be mseesed up but the download module is ok

If you check this line
$pane = &JPane::getInstance(‘tabs’, array(‘startOffset’= >2));
here first parameter is about making tab, If you want to make slider then use like this
$pane = &JPane::getInstance(‘sliders’, array(‘startOffset’= >2));
startOffset should be 0 for normal uses. For quick access just check the file \jtest\libraries\joomla\html\pane.php (windows style path here ) for the api.

One problem is, if you want to use this tab/slider in front end u need to copy some css code from backend css file and it’s in administrator\templates\khepri\css\general.css from line 231 to line 288 and here is teh css code bellow that I found there.

/* pane-sliders  */
.pane-sliders .title {
	margin: 0;
	padding: 2px;
	color: #666;
	cursor: pointer;
}
.pane-sliders .panel   { border: 1px solid #ccc; margin-bottom: 3px;}
.pane-sliders .panel h3 { background: #f6f6f6; color: #666}
.pane-sliders .content { background: #f6f6f6; }
.pane-sliders .adminlist     { border: 0 none; }
.pane-sliders .adminlist td  { border: 0 none; }
.jpane-toggler  span     { background: transparent url(../images/j_arrow.png) 5px 50% no-repeat; padding-left: 20px;}
.jpane-toggler-down span { background: transparent url(../images/j_arrow_down.png) 5px 50% no-repeat; padding-left: 20px;}
.jpane-toggler-down {  border-bottom: 1px solid #ccc; }
/* tabs */
dl.tabs {
	float: left;
	margin: 10px 0 -1px 0;
	z-index: 50;
}
dl.tabs dt {
	float: left;
	padding: 4px 10px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-top: 1px solid #ccc;
	margin-left: 3px;
	background: #f0f0f0;
	color: #666;
}
dl.tabs dt.open {
	background: #F9F9F9;
	border-bottom: 1px solid #F9F9F9;
	z-index: 100;
	color: #000;
}
div.current {
	clear: both;
	border: 1px solid #ccc;
	padding: 10px 10px;
}
div.current dd {
	padding: 0;
	margin: 0;
}

feeling boring ? heh heh.

I have made a tab/slidder module using Jpane and the above css code. It’s just and I named it “mod_simplejoomlatabslider”. If you are interested to check my module download from bellow and let me know. But pls keep in mind that, it’s just simple tab/slider module  

Download

Installation

• Download & install like any other joomla module
• Enabel this module to any module position
• Write module position name to load other modules as tab
• Publish other modules which u want to put in that above mentioned module position.

Check my screenshot of setting bellow:

thank guys

Oh here another screenshot of slider style of my module

7
Comments

I think you guys who are familiar with joomla also know about it’s popular extension joomfish.Don no about joomfish ? ok let see what joomfish is:

The Joom!Fish is your key for providing multilingual content to your visitors! International (i8n) portals, companies or projects require content in different languages and processes which help to keep track of the translations. The Joom!Fish extension for the CMS Joomla! does exactly this.

Ya I like another extension for joomla to manage faq easily and it’s easyfaq.

Easy FAQ is a small and simple component that allows you to add a simple “Frequently Asked Questions” sections to your Joomla site. It allows you to specify categories and subcategories and add FAQ to it. It’s allows tagging to create a second level of categorization.

* Define categories and subcategories
* Add FAQ to a categorie
* Add tags to your FAQ
* Show a tag cloud on your site

Now ? I made joomfish plugin(contentelement) for easyfaq so that you can translate easyfaq faqs, categories, tags etc via joomfish translalation panel. that’s it. See the attach file bellow for download . LEt me know if you get any problem.
Note: This is upgraded version of old plugin that I did for earlier version of joomla, joomfish and easyfaq. So you can use this new version for joomla1.5, easyfaq2+, joomfish2+
Note: There is a file embedded within this post, please visit this post to download the file.

17
Comments

Hello, this is my another work for bangla computing. I just made a small plugin to show english date in bengali in joomla1.5. Please don’t think that it will show bangla date everywhere in joomla. This plugin is just for the component com_content which shows the content/article. I gave name for this plugin is Bangla(bn-bd) date or Joomla Bangla date. This will show article create and modification date in our local language bengali. Here is screenshot for backend.

To make this plugin flexible, I tried to give so many options to configure for your joomla site to show dates in bangla. You can use this plugin as multi lingual mode easily as it has some advanced features like detect language or force to show bangla date. Even you can filter or configure for home page(front page or com_frontpage), full article mode, category filtering etc. Please check my post in post in amaderprojukti forum for details in bengali.

Download: Note: There is a file embedded within this post, please visit this post to download the file.

In JED, I have another extension named “Component listing”, an admin module.
Any kind of feedback is welcome.

Update 03.12.2009: JED Team has approved my plugin. Thank you JED Team.

Sites using this plugin:

• bigganclub.com

Let me know if you are using this plugin, I will add your site name here with noffollow rel.