There are two constraints that can limit the file upload size: 1) the code in the web application, and 2) the web host server configuration. The actual limit would be the lower of the two.

Setting Media Upload File Size in Joomla

If the web application is a content management system such as Joomla, then the administrator may be able to set the upload file size in the administrator settings. For Joomla 1.5, it would be in “Site -> Global Configuration -> System -> Media Settings -> Maximum Size”.

PHP Upload File Size

Linux web host server that runs PHP, has a PHP.ini configuration file. Among its configuration parameters are upload_max_filesize and the post_max_size. These can limit the maximum file size that can be uploaded to the server via a webpage regardless of the code of the webpage. So try fiddling with these two parameters in the php.ini file.

Note that there can be multiple locations where the php.ini configuration file exists. You may have to change it in more than one place. You can determine the values of the configuration file that are in effect, by placing a PHP file that displays phpinfo() at the desired location that you want to check. The phpinfo() display can also tell you the php.ini file location. Remember to remove this after checking.

The upload_max_filesize specifies the maximum size of the uploaded file.

The post_max_size sets the maximum size of posted data which affect the file upload site.

Because uploading large files require execution time, max_execution_time and max_input_time can also affect the upload. As can memory_limit.

Another parameter that might affect the upload is file_uploads. Make sure that parameter is set to be “1″.

Alternatives if unable to adjust Max limit of Upload File Size

Depending on the web host, some may not let you adjust the php.ini file settings. You can zip up the file to be uploaded and hope that the compressed size is smaller than the limit. Alternatively you can manually upload the file to the server using an FTP client. See tutorial on how to use the free FTP client FileZilla.

Many people are switching to Google Chrome as the default browser. Because Google Chrome had been the number three browser in the past. But now recently as of December 2011, Google Chrome have surpassed Firefox to become the number two browser — second only to Microsoft Internet Explorer.[reference]

So if you want to switch to Google chrome, see tutorial how to make Google Chrome your default browser.

This is according to ExtremeTech.com where you can see a chart of the StatCounter Global Stats.

In Lynda.com FileMaker Pro 11 Essential Training course, the “Touring the interface” video is especially helpful as it provides an introduction to FileMaker Pro’s four mode: Browse Mode, Find Mode, Layout Mode, and Preview Mode.

If you are already familiar with FileMaker and want to just learn the new features of FileMaker 11, then there is the FileMaker Pro New Features course.

Some companies are still using older versions of FileMaker, for those videos there are …
FileMaker Pro 10 Essential Training

and

FileMaker Pro 9 Essential Training

Ryan explains in this video how to first install Expression Engine 2.0

horizontal CSS tabs

View live code here.

Graphics Used

The graphics looks like this …

Default gradient tab: default_tab.jpg

Highlighted tab…

But instead of using two different graphic files for the two tabs, we combine the default tab and highlighted tab into one graphic as shown.

Combined tab: tabs.jpg

Because the two tab images are on one file, they will load with the single file. This will improve performance due to one less server call to get another graphics file. And it will avoid any “flicker” that may occur if we had to wait for the browser to load a separate image for the hover state.

Page Structure

First, we will start out with a page structure on to which we will place our tabs to be sitting right on top of the gold nav strip.

page structure for horizontal tabs

The code for this page looks like …

code for page structure of CSS tabs

Note that for the sake of simplicity, this tutorial had placed the CSS on the same page embedded in the head section. However, for production code, you should put the CSS in a separate CSS file. Also images will be referenced in the same directory. Again, for production code, they would normally be in a separate directory.

Coding the CSS Based Horizontal Tabs

1. Start by letting the tabs be links in an unordered list…

And we get this …

2. Because different browsers may have different default margins and paddings for ul‘s and li‘s, we set them all to zero first and then we can adjust them later. We give the ul element an id of tabnav and create a CSS rule to select this ul and li’s that it contains.

