This tip is for wordpress3.0+, don’t  know what to do for lower version.  The thing is when wordpress takes the site maintenace mode it creates a file in the site root dir named .maintenance  and when done remove that…

So, now you know what to do if u are stuck in maintenance mode. I wish I am going to sleep well tonight.

note: check the dicussion in wordpress forum about this issue.

Features

• iframe method
• auto detect ie(internet explorer), because sometimes it’s make problem for ie and option to use as iframe only for ie !
• jquery based document ready facebook load ! Not clear ? see bellow

One thing to note that I used a way to load the facebook js script after loading jquery as normally in wordpress site front end we use jquery and many plugin uses this… so we can take that jquery is using default. So I loaded the fb js using wp_enqueue function and then called the fb init function after the document is loaded using jquery dom ready function … It’s just an experiment about slow loading of facebook fanbox widget in wordpress

Download

If you just download with no comment and no recommendation to others, then I am planning to hate you
Man at least share in social network and give me traffic so that I can have more money from ads

Good morning. It’s just morning after working whole night and I am feeling too hungry

Code Example

	function widget( $args, $instance ) {
		extract( $args );
                 global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;
		/* Our variables from the widget settings. */
		$title          = apply_filters('widget_title', $instance['title'] );
		$profileid      = $instance['profileid']; //name or profile id , not both
		$apikey         = isset( $instance['apikey'])? $instance['apikey'] : '';
                $stream         = isset( $instance['stream'] ) ? $instance['stream'] : 0;
                $connections    = isset( $instance['connections'] )? (($instance['connections'] > 100)? 100: intval($instance['connections'])): 10; //Specifying 0 hides the list of fans in the Fan Box. You cannot display more than 100 fans. (Default value is 10 connections.)
                $width          = isset( $instance['width'] )? (($instance['width'] < 200)? 200: intval($instance['width'])): 300; // at least 200 pixels wide at minimum. (Default value is 300 pixels.)
                $height         = isset( $instance['height'] )? $instance['height']: 554;
                $css            = isset( $instance['css']) ? $instace['css']:'';
                $logobar        = isset( $instance['logobar'] ) ? $instance['logobar'] : 1;
                $iframe         = isset( $instance['iframe'])? $instance['iframe'] : 0;
                $locale         = isset( $instance['locale'])? $instance['locale']: 'en_US';
                $iframeie       = isset( $instance['iframeie'] ) ? $instance['iframeie'] : 1; // use iframe for ie , auto detect
                $usejquery     = isset( $instance['usejquery'] ) ? $instance['usejquery'] : 1;
		/* Before widget (defined by themes). */
                //var_dump($iframe);
		echo $before_widget;
		/* Display the widget title if one was input (before and after defined by themes). */
		if ( $title )
                {
                    echo $before_title . $title . $after_title;
                }
                if(($is_IE && $iframeie) || $iframe || $apikey == '')
                {
                    //echo 'yes';
                    echo '<iframe scrolling="no" frameborder="0" src="http://www.facebook.com/connect/connect.php?id='.$profileid.'&amp;stream='.$stream.'&amp;connections='.$connections.'&amp;logobar='.$logo.'&amp;css='.$css.'?'.mktime().'" style="border: none; width: '.$width.'px; height:'.$height.'px;">&nbsp;</iframe>';
                }
                else
                {
                    if($usejquery)
                    {
                        wp_enqueue_script('fbjs', 'http://static.ak.connect.facebook.com/connect.php/en_US', array('jquery'), null);
                        echo '<fb:fan profile_id="'.$profileid.'" width="'.$width.'" connections="'.$connections.'" stream="'.$stream.'" header="'.$logobar.'"></fb:fan>';
                        echo '<script type="text/javascript">jQuery(document).ready(function() {
                                FB.init("'.$apikey.'");
                                });</script>';
                    }
                    else
                    {
                            echo '<script type="text/javascript" src="http://static.ak.connect.facebook.com/connect.php/en_US"></script>';
                            echo '<script type="text/javascript"> FB.init("'.$apikey.'"); </script>';
                    }
                }
		/* After widget (defined by themes). */
		echo $after_widget;
	}

