Tutorials

Tutorials (11)

Embedding HTML in Modules

There are many instances in which a user may want to incorporate HTML code into a module. Typically, this can done using just about any editor. This article offers step-by-step instructions for inserting HTML code using the JCE Editor, or the TinyMCE Editor which is the default editor that comes with your Joomla! application.

After logging into the Administration area, go to the Global Configuration settings for your site to determine which editor you're currently using.

embedhtml1

If you've already installed the JCE Editor, select it. We install with every website package except the Gold this component because it has a lot of features that many users prefer.

embedhtml2

The rest of this article contains two sets of instructions. The first is how to embed HTML code using the JCE Editor, and the second is how to embed the code using the TinyMCE Editor.

 

Embedding Code using the JCE Editor

Open the article or the Custom HTML Module where you'd like to embed HTL code. If you're using a module, you'll have to click on the "Custom Output" tab once the module is open. Locate the "Toggle Editor" link at the top of the editor. This link will allow you to see the HTML source code. Inside the JCE Editor itself, there is also an icon to view the color HTML version of the editor. Please see the screenshot below for both features.

embedhtml3

Below is a screenshot of out the color version of the HTML source code using the JCE Editor function.

embedhtml4

This is the area where you'll cut and paste or alter the HTML source code for your article. Once you're finished, you can close the source code view by selecting the same icon. Be sure to save your work, and you'll be all set.

 

Embedding Code using the TinyMCE Editor

If you're using the TinyMCE Editor, the process is very similar. First, open the article or module that you're working with. In the TinyMCE Editor, locate the "HTML" icon.

embedhtml5

When you select the "HTML" icon, a new window will open for you to edit the HTML code. This is the area where you'll cut and paste or alter the HTML source code for your article or module. Be sure to update your work by selecting the "Update" button.

embedhtml6

After you're done updating the code, save the article, and you'll be all set.

Drop Down/Sub Menu Item

Creating a drop down menu, or a sub-menu, is a popular way to increase the functionality of your site and to keep your articles organized and presentable. Assuming that you've already created menu items, this article will discuss how to create drop down menu items. These are also referred to as sub-menu items. It’s very important to note that not all templates support drop down menus items. Before attempting to add a drop down menu item, review your template settings to be sure your template supports drop down menus.

First, log in to the Administration area (the back end) of your site. Once you’re there, go to the Menu tab and then to Menu Manager.

menumanager

Once inside the Menu Manager, select the menu you’d like to work with. For the purpose of this article, we will work with only one menu titled Main Menu.

selectmenu

Once you’re looking at the menu items for the particular menu you’d like to work with, select the “New” button to create a new menu item. In the example images, we’re going to create a drop down menu item for an article on Joomla! 3.0 This will appear under the Category Blog Menu Item.

menuitems

Once in the New Menu Item, you’ll want to do the following:

First, select which Menu Item Type you'll work with.

selecttype

For the purpose of this article, we will use a Single Article Menu Item Type so next, select Single Article under Articles.

singlearticle

 Next:

  1. Select the article you would like to connect to this menu item.
  2. Create a Title for your Menu, this is what will actually appear on your menu.
  3. Check the Menu Location - this should already show the menu you want to add the drop down to, if not, select which menu you want to add the drop down menu item to.

 dropdownsettings

Next, under Parent Item, select the parent item under which the new Menu Item will appear. This is an important step – this is where you actually tell Joomla! to make this a drop down menu item.

parentitem

Once you save your work and return to the Menu Manager, you’ll see the new article you created. Notice how it is indented underneath the parent item. This is how you can be sure it is a drop down menu item.

menuitemindent

Return to the front end of your site. The drop down menu item should appear underneath the parent item when you hover your mouse over the parent item. If the main menu is active in any other location, the drop down menu item will also appear there.

 submenupage

Create an Article Menu Item

Many Joomla users are traditional consumers of the content management system. They access the Administration area (the back end) of their site to create and edit categories, articles, menus, and modules. Did you know that you can also create a user account login area on the front end of your site for creating and editing articles? This article explains how to add a "Create Article" Menu Item Type so that users can create an article from the front end just like what is done in the back end. This is an advanced feature of Joomla! that enables administrators to allow other users to add an article without having to log in to the back end. It is important to note that in order to have the Create Article Menu Item function properly, you need to create a User Login Module for the front end of your site.

To create a Create Article Menu Item, log in to the Administration area (the back end) of your Joomla site, and go to the Menu tab, and then to Menu Manager.

menumanager

Select which menu you’d like to work with. For this Menu Item Type it will most likely be the User Menu that you use for this feature.

selectmenu

Select the New button to create a new Menu Item.

newmenuitem

While creating the new Menu Item, you’ll press the “Select” button to select which the Menu Item Type. 