3.  In the CSS, we remove the bullets that normally appears in the unordered list.  And we remove the underlines that normally occurs in the links for li’s.

4. The main characteristic about horizontal css tabs is that they actually be horizontal.  We make the list items horizontal by floating the li’s.  When we float the li’s, we need to give it a width.  We set the li’s to 88px by 23px since that is the size of our graphic image for one tab.

Now the list items are horizontal …

5. We set the display of the link to be block so that the link will expand to fill the entire width of the li, making the entire tab clickable and not just the text clickable.  This is done with the following CSS …

display:block;

6.  We set the background image of link to be the tab graphic.  We center align the text.  Finally, we stylize the link with a color and font size that is suitable to match the tab graphics…

And we get…

7. Notice that the tabs are much shorter than we would like.  In fact, the tab height is only taking up as much height as needed by the text instead of the full 23px height of the tab graphic.  Therefore, we remove the “height” attribute from the “li” to the “a” selector rule.

And we get …

8.  The text is sitting a little bit too high in relation to the tab graphics, so we add 3px top padding to the link.  But when we add padding to the link, remember to decrease the height by the same amount since “height” in CSS is defined as “content height” and does not include any padding.

9. To create the hover effect where the highlighted tab is displayed when the mouse cursor is over the tab, we add a new CSS rule using the hover pseudo-class where we shift the background image to the left by 88px.  Recall that the highlighted tab image is on the right-half of the graphics file and that each tab image is 88px in width.

We also altered the link color upon hover to better constrast with the highlighted tab.

And here is what it looks like if you hover over the home tab…

10.  If we want the home tab to stay highlighted because this is the “home” page, then we have to add a class to the “home” link to make it different from the rest of the links.  We’ll give it the arbitrary class called “selected” and add the CSS selector rule as shown…

11.  We want the tabs to be sitting on the gold nav strip, not floating near the top of the page masthead.  No problem.  With some graphical measurements, we determined that all we need to do is to move the whole tab structure 71px lower.  We do so by giving a top margin to the ul element, since the ul element is what contains all the tabs.

And now it looks like …

12.  Let’s space the horizontal tabs apart by adding 10px right margin to the li element.

And we got our final product that looks like …

horizontal CSS tabs

And there you have it.

In this tutorial, we will show you how to use FileZilla’s “Quick Connect” feature to transfer files to a web server.

Although this method is the simplest way to connect, it is not the best because it transmits passwords and data over the internet route via “clear text”. Once you have learned the basics of FTP, ideally you will want to use SFTP which is a secured transmission of data as described in our other tutorial.

FileZilla Quick Connect FTP

Step 1: First download and install FileZilla from FileZilla-Project.org. Click on the “Download FileZilla Client” button. It is free.

Step 2: In order to connect to the webserver, you need three pieces of information provided by your webserver administrator: 1) the host name, 2) the username, and 3) the password.

In this example tutorial, we use these three fake pieces of information…

server: example.com
username: someone@example.com
password: 123456

Note that depending on the webhost, the username can in the form of an email address (but it is not a real email address) as in the above or it can be a single word as in “someone“.

Step 3: After you run FileZilla, enter the server, username, password and click the “Quick Connect” button as shown.

Quick FTP connect with Filezilla

Step 4: The pane on the left shows your local disk. The pane on the right shows your webserver. In the left pane, navigate to the files you want to upload. Using the left pane and then drag those files from the left pane to the right pane.

Step 5: When done, disconnect the connection to the server by clicking the disconnect icon.

More info…

• Hostmonster’s Video Tutorial on downloading and using FileZilla
• FileZilla Documentation
• Using FileZilla Site Manager to remember connection info

The text surrounded by the title tags in the HTML code is what the browser will display in the browser window frame and browser tabs.

Joomla title tag

By default, Joomla sets the title tag to be the title of the article being displayed. We want to create a plugin that will append our site name at the end of the title tag as in …

