View source

Many first-time Joomla! users already have a website, often written using HTML with CSS style sheets. In this case, you may wish to keep the existing website structure and just convert it to Joomla!. This section provides instructions for doing this.

= Converting Basic Static Content =

Static content is content that doesn't change frequently. In simple HTML-based websites, each menu choice simply displays a page of content.

== Page Content Conversion ==
The basic steps for converting this type of content are as follows:
# Using the Article Manager, add one article for each page of static content. Each article will contain the contents of one of your existing static pages. Give your articles descriptive names so you can find them again. Select No for Front Page, as shown below.[[Image:Screenshot_article_new.png|frame|center]]
# If you have a relatively small number of pages (e.g., 20 or fewer), you can leave the Section and Category set to "Uncategorized". If you have a large number of static pages, you should create one or more Sections, each containing one or more Categories, and then assign each Article to a Section and Category. This will make it easier to work on articles from one group. For example, when viewing your articles, you can filter or sort articles using Sections and Categories, which is convenient when you have a large number of articles. 
# For each article, you can often just copy and paste the content from your existing site (using your browser) into the edit area of Joomla!. Note: In some cases, depending on the amount of custom HTML in the source page, you may need to copy the page to a plain text editor first (such as Notepad) and then copy from there into Joomla!. By content this means the actual page as shown in the browser window not the View Source code.
# At this point, you have the articles created in Joomla!. Now we need to attach them to menus.
# Determine the menu structure you need. If your existing site just has a single main menu, you will just use the Joomla! "mainmenu" module. If your existing site has a two-level menu structure, you will use "mainmenu" for the top level and then add one new menu for each existing submenu. Add the submenus using the Menu Manager / New option. 
# Using the Menu Manager, press the Menu Items icon and New to add one Menu Item for each article created above.
# Each Menu Item should have the type "Article Layout", as shown below.[[Image:Screenshot_menu_article_layout.png|frame|center]]
# Note: Even if you installed Joomla! with no sample data, you will already have a Main Menu with a Home menu item that has a Front Page type. Depending on whether you want a Front Page, you may either keep this and add new menu items or change this menu item to an Article Layout.
# Enter the Title for the Menu Item. The title can be the same as the article title, so you know which article goes with which menu item. 
# In the Parameters - Basic section, select the article for this menu item.
# Add a Menu Item for each article you created earlier. If needed, add one or more submenus and then add Menu Items for these in the same manner.
# At this point, each article should be associated with one menu choice. Now we need to tell Joomla! on which pages and which location on the page to put each menu.
# First, go to the Extensions / Modules selection. Even if you started with no sample data, you will already have a Main Menu module. Open this for editing to display the Module:[Edit] form, shown below. [[Image:Screenshot_mod_mainmenu.png|frame|center]]
# The Position tells Joomla! where on each page to display the menu module. This may vary depending on the template you are using. Typical menu locations include "top",. "left", and "user3". A trick in Joomla! for seeing the available positions is to add the letters "?tp=1" to the end of a Joomla! URL. For example, if you are working on a localhost site called "joomla15", typing in the URL "//localhost/joomla15/?tp=1" will display a screen showing the positions for your current template, similar to the one below.[[Image:Screenshot_joomla_positions.png|frame|center]]
# The Menu Assignment area is where you tell Joomla! which menu choices will display the current menu. Typically, your main menu will display in all menu selections. If you have submenus, each submenu would typically display in the one main menu item that calls this submenu and in all of this submenu's items. An example is shown below, where the People Menu displays on the "people" selection of the main menu and on all of the selections of the People Menu. [[Image:Screenshot_submenu_selection.png|frame|center]]
# Next, select the Menu Name for this module from the pull-down list. This will be the name of the Menu in the Menu Manager. 
# Next, select the Menu Style. The available styles will vary depending on the template you use. The default template has four available styles. Some menu styles display the menu items in a vertical list (e.g., suitable for the left position), others in a horizontal list. (e.g., suitable for the top or "user3" position).
# If you like, press the Preview link in the upper right corner to display the home page so far. The article you chose for the first item on your main menu should display, along with the main menu, something like the example below. [[Image:Screenshot_home_page_example.png|frame|center]]
# If you have submenus, repeat this process for each submenu, checking as you go by previewing the website.
# Congratulations! At this point, your static content should be available. Now, you can think about adding new modules, adding a front page, or taking advantage of other Joomla! functionality.

=== Graphics Conversion ===
Converting existing graphics from a static website can be very easy or somewhat difficult, depending on several factors. These include:
* how closely your existing layout is to one of the available Joomla! templates.
* how exactly you want the Joomla! site to resemble the existing site.

If you have some knowledge of HTML and CSS, you can adjust a lot in the template by looking at the template.css file in the templates directory for the template you are using. You set the template in Joomla! from the Extensions / Template Manager option. Two templates are included with Joomla! 1.5 and many others are available, either for free or for a charge. See [[Absolute Beginners Guide to Joomla!#Learn the Basics for Joomla! Templating |Learn the Basics for Joomla! Templating ]] below for more information on modifying templates.

Return to the [[beginners | Absolute Beginner's Guide to Joomla!]]