When you are designing a website, in some cases you will find your self in a situation where the width of a div element must be dynamically resized taking into account the static width of another div element.

In Joomla, the module output is controlled through the Module Chrome and the file templates/system/html/modules.php. When you insert a module position inside your template index.php file, you usually define a style for it.

The Facebook Like button is undoubtedly the most important Social Plugin. It can boost your website traffic significantly and adds up to your website user interaction.

There are 2 versions of the Like button: the iframe version and the XFBML version.

1. The iframe version

This is the more simple version of the button. Just add this code in the page where you want to display the button:
{code class="brush:html" } <iframe src="http://www.facebook.com/plugins/like.php?href=http://www.minitek.gr&layout=standard&show_faces=false& width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:300px; height:60px;"> </iframe> {/code} Attributes

- href - the URL to like. The XFBML version defaults to the current page.
- send - specifies whether to include a Send button with the Like button. This only works with the XFBML version.
- layout - there are three options.
---- standard - displays social text to the right of the button and friends' profile photos below. Minimum width: 225 pixels. Default width: 450 pixels. Height: 35 pixels (without photos) or 80 pixels (with photos).
---- button_count - displays the total number of likes to the right of the button. Minimum width: 90 pixels. Default width: 90 pixels. Height: 20 pixels.
---- box_count - displays the total number of likes above the button. Minimum width: 55 pixels. Default width: 55 pixels. Height: 65 pixels.
- show_faces - specifies whether to display profile photos below the button (standard layout only).
- width - the width of the Like button.
- action - the verb to display on the button. Options: 'like', 'recommend'
- font - the font to display in the button. Options: 'arial', 'lucida grande', 'segoe ui', 'tahoma', 'trebuchet ms', 'verdana'
- colorscheme - the color scheme for the like button. Options: 'light', 'dark'
- ref - a label for tracking referrals; must be less than 50 characters and can contain alphanumeric characters and some punctuation (currently +/=-.:_). The ref attribute causes two parameters to be added to the referrer URL when a user clicks a link from a stream story about a Like action:
---- fb_ref - the ref parameter
---- fb_source - the stream type ('home', 'profile', 'search', 'other') in which the click occurred and the story type ('oneline' or 'multiline'), concatenated with an underscore.

2. The XFBML version

This is the more complicated version of the button. It uses the XFBML fb:like tag and Javascript SDK.

The XFBML version gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like.

The code for the XFBML version is like this:
{code class="brush:html" } {/code} You can use the configurator in this page to create your own button.

3. Open Graph Tags

This part is not necessary but it is highly recommended.
Open Graph Tags are tags that you add to the of your website to add more information to the URL to like.
With the Open Graph Tags you can define a title, type, image, url and site name for the URL so that the link is properly displayed in Facebook when someone clicks on the button.
You can use the configurator in this page to get Open Graph Tags for your page.


{loadposition contentlinks}

Adding a twitter "Follow me" button in Joomla is easy. You can add the button inside a module, you can hardcode the button inside your template or can even add the button inside an article.

Button code

First of all you need to grab the button code. You can create your own button here: http://twitter.com/about/resources/followbutton. Configure your preferences and then copy the generated code.
The code will look like this:
{code class="brush:html" } <a href="http://twitter.com/{screen_name}" class="twitter-follow-button" data-show-count="true">Follow @Minitek_gr</a> <script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>

{/code} where {screen_name} is your tweeter screen name.

"Follow me" button inside an article

Here is an example of the Twitter "Follow me" button inside an article:

Follow @Minitek_gr

Just insert the code inside a Joomla article (or a K2 article).

"Follow me" button inside a module

To insert the button inside a module you can either insert the code inside your own custom module or create a new Custom HTML module and insert the code inside the field Custom output.


{loadposition contentlinks}

This tutorial will help you to create a Scroll to top effect with smooth animation.

The essentials

We will be using the jQuery library along with a jQuery plugin called jQueryLocalScroll.

The plugin jQueryLocalScroll actually animates a regular anchor navigation allowing the users to navigate with a smooth scrolling effect. So when a predefined link is clicked, the screen will smoothly scroll to the top instead of jumping to the top.

You need 3 files to create this scrolling effect:

1. The jQuery library - You can download the latest jQuery library here.
2. The jQuery.LocalScroll Minified and
3. The jQuery.ScrollTo Minified - You can download both these files here.

Implementation

What you need to do is to set a link and an anchor, that means to define an id for the element you want to scroll to.
We will create a link at the bottom of the template index.php file (templates/yourtemplate/index.php) and an anchor element at the top of the index.php. So, everytime you click on the link at the bottom of the page, the screen will smoothly scroll to the top anchor.

Firstly you must copy these 3 files jquery-1.6.min.js, jquery.scrollTo-1.4.2-min.js, jquery.localscroll-1.2.7-min.js inside the js directory in your template (templates/mytemplate/js).