• 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

কিভাবে ফ্রন্ট এন্ডে টুলটিপ ফিচার যুক্ত করবেনঃ
টুলটিপ ফিচার যুক্ত করার জন্য আপনাকে প্রথম টেমপ্লেটের ইন্ডেক্স ফাইল(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) ফোল্ডারে পেস্ট করতে হবে। চাইলে কাস্টম টেমপ্লেটে একই ভাবে টুলটিপ যুক্ত করা যাবে।

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

মাঝে মাঝে ভাবি দেওয়ালটি জবরদস্তি করে ভেঙ্গে ফেলি কিংবা
এতো দূরে পালিয়ে যায় যেখান থেকে আমি চাইলেও এই দেওয়ালের কাছে আসতে পারবো না … হে হে

ধরে নিলাম, আমি দেওয়াল ভেঙ্গে ফেলেছি কিন্তু
এইযে এতো বছর ধরে মনের ভেতর আর এক বিশাল দেওয়াল তৈরি হয়েছি সেটার কি হবে ?

ভাবছো আমি নিরাশাবাদী … হে হে না ঠিক তেমনটি নয়, আমি জানি আমি একদিন এই মনের দেওয়ালও ভেঙে ফেলবো, তারপর ?
দেওয়ালের ওপাশে যা আশা করেছিলাম তা থাকবেতো, নাকি সবই ফাঁকি।।

ভাবছি দেওয়ালের প্রতিপালককে ধমক দিয়ে বলি,
ফাজলামি পাইছো, ইচ্ছা হইলো আর দেওয়াল তুলে মজা দেখো না ?
———————————————————————————-
২৫.০৪.২০১০
উৎসর্গঃ একটি অদৃশ্য দেওয়াল এবং তার প্রতিপালককে

….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.

পথকে কখনো ভুলিনি, পথই ভুলে গেছে আমাকে বারে বার,
আর এই পথের টানেই যত অস্থিরতা, ভবঘুরে নেশা।

কখনো স্থির হতে চাই না, তাহলে আমার পথা চলা থেমে যাবে!

১৩।০৪।২০১০
সবাইকে আগাম শুভ বাংলা নববর্ষ ১৪১৭
উৎসর্গঃ তোকে

If you make a wordpress menu using category listing in wordpress then the html code will be like this

WordPress menu as category list(click image to see full)

In the above picture , you see same thing twice , firt one
1. when we are not in any category page(category archive page)
2. when we are in a category archive page , the active category list gets a extra class name “current-cat”
So my post is about when we are browsing any single post how can we mark the the category as “current-cat” that post belongs to so that the active category list can be styled using css.

So to do that I got a plugin (please check here) but i am not happy as the plugin put active class for anchor tag… Please check the plugin code.

function show_active_category($text) {
	global $post;
	if( is_single() ) {
		$categories = wp_get_post_categories($post->ID);
		foreach( $categories as $catid ) {
			$cat = get_category($catid);
			if(preg_match('#>' . $cat->name . '</a>#', $text)) {
				$text = str_replace('>' . $cat->name . '</a>', ' class="active_category">' . $cat->name . '</a>', $text);
			}
		}
	}
	return $text;
}
add_filter('wp_list_categories', 'show_active_category');

and here is my version

function show_active_category($text) {
global $post;
if( is_single() ) {
$categories = wp_get_post_categories($post->ID);
foreach( $categories as $cat )
{
//var_dump($cat);
if(preg_match('#
	<li class="cat-item cat-item-'.$cat.'">#', $text))
{
$text = str_replace('</li>
	<li class="cat-item cat-item-'.$cat.'">', '</li>
	<li class="cat-item cat-item-'.$cat.' current-cat">', $text);
}
}
}
return $text;
}
add_filter('wp_list_categories', 'show_active_category');

you can put the above your in your functions.php file and no need to install an extra plugin.

That’s it.

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

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.

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 ?