sitename added to title tag

For the purposes of this example, the site name is “Demo Joomla Site”.

Do Not Modify Core Joomla Code

The core Joomla code that controls the output of the title tag is found in …
libraries/joomla/document/html/renderer/head.php

However, it is not considered good practice to alter this file here. Because an Joomla upgrade may wipe out your changes to that file. Altering core Joomla files to get the behavioral changes you want is sometimes known as a “hack”.

Better to Create a Joomla Plugin

Instead, a better way is to create a Joomla plugin that will add our site name to this output without modifying the Joomla core code. We will be inserting new files into the Joomla system instead of altering any existing Joomla files. We will call our plugin “SiteNameInTitle”.

1. Plugins can be in any of the nine plugin groups shown below in the Joomla file system.

Joomla plugin groups

We will put our plugin into the “system” group. So we create two files (sitenameintitle.xml and sitenameintitle.php within the system folder on our local computer (not on the webhost yet). I like to keep all the characters of the filename in lowercase.

2. The sitenameintitle.xml is the plugin installer file. Make it look similar to the following with your own relevant information.

Joomla plugin xml file

The name of our plugin is highlighted in the above. Also note that we put group=”system” and the reference to our second file sitenameintitle.php

3. For our second file sitenameintitle.php, we put the following …

Joomla plugin code

We create a class plgSystemSiteNameInTitle which extends JPlugin. The class name is constructed by convention to start with plg to indicate a plugin followed by the plugin group and by the plugin name.

4. Inside the class, we have a function onAfterDispatch() to handle the event.

First we get our document object by …
$document = & JFactory::getDocument();
We need this to access our title.

We handle the event onAfterDispatch by setting the document title to whatever the document title is currently suffixed by the site name …

$document->setTitle($document->getTitle() . ‘ – ‘ . $mainframe->getCfg(‘sitename’));

We use $document->getTitle() to get our current title. We concatenate it with a hyphen. And we get the site name as configured in the Joomla administrator via $mainframe->getCfg(‘sitename’)

Then we use $document->setTitle to set the new title.

5. Now zip the two files up into a zip file called sitenameintitle.zip

6. In your Joomla Administrator -> Extensions -> Install, browse to pick up the sienameintitle.zip and click Upload File and Install

upload and install plugin

7. You should see “Install Plugin Success”. Note the plugin description from the XML file is also shown here.

Joomla plugin successful

Joomla has just unzipped the two files sitenameintitle.xml and sitenameintitle.php into the plugins/system folder on your webhost.

8. In Extensions -> Plugin Manager, find your new plugin and enable it.

enable Joomla plugin

9. Refresh your browser and see that site name is now added to the title tag…

sitename added to title

Notes:

We can not remove the text “Mozilla Firefox” that you see in the browser frame because that is put there by the browser and not controlled in the title tag HTML code.

This tutorial refers to Joomla version 1.5.14.

WordPress functionality can be customized through the use of WordPress Plugins. If you have a functionality that you want in your wordpress site that can not be found in an existing plugin, you can write your own plugins with a bit of PHP knowledge.

Here are some tutorials to get you started on creating your own WordPress plugins.

• WordPress Codex on Writing Plugin: Best place to start off with is the WordPress Codex documentation as to how WordPress plugin works and how to create one.
• Video for First WordPress Plugin: Mark Jaquith shows us in this video as to how to make a bare minimal wordpress plugin. The plug-in uses the “add_filter” hooks to “the_content” and “the_title” to replace words of “foo” with “bar”.
• WordPress Plugin from Scratch — This tutorial not only shows you how to create a Plugin from the beginning, it also shows more sophisticated use of accessing the database. As of this writing, there appears to be a typo in the code. The call to “get_results” should be “$results=$wpdb->get_results”.
• Adding Administration Menus: When your plugin gets more complicated, you may have the need to add administrator menus.