Now open the file index.php and insert these lines to the head section:
{code class="brush:php" } {/code} Make sure that you enter the correct names/versions of the files.

Go to the bottom of the index.php file and insert the scroll to top link:
{code class="brush:php" } <a href="http://www.minitek.gr/#totop" title="" rel="nofollow"> Finally go to the top of the index.php file and insert the anchor div:
{code class="brush:html" } <div id="totop"></div> {/code}

{loadposition contentlinks}

Favicons are the small 16x16 icons that appear on the left of the URL in the address bar of your browser as well as on the browser's tabs, in the bookmarks and on your desktop shortcuts.

Method 1

You can easily create a favicon for your website by taking your website logo, resizing it to 16x16 pixels and saving it as a .gif or .png image.

To activate your new favicon:

1. Copy the image in the root of your template.
2. Include this line inside the head tag of your index.php file
{code class="brush:html" } <link rel="shortcut icon" href="http://yoursite.com/templates/your_template/favicon.png" /> {/code} Using this method, the favicon will not appear in Internet Explorer.

Method 2

To ensure that your favicon works in all browsers you must save the favicon image in the official Windows Icon .ico format

1. You can use one of these free online sites to convert your image to .ico format:

http://converticon.com/
http://www.favicongenerator.com/
http://www.htmlkit.com/services/favicon/
http://tools.dynamicdrive.com/favicon/
http://www.favicon.cc/

2. Copy the file to the /joomla/templates/your_template/ directory and name it favicon.ico.
3. Include this line inside the head tag of your index.php file
{code class="brush:html" } <link rel="shortcut icon" href="http://yoursite.com/templates/your_template/favicon.ico" /> {/code} 4. To see your new favicon, you must firstly clear the browser cache memory.


{loadposition contentlinks}

Embedding a flash .swf file inside the header of the template is a very common request.

Just follow the steps below.

1. Create a new folder in your template called "flash"

Copy your .swf file inside this folder.

2. Add this code inside the header div in the index.php file of your template

{code class="brush:html "} {/code} Now you're good to go!


{loadposition contentlinks}

Adding a new module position in your joomla template is a very fast and easy task. Just follow the steps described below.

Adding a new module position

1. Locate and open the file index.php

You will find the file inside the root of your template folder.

2. Select exactly where you want to add the new module position.

By using Firefox and Firebug you can see the structure of your template in the frontend so that it is easier to find the exact location where you will add the new position.

3. Insert this code inside index.php

{code class="brush:php" } countModules( 'newposition' )) { ?> <div class="newposition"> </div> {/code} The code above will display the new position only if there is actually a module inside it, otherwise the position will not be displayed.

4. Open the file templateDetails.xml

You will find the file inside the root of your template folder.
Locate the section of the file and insert this {code class="brush:xml;" } <position>newposition</position> {/code}
The new module position is now created. You can style individually the new position with the class newposition.

{loadposition contentlinks}

The built-in Joomla system messages and notifications are usually placed within a template near the top or just above the component area.

A very common request is to open the joomla system messages in a nice modal window.

In this tutorial we will be using the Mootools framework to achieve this.

 

Firstly you must insert the "message include" in your template. You can put this above the component include

{code class="brush:html" }

<jdoc:include type="message" />

{/code}

 

Now you must must include the Mootools framework in your template as well as the javascript code that adds the modal window effect.

Put this code at the top section of your template

{code class="brush:html" }

JHTML::_('behavior.mootools');
JHTML::_('behavior.modal');

{/code}

and insert this code inside the <head> section of your template

{code class="brush:javascript" }

<script type="text/javascript">

window.addEvent('domready', function(){
if( $('system-message') ){
SqueezeBox.initialize();
SqueezeBox.open( $('system-message'), {
handler: 'adopt',
shadow: true,
overlayOpacity: 0.5,
size: {x: 600, y: 100},
onOpen: function(){
$('system-message').setStyle('visibility', 'visible');
}
});
}
});

</script>

{/code}

 

The above code does the following:

1. initializes the modal window with "SqueezeBox.initialize()"
2. creates a new modal window and inserts the system message with the id "system-message" in it

This modification works with Joomla 1.5 and Joomla 1.7.

{loadposition contentlinks}

This is a list with the 11 most popular template providers for Joomla that offer top quality commercial and free templates.

1. Joomlart

Go to website

2. Rocket Theme

Go to website

3. Templateplazza

Go to website

4. Shape5

Go to website

5. Joomla Designs

Go to website

6. Hot Joomla

Go to website

7. Joomagic

Go to website

8. Pixels Paradise

Go to website

9. Joomla Monster

Go to website

10. Joomla Bamboo

Go to website

11. JoomlaShack

Go to website


{loadposition contentlinks}