Joomla 4.x

Joomla 4.x

  • Overview of JEvents (Joomla! 4)

    • How to video:

    Overview

    JEvents is an event management extension for Joomla! that stores calendar-based event information.  The events can be organized by categories, which helps to display them in different groupings.  In fact, events can actually exist in multiple categories in JEvents.   Events can be displayed within a module, or they can be accessed from a menu item.  There are many different types of options for displaying events, including a monthly calendar, a list of events from a category, a list of upcoming events, or a date range of events.

    Accessing JEvents

    You can access JEvents in the Joomla! back-end by going to "Components > JEvents"

    JEvents Add

    Documentation

    These articles provide documentation for working with JEvents:

    • Video Included: Video Included
  • Overview: What is DOCMan? (Joomla! 4)

    • How to video:

    Overview

    DOCMan is an extension for Joomla! that allows you to upload documents to your website, so they can then be downloaded by visitors to your site.

    File vs. Document

    DOCMan defines files and documents as different things:

    • A file is the original PDF, Word document, or other file that you upload to DOCman.  Your file is not accessible on the website until it becomes a document.
    • A document is a link to the file you uploaded, with some additional properties that are specified in DOCMan:
      • A title (which may differ from the file name)
      • A category
      • A description (optional)
      • The status, whether published or unpublished

    DOCman: File is uploaded to DOCman; file becomes document; document displayed on website

    DOCman Documentation

    • Video Included: Video Included
  • Overview: Where does Joomla store files? (Joomla! 4)

    Overview

    In Joomla!, files such as PDFs and images (jpg, png, etc) are all stored in the "images" directory.  The exception is for files uploaded using a third-party document management extension such as DOCman.  These extensions have their own folder structure within the Joomla! website.

    There are multiple ways to upload these files; follow the appropriate links below.

    Uploading files to the "images" folder

    The Media Manager in Joomla! and JCE Editor Pro both allow you to upload files to the "images" folder.

    Media - for image files (gif, jpg, png, etc).

    JCE Editor File Browser - for PDF files

    Uploading files with third-party extensions

    DOCman, Ignite Gallery, and JEvents are all examples of third-party extensions that allow you to upload files to Joomla!.  The files are stored by the respective components within their own file structures, not the "images" folder.

    DOCman

    Ignite Gallery

    JEvents

  • People Pages

    • How to video:

    Our people pages on this site can be found within: Leadership and Offices.

    People Pages HowToGuides

    Leadership HowToGuides

    • Video Included: Video Included
  • Re-ordering Articles (Joomla! 4)

    • How to video:

    To manually re-order articles:

    1. Filter for the category of articles to be reordered:
      1. Go to Content -> Articles and click the Filter Options button.
      2. In the "Select Category" dropdown that appears, select the name of the category of articles that need sorting. 
    2. To the upper right, find the filter that displays the number of articles (found below the Options button; see below) and change it from "20" to "All":

      Article number filter
    3. At the top of the leftmost column, there is an icon that looks like up/down arrowheads. Hover over it and you'll see this text:  
                Ordering   
                Select to sort by this column
    4. Notice that below it is a column full of icons that look like three, light gray stacked boxes.
    5. Click the double arrow icon at top of column and the stacked boxes should turn black indicating sorting is active.
    6. Drag each stack of boxes (which correspond to individual articles) up or down so that the corresponding articles are in the correct order.
    7. After doing this, you will need to refresh the front-end of the website in your browser to see the change.

    ordering2

    • Video Included: Video Included
  • Removing a Repeating Event (JEvents) (Joomla! 4)

    • How to video:

    Overview

    If your department has a repeating JEvent on your calendar, you can remove or edit a single instance of the event, or remove all repetitions of a repeating event.

    Procedure

    • Navigate to "Components > JEvents"

      JEvents Add

    • At the JEvents Dashboard, hover the mouse over the left sidebar (or top menu, if the left sidebar does not appear), then select Manage Events.
      .
      • JEvents left sidebar (larger browser sizes):
        JEvents Control Panel: Manage Events
      • Top menu (smaller browser sizes):

        JEvents 3.6.x: Manage Events icon (top menu)
    •  If the event you're looking for doesn't appear, click SEARCH (see #1 below), then change " - Hide Past Events - " to "Show Past Events" (see #2 below):

      JEvents 3.6.x: Show past events

    {slider Removing Specific Instances of a Repeating Event}

    • Find the repeating event you wish to remove/edit. You may need to enter some part of the title into the search bar for this.
    • Click on the 3 lined icon under the title "repeats"
      JEvents: Repeating Event icon

    • Click the checkbox (or checkboxes) for the repeating instance (or instances) of the event you would like to delete (see #1 below).
    • To delete, click the DELETE button (see #2 below).

      JEvents 3.6.x: Delete a repetition of a repeating event

    • The repetitions of the event you deleted will no longer appear on your calendar.

    {slider Removing all Repetitions of an Event}

    • Find the repeating event you would like to edit and click on its Title:

      JEvents 3.6.x: Select a repeating event

    • Once the event opens, select the tab labeled "Calendar" (see #1 below).
    • Under "Repeat type", select "No Repeat" (see #2 below).
    • To enact this change, click "Save & Close" (see #3 below).

      JEvents: 3.6.x: Delete all repetitions of an event

    • All repetitions of your event will disappear from the calendar, except for the original occurrence.


    {/sliders}

    • Video Included: Video Included
  • Removing Text Formatting (Joomla! 4)

    • How to video:

    When pasting text over from Microsoft Word or another source text may have formatting that may not seem visually appealing on your website. In order to keep the text but remove the unwanted formatting:

    1. Open the article for editing.
    2. Highlight the undesirably formatted text.
    3. Click on the eraser icon that appears in the top row of the editor toolbar.  This will remove styling such as color, background, bold, italics.

      removeformatting

    4. Save and close your article.
    5. Check the text from the front end. Be sure to clear your browser's cache or changes may not show.
    6. If formatting has not been removed, there may be some styling left in the HTML code.  We can assist clearing this out by way of an SAS-IT REQUEST.

    Related:  If you wish to add any additional styling you can look at this documentation for more information: Editing Articles (Joomla! back-end) - Define Headings, Styles

    • Video Included: Video Included
  • Reordering Articles in Latest News Enhanced (Joomla! 4)

    Overview

    The Latest News Enhanced extension can display articles using either modules or menu items.  This procedure discusses how to configure article ordering for both options.

    Configuration

    Module

    1. Go to Extensions > Modules.
    2. Click Search Tools.
    3. Change "- Select Type -" to "Latest News Enhanced."
    4. Click the title of the module to be configured. (If there are many Latest News Enhanced modules, changing "- Select Status -" to "Published" may help narrow down the list.
    5. Click the Item Selection tab.
    6. Scroll down the page and look for "Order" (see #1 below).
    7. From the selection box, choose the ordering needed (see #2 below; refer to the options under Ordering Options below).
    8. Save & Close the module (see #3 below).

    LNE

    Component (menu item)

    1. Go to Menus > Main Menu.
    2. Find the menu item to be configured and click on it.  This will match the title of the menu item as it appears in the horizontal "Main Menu." 
    3. Click the "Item Selection" tab. 
    4. Scroll to bottom of the page and look for "Order".
    5. In the drop down selection box, choose the ordering needed (refer to the options under Ordering Options below).
    6. Save & Close the menu item.

     

    LNE

    Ordering Options

    • Console Desc: articles will appear in reverse order from their order in Content > Articles
    • Console Asc: articles will appear in the same order they appear in Content > Articles
    • Recently Created First: articles will be sorted based on their Created Date (newest at top)
    • Recently Created Last: articles will be sorted based on their Created Date (oldest at top)
    • Recently Published First: articles will be sorted based on their Start Publishing date (newest at top)
    • Recently Published Last: articles will be sorted based on their Start Publishing date (oldest at top)
    • Recently Modified First: articles will be sorted based on their Modified Date (newest at top)
    • Recently Modified Last: articles will be sorted based on their Modified Date (oldest at top)
    • Finishing Date Desc: articles will be sorted based on their Finish Publishing date (newest at top)
    • Finishing Date Asc: articles will be sorted based on their Created Date (oldest at top)
    • Recently Created or Modified First: articles will be sorted based on their Created Date or Modified Date, whichever comes later (newest at top)
    • Recently Created or Modified Last: articles will be sorted based on their Created Date or Modified Date, whichever comes later (oldest at top)
    • Random: articles will be shown in random order
    • Popular (Hits): articles will be sorted based on their hits
    • Title Desc: order by alphabetically by article title (descending)
    • Title Asc: order by alphabetically by article title (ascending)
  • SAS Offices

    • How to video:

    Page: https://sas.rutgers.edu/about/sas-offices

    This includes all the people within the SAS Deans office grouped by category. To find a person scroll through this page. For each area we include the address, phone number and a button to go to that specific page with more details.

    Offices HowToGuides

    Some of the SAS Dean’s office pages are stored within the main SAS site, others go to their separate website.

    • Video Included: Video Included
  • SAS Site Updates

    • How to video:

    If you would like to request a change or update information on the SAS Dean’s Office website , please send an email to the SAS Communications and Marketing team members listed below. Please indicate in your email subject line that you are requesting a change to the main SAS website.

    If you have requests for adjustments to your specific departmental or center websites, please create a ticket using our ticketing system: https://ithelp.sas.rutgers.edu/

    • Video Included: Video Included
  • Sliders within articles (Tabs and Sliders) (Joomla! 4)

    • How to video:

    A sample of syntax is below or refer to  the developer's documentation

    Lorem ipsum dolor sit amet, iudico probatus ad vis, pri at prima consetetur consectetuer, cu duo ocurreret imperdiet abhorreant. Ea sed facer munere oportere, vel cu integre delectus. Eligendi noluisse qui id. Et dolore detraxit vel, te his melius ponderum, te eum fugit diceret mediocritatem. Graecis noluisse eloquentiam per at, molestie noluisse usu ex, vel blandit epicurei patrioque eu.

    Erant contentiones mel te. His ei causae iudicabit, ea posse melius qui. Et quo nusquam quaestio, facilis argumentum scribentur pri no. An vero scriptorem vix, dicam mediocrem ius eu. Pri ludus debitis in, modo lorem fugit ea sit, scripta gloriatur nam eu.

    Eu meis molestie vis, qui postea quaeque inermis id. Elitr iudico aliquam vim cu, erroribus prodesset no vis. In paulo gubergren vis, ex timeam elaboraret duo, paulo altera docendi ut nam. Ex sint debet vel, dicit suavitate in qui, ut vitae putant per. Ut wisi placerat nam, vel viris constituam inciderint ex.

    Partem vulputate quo id, dico intellegam sit in. In nam possit pericula tincidunt, ei solet mediocrem dignissim sed. Vix ea tota viris graeco, tota everti ex nec. Timeam sanctus electram ei mei, sit ei paulo alienum. Quis temporibus ad has, te his elitr mucius.

    • Video Included: Video Included
  • Spacing Between Lines (Joomla4!)

    • How to video:

    Pressing the <ENTER> key creates a <P> tag, or a new Paragraph, in Joomla!  This will display an extra line space between the previous paragraph and the new paragraph (see example at lower left).  Based on your website's configuration, you will probably see a small "P" to the upper left of each paragraph.  This will not appear on the front-end of the website.

    Pressing <SHIFT>+<ENTER> keys together creates a <br/> tag, or a Line Break, where there is no spacing in between the lines (see example at lower right).

    work with spacing by pressing Enter or Shift+Enter

    If you apply a style to a paragraph, it will not carry over to the next paragraph.

    If you apply a style to a line of text separated from other lines by line breaks, the style will affect all the text separated by line breaks.

    • Video Included: Video Included
  • Students

    • How to video:

    Page: https://sas.rutgers.edu/students

    Our students page focus is to guide students for all ‘things’ School of Arts and Sciences. Some of the pages in this section will take them to the various websites to assist them better. The main landing page includes buttons that are relevant for all students.

    • Prospective Students
    • Undergraduate Students
    • Graduate Students
    • International Students
    • Honors Program
    • Scholarship and Aid
    • Convocation
    • Helpdesk

    Students HowToGuides

    • Video Included: Video Included
  • Styling Text and Paragraphs (Joomla4!)

    • How to video:

    Article Editing

    Go to Content > Articles, then select the article by clicking on the article title. This will bring you to the Articles: Edit page.

    Screen Shot 2023 02 27 at 3.26.43 PM

    Add Styles to Text in Articles

    While editing an article it is possible to change basic formatting of your text.  For example, to make the text red, highlight the text and select ‘red-text’ or ‘red-phrase’ from the "Styles" dropdown menu.  All of these styles are defined at the template level, so they are easy to apply, and will keep a standard ‘look’ on your pages.

    A guide to all editor buttons can be found below:

    https://www.joomlacontenteditor.net/support/documentation/56-editor/340-editor-buttons

    Highlight the text you want to apply the style to

    Click the "Styles" dropdown and select the style that you would like to use

    Add Heading Styles

    Select text, then click on the 'Paragraph' dropdown to select a heading style

    Heading Styles should only be used to define a ‘hierarchy’ of information in your article.  Users with disabilities often rely on screen readers to navigate a web page based on the placement of headings within the text.

    For example, you can use "Heading3" to define titles for different areas of the article (in this example, "Instructors" and "Course Description" have been formatted with Heading3).

    Defining different areas of the article with "Heading3" format

    • Video Included: Video Included
  • Unlocking Articles (Joomla! 4)

    • How to video:

    This document explains how to unlock a Joomla! article that is under editing. 

    An item can become 'locked', because someone is in the process of editing it, or they were editing it, and never hit 'cancel' or 'save', which means Joomla keeps the article locked.  The purpose of this is to prevent a Joomla article from being edited by multiple users at the same time.  It's a good idea to always check if someone is working on a specific article.  If you 'kick someone out' of editing, their changes may not be saved in the system.  We also recommend to frequently SAVE your work as you are working.  The last save will always be kept.

    1. Get the name of the article (welcome for example).
    2. Select Articles from the Content menu:
    3. Screen Shot 2023 02 14 at 4.01.53 PM
    4. Type WELCOME in the search bar to see all of the welcome articles.
      Screen Shot 2023 02 14 at 4.04.26 PM
    5. If any articles have a lock on it:
      • Hover your mouse of the lock, this way you can see who started editing the article and when.
      • Click on the lock, and you will 'kick them out', and unlock the article that is being worked on.
        Screen Shot 2023 02 14 at 4.08.11 PM
    • Video Included: Video Included
  • Unpublishing and Re-Publishing a Document (Joomla! 4)

    Overview

    In DOCman, you can unpublish a document without deleting it from your web site.  If you need to display the document again, you can easily re-publish it.

    Procedure

    1. In the Administrator interface, select Components > DOCMan > Documents:
      Screenshot_2023-06-06_at_2.44.02_PM.jpg
    2. If the document to be unpublished doesn't appear in the list, select the category containing the document from CATEGORIES > All Categories (see #1 below).
    3. Click the check box to the left of your document's name (see #2 below).
    4. Click the Unpublish button above the list of documents (see #3 below).
    5. The "Status" column will display "Unpublished" for your document, meaning that it will no longer be visible from the front-end of the web site.
    6. If you need to publish it again, click the check box to the left of your document name (see #2 below).
    7. Click the Publish button above the list of documents (see #4 below).Screenshot 2023 06 15 at 12.40.22 PM

  • Updating DOCman Documents with New Files (Joomla! 4)

    This document explains how to update published DOCman documents with new files, on web sites using the SAS Content Management System (CMS; Joomla! 3.x) with the DOCman document manager component for Joomla! installed.


    1. Updating a Document with a New File of the Same Name

    If you need to upload an updated version of a file after you have already uploaded and published it to your web site, all you need to do is replace the original file:

    • Click on the "Components" menu, and select "DocMan" > "Files:"

      Screenshot 2023 06 06 at 2.44.02 PM
    • Click on the Upload button at the top 
    • You can either drag your file to the Drop files here area in the middle of the Files page (see #1 below), or click the Upload button (see #2 below).
    • If you clicked the Upload button, locate your document in the File Upload window. When you find the file, click Open or double click on the file.

      Screenshot 2023 06 20 at 12.57.22 PM

    • Click OK when asked if you want to overwrite the file with the same name that already exists:

      DOCman: Overwrite Existing File

    • Your document should now be updated with the new file.

    2. Updating a Document with a New File of a Different Name

    You may need to replace a DOCman document with a file of a different name.  The process is similar to the above, but with a few extra steps.

    • Click on the "Components" menu, and select "DocMan > Documents"

      Screenshot 2023 06 06 at 2.44.02 PM

    • Click on update at the top
    • You can either drag your file to the "Drop another file to update area" (see #1 below), or click the Update button (see #2 below).
    • If you clicked the Update button, locate your document in the File Upload window. When you find the file, click Open.
    • Click the Save & Closebutton at the top (see #3 below).

      Update DOCman document with new file of different name

    • Your document should now be updated with the new file.
  • Uploading a file using JCE File Browser (Joomla! 4)

    • How to video:

    Overview

    When uploading a PDF or non-image format file, use JCE File Browser instead of Media (used for images).  A bug in Joomla! prevents PDF files from being uploaded via Media.

    Procedure

    1. In the Joomla! back-end (Control Panel), go to Components > JCE Editor Pro > Control Panel

      JCE upload
    2. Click on the File Browsericon:

      JCE Editor Pro "File Browser" icon
    3. Once in the File Browser, look under Folders to the left. 
      • To upload directly to "images," don't select a folder; just proceed to the next step ("Click the Upload icon...")
      • To upload to an existing folder, browse to and select the folder.
      • To upload to a new folder:
        • Browse to the folder where the new folder should be located
        • Click New Folder to the upper right (see #1 below)
        • Enter a name for the folder in the New Folder popup window.  Do not use spaces or any special characters other than a dash ("-")
        • Click Create
        • Click on the new folder you created
    4. Click the Upload icon to the upper right (see #2 below)

      JCE Editor Pro File Browser: "New Folder" and "Upload" icons
    5.  Click Browse to the lower right (see #1 below).
      JCE Editor Pro File Browser: "Upload" window: "Browse" and "Upload" buttons
    6. Select one or more files from your computer, then click Upload (see #2 above).
      1. If you get the message "Upload failed!", the file may already exist.  Delete the current file following the next step (7a), then try to upload it again.
    7. Once a file has been uploaded, you can select it, then do the following:
      1. Delete it - see icon #1 below
      2. Rename it - see icon #2 below
      3. Move it, by selecting "Cut" (see icon #4 below), browsing to another folder, and clicking "Copy" (see icon #3 below)
      4. The "View" icon (#5 below) may not work on PDFs, but should work with images.
        JCE Editor Pro File Browser icons: Delete, Rename, Copy, Cut, View
    8. Note: if you rename, move, or delete a file, any links to those files will no longer work.


    • Video Included: Video Included
  • Uploading and linking to files within articles using JCE Editor PRO (Joomla! 4)

    • How to video:

    Overview

    JCE Editor PRO features a new "Insert/Edit File" button that can be used to quickly upload and link to a file while editing an article.  For websites with a small number of PDF files, this is a good alternative to DOCman.

    If you anticipate that your website will need to include dozens of files, DOCman is a better option, since it allows you to move and rename documents without breaking any links to them. 

    Procedure

    • Select an article to edit following steps 1-3 of Editing Articles (Joomla! 3.x, front-end) - Basic Editing.
    • Click the "Insert/Edit File" button:JCE link
    • The "File Manager" popup window appears (see below)
    • Select the folder where the file will be uploaded:
      • To upload to an existing folder, browse to and select the folder (see #1 below)
      • To upload to a new folder:
        • Browse to the folder where the new folder should be located (see #1 below)
        • Click New Folder (see #2 below)
        • Enter a name for the folder in the New Folder popup window.  Do not use spaces or any special characters other than a dash ("-")
        • Click Create
        • Click on the new folder you created
      • Click the Upload icon (see #3 below)

      JCE Editor Pro: Browse to folder, "New Folder" icon, "Upload" icon
    • Upload the file:
      • After clicking Upload, the "Upload" popup window appears (see below)
      • Click Browse to the lower right (see #1 below)
      • Select one or more files from your computer, then click Upload (see #2 below)
        JCE Editor Pro File Browser: "Upload" window: "Browse" and "Upload" buttons
    • Create the link to the file:
      • Select the file you uploaded (see #1 below)
      • Replace the filename in the "Text" field with a short description of the file.  This will appear in your article as text linking to the file (see #2 below)
      • Click Insert to the lower right (see #3 below)

        JCE Editor Pro File Manager: Select file, enter title, click "Insert" button
    •  Your file will appear as linked text within your article.

     

    Example:

    The link to your file will look like:

    pdfCampus Map

    • Video Included: Video Included
  • Uploading and linking to PDF files using JCE Editor (Joomla! 4)

    • How to video:

    Overview

    This page describes how to upload and link to a PDF file using the "Insert link" button.

    To accomplish the same task, but with advanced options, see: Uploading and linking to files within articles using JCE Editor PRO


    1) Find the Link tool.

    Highlight text; select "Insert/edit link" button

    2) Find the Browse button in the Link window.

    • A Link popup window will appear.
    • To the right of the URLfield, click the Browse icon.  It looks like a sheet of paper.

    Click paper icon ("Browse") in Link popup window

    3) Navigate the File Browser.

    • In the File Browser window, browse to the folder where the new file should be stored (see #1 below).
    • Click Upload to the upper right (see #2 below).

    Click File Browser "Upload" button

    4) Upload the file.

    • Click Browse and navigate to the file to be uploaded (see #1 and #2 below).
    • Click Upload (see #3 below).

    Click "Browse," find the file, and click "Upload"

     

    5) Select the uploaded file.

    • Make sure the newly uploaded file is highlighted in the File Browser window and the box to the left of it is checked (see #1 below).
    • Click Insert to the lower right (see #2 below).
    • Click Insert again at the Link popup window.

    Select file and click "Insert"

    6) Save the changes.

    Click Save (or Save & Close in the Joomla! back-end) to save the article.

    • Video Included: Video Included