selecttype

When you click the Select button you will see a list of Menu Item Type categories or groups. Select the 'Articles' group and it will expand to show your Articles Menu Item Type choices.

selectarticles

Select the 'Create Article' Menu Item Type.

createarticletype

Add a Title for your Menu Item. The Title is text that will appear on the menu. Remember to save your work.

createarticlesettings

Go to the front end of your site, hit refresh, and you will be able to see the Create Article Menu Item you created.

createarticlepage

At this point you have successfully installed a Create Article Menu Item. Remember, in order to actually create the article, you have to create a Login Module for the front end of your site.

 

Editing Articles from the Front End

Many Joomla! users are traditional consumers of the content management system. They access the Administration area (the back end) of their site to create and edit categories, articles, menus, and modules. Did you know that you can also create a user account login area on the front end of your site for creating and editing articles? This article explains how to edit an article from the front end of your site to increase the site’s overall functionality.

To effectively edit an article through the front end of your site, you must first create a login module in the front end. To edit an article, log in to the user account from the front end. As the Super User for the site, you will have the permission to edit the article from the front end. For other users who are not a Super User, you may want to visit the User Manager to assign the "edit" permission to individual user groups.

editfrontend1

Once you’ve logged in, open the article you’d like to edit. Look for the edit icon. All templates are different, and the edit icon looks differently for each template. Click on the edit option.

editfrontend2

Once you select that icon, you will see an editor open up that looks like the edit article area in the back end of your site. From here you are free to edit the article. Use the different tabs to access publishing, language, and metadata details for the article. Be sure to save your work when you're done.

editfrontend3

Once you save your work, you will return to the regular view of the front end of the site. You have now successfully edited an article from the front end of your Joomla! site. Congratulations.

Embedding a Module into an Article

One of the many core features of Joomla is the Load Modules Plug-in. In the past, users had to search, download, install, and enable a Plug-in that would let them put a Module within an Article. This tutorial illustrates how to embed a Module into an Article using the core Joomla Load Modules Plug-in.

Enabling the Load Module Plug-in

After logging into the Administration area (the back end) of your Joomla site, check to see if the plug-in is enabled by going to the Pug-in Manager. Go to Extensions > Plug-in Manager.

loadmodule1

Make sure that the "Content-Load Module" plug-in is enabled. Check the box next to the Module's name and click on the Enable button in the toolbar or simply click on the enable icon to enable/disable the plug-in. the plug-in to open it up.

loadmodule2

If you click on the plug-in name it will open it up and there are instructions on how to use it. The next step is to set up a Module.

 

Setting up the Module

After enabling the plug-in, open the Module that you'd like to feature inside the Article. As you set up the module, make sure it's published, but don't select a position for the module from any of the templates that you've installed. Instead, use a unique word for the position of the module. For the purpose of this article, we're embedding a calendar module into an article, and we typed in the word "unique" for the module position instead of selecting a position from our template. Be sure to save your work when you're done.

loadmodule3

Next, go to the "Menu Assignment" tab. Display that module only the menu item(s) where you want it to appear. For the purpose of this article, we are putting the calendar module only on the Reservations menu item. Be sure to save your work when you're done.

loadmodule4

After saving the Module with the unique position and making sure that the menu assignment is correct, go to the Article Manager.

Loading a Module into an Article

After creating the module, open the article where you'd like to embed the Module. Place your cursor where you'd like the module to be, and type . For the purpose of this article, we typed in "unique" in the tag because we titled our module position "unique". Be sure to save your work.

loadmodule5

Return to the front end of your site, refresh the page and you will see the module embedded into the Article. 

loadmodule6

 

Inserting Page Breaks

The Page Break feature allows you to create an index or “menu” system within an Article. Page Breaks can be added to break up longer Articles into different sections, all in an attempt to stay organized and improve the usability of your site & articles. This article explains how to insert and edit the Page Break function using the core Joomla Page Break function and the Page Break function within the JCE Editor.

Inserting a Page Break using Core Joomla functions

After logging into the Administration area (the back end) of your Joomla site, go to the Article Manager and open the article you'd like to work with. After the article is open, determine where, within the Article Text area, you'd like to insert the page break. Click on the "Page Break" button at the bottom of the article text area.

pagebreak5

A small window will open asking you to create a Page Title. You can create your own Title & Alias or Joomla will auto-fill those fields for you. You can come back and edit these later if the content of your article changes. After creating the Title, click on the "Insert" button.

pagebreak6

A grey bar will appear within the article text indicating that your Page Break is now present.

pagebreak3

 

Inserting a Page Break using the JCE Editor (recommended)

After logging into the Administration area (the back end) of your Joomla site, go to the Article Manager and open the article you'd like to work with. After the article is open, determine where, within the Article Text area, you'd like to insert the page break. Place your cursor where you'd like the Page Break to go, and then click on the Page Break button underneath the Article Text area.

pagebreak1

A small window will open asking you to create a Page Title. You can create your own Title & Alias or Joomla will auto-fill those fields for you. You can come back and edit these later if the content of your article changes. After creating the Title, click on the "Insert" button.

pagebreak2

A grey bar will appear within the article text indicating that your Page Break is now present.

pagebreak3

If you'd like to edit the Page Break, simply highlight the bar and click on the Page Break button in the editor again.

 

Page Breaks and the front end

After inserting all of the Page Breaks into the article, save your work, return to the front end of the site, and navigate to the article where you made the changes. You will see that the longer article is now broken down into different sections, and those sections are indexed within a small menu. The front end user now has a few options for navigating through this longer article.

pagebreak4

 

Inserting the "Read More" Button

The “Read More” function is exclusive to the Category Blog Menu Item Type. Occasionally we'll have a client enable the Read More function and then ask why it doesn't show up in a Single Article or Featured Articles Menu Item Type. That's because it's only available for the Category Blog. This article offers a little bit of insight into the "Read More" function, how it enable it, where it works, how to insert the actual Read More button, and how it works.

Enabling the Read More Function

After logging into the back end of your site, go to the Article Manager.

articlemanager.jpg

Once inside the Article Manger, click on the "Options" button in the toolbar.

articleoptions.jpg

Under the Articles tab, there are a few things to "Show" to in order to enable the Read More function within a Category Blog.

First, "Show" the Intro Text so that the entire Article will be displayed once the Read More button is selected. Once the Read More button is pressed, the user will be directed to a new page that displays the Article. If the intro text is hidden, only the portion of the Article that is not shown will appear. If you elect to "Show" the Intro Text, the entire Article will appear once the read more button is pressed.

articleoptionspart1

Secondly, "Show" the Show "Read More". This is the actual Read More button. If you do not show this feature, no button will appear.

Thirdly, you can elect to "Show" the "Show Title with Read More" option. This will include the title of the Article inside the Read More button along with the words "Read More".

articleoptionspart2

Be sure to Save & Close the Article Options window.

 

Inserting and Configuring the Read More Button

After enabling the Read More functions within the Article Options area, open up the Article where you'd like to insert the Read More button. Determine the location of where you'd like to insert the Read More button and place the text cursor there.

readmore4

There is a Read More button within the JCE Editor that will allow you to insert the Read More button, and there is also a core Joomla! Read More option at the bottom of the Article Text area. Both of these functions produce the same result. Select one of them and you will see a large gray box appear in the Article text. This represents the Read More button.

readmore5

In Article Options in the Parameters Area there are some additional options that relate to the Read More button. For instance, you can elect to "Show" or "Hide" the Intro Text of individual Articles.

showintrotextpart1

You can customize the Read More with the "Read More Text" option. If this field is blank, it will display the words "Read More", but you can type in "Continue Reading", for instance, and that is what will be displayed in the button. Be sure to click on the Save button in the toolbar when you complete your work.

showintrotextpart2

Return to the front end of your site and refresh the page. Go to the Category Blog that you created and you will see the Read More buttons you created. 

readmore7

If you click on the Read More button, the entire Article will appear in a new page.

readmore8

 

Linking Articles

There are different ways to link articles, or pages, together using Joomla! 3.0. There is a core Joomla! functionality approach, and a way to link using the JCE editor (which is a third party extension). This article contains step-by-step instructions for linking two articles together using core Joomla! functionality and a function found in the JCE Editor.

Linking Articles together using core Joomla! functions

Log in to the Administration area (the back end) of your site, go to your Article Manager, and open the Article where you'd like to create the link. Once the article is open, you'll notice four settings that you can control at the bottom of the area where you insert text.

30linking1

Once the article is open, highlight the text that you would like to link to another article, and select the "Article" link that is below the Article Text area. 

30linking2

In the window that opens, select the article where the link will be directed.

30linking3

Once you select the article, you will be returned to the Article Manager. Notice how the text you highlighted has changed to match the title of the Article that you linked. Unfortunately, there is no way to change this feature. If this doesn't work for you, can download and install the JCE Editor for your site and follow the directions below.

30linking4

Be sure to save your work. Return to the front end of your site, and open the Article where you created the link. Test it; it should be active.

30linking5

 

Linking Article together using the JCE Editor

You're other options to link articles together is using the JCE Editor. Log in to the Administration area (the back end) of your site, go to your Article Manager, and open the Article where you d like to create the link. Once the article is open, highlight the text that you would like to link to another article, and look for the chain link icon inside of the editor.

30linking6

In the window that opens, you can add an external URL to direct the link outside of your site, or you can open the Content area to create the link internally. You can also specify if you'd like the link to open up in a new window, in the current window, etc. This is the "Target" field.

30linking7

Once you make your selections, you'll see that the link is active, but, unlike the link that was created with the core Joomla! functions, the text didn't automatically change.

30linking8

Save your work. Return to the front end, hit refresh, and you can test the link to see if it works.

30linking9

 

Linking Files to Articles

Linking the text of an Article to a file can be useful in many ways. For instance, some users create documents using a word processor, and don't want to loose the formatting or special features of the text (when cutting and pasting the text into the Article text area). You can upload different file types (.pdf, .zip, .doc, .xls, etc) to your Media Manager, and then link text or images within an Article directly to the file using the JCE Editor. There is also a way to use the JCE Editor to browse your PC to select specific files. This article contains step-by-step instructions for linking the text of an Article to a file in your Media Manager or a file saved to your computer.

First, save your document as on your computer. When saving the document, make sure there are no spaces in the name (Joomla won't recognize the file if there are spaces). For the purpose of this article we will illustrate how to do this using a .pdf file. Now, select the method you want to use: uploading a file to the Media Manager, or simply just browsing your PC for the file.

How to link the text of an Article to a file in your Media Manager

Next, after logging into the Administration area (the back end) of your site, go to your Media Manager.

linkfile1

Once inside the Media Manger, click on the "Upload" button and then click on the "Choose Files" button to select the file from your computer. Once you select it, and the name of the file appears in the field, select the "Start Upload" button.

linkfile2

When complete, you'll receive the "Upload Complete: filename.pdf" message and you'll se the file in your Media Manager.

linkfile3

Next, open the article where you want to create the link. Once the article is open, highlight the text or the image that you'd like to link, and click on the chain link icon in the JCE Editor.

linkfile4

The link window will open, and to select the file you uploaded to your Media Manager, click on the add file button next to the URL field.

linkfile5

Select your file from the list that appears in the File Browser window and click on the "Insert" button.

linkfile6

You'll be redirected back to the Link window where you'll see the path to your file in the URL field. Consider selecting a target for the link, and then click on the "Insert" button.

linkfile7

You'll notice that the highlighted text in the JCE Editor will have an active link. Save your article and return to the front end of the site.

linkfile8

On the front end, you'll see your link.

linkfile9

Click on it, and the file should open. Some of your visitors may have a browser that cannot render certain file types to view in the browser. In this case, the browser will download the file for them to view.

 

How to link the text of an Article to a file on your computer

It's possible to upload a file directly through the JCE Editor. To do this, open the article where you'd like to create the link. Highlight the text or image that you'd like to link, and click on the link icon in the JCE Editor.

linkfile4

The link window will open, and to select a file from your computer, click on the add file button next to the URL field.

linkfile5

In the "File Browser" window, click on the upload file button to browse your computer for the file.

linkfile10

In the Upload window, click on the "Browse" button to browse and select a file from your computer. Once the file appears in the window, click on the "Upload" button.

linkfile11

Select your file from the list that appears in the File Browser window and click on the "Insert" button.

content6

You'll be redirected back to the Link window where you'll see the path to your file in the URL field. Consider selecting a target for the link, and then click on the "Insert" button.

linkfile7

You'll notice that the highlighted text in the JCE Editor will have an active link. Save your article and return to the front end of the site.

linkfile8

On the front end, you'll see your link.

linkfile9

Click on it, and the file should open. Some of your visitors may have a browser that cannot render certain file types to view in the browser. In this case, the browser will download the file for them to view.

Publishing or Deleting Trashed Articles

If you have deleted an Article from your Article Manager, it hasn't actually been deleted entirely from your Joomla site. Joomla keeps these deleted articles just in case you need them again in the future. You can actually restore and publish the article again, or you can delete it completely from your site. This article explains how to delete or publish a trashed article.

Publishing a Trashed Article

After logging into the back end of your site and going to the Article Manager, select "Trashed" from the Status drop down menu item. This will show a list of all the articles that you have trashed in the past. To publish these articles again, check the box next to the name of each article that you'd like to publish, and click on the Publish button in the toolbar.

publishtrashedarticle1

The article(s) selected will be republished and will once again appear in the Article Manager as "Published" articles.

 

Deleting a Trashed Article

If you'd like to delete any or all trashed articles from the Article Manager entirely, first select "Trashed" from the Status drop down menu item to view the "Trashed Articles". Click on the box next to the name of each article that you'd like to delete permanently, and click on the "Empty trash" button in the toolbar.

publishtransedarticle2 5

You will receive a message indicating that the article was successfully trashed. At this point, it is gone completely and cannot be restored unless you do an entire site restore from a previously created backup.

 

Go to top