Pretty Buttons manual

Below you will find the following manuals for "Pretty Buttons":

• Installing Pretty Buttons with the download
• Installing Pretty Buttons with Install from Web
• Configuration of Pretty Buttons
• Assign or adjust module position / page view Pretty Buttons
• Update Pretty Buttons
• Uninstall Pretty Buttons

Installing Pretty Buttons with the download

These steps download Pretty Buttons and install it in Joomla by uploading the file.

1. Download the Pretty Buttons module from GitHub (free, no account needed):
   
   Download Pretty Buttons
   
   Under Assets, click Source code (zip) (1). The file is downloaded. Do not unzip it, and remember where you saved it.
   
   
2. Open the back-end (administrator) of Joomla, usually at https://<yourdomain>/administrator/. Enter your Username (1) and Password (2) of a Super User account and click Log in (3).
   
   
3. In the menu on the left, click System (1).
   
   
4. In the block Install, click Extensions (1).
   
   
5. The tab Upload Package File (1) is open. Drag the ZIP file into the frame (2), or click the green button Or browse for file (3), select the file and click Open.
   
   
6. The module is installed right away. The message "Installation of the module was successful." appears (1).
   
   
7. You can now set up the module. See Configuration of Pretty Buttons.

Installing Pretty Buttons with Install from Web

These steps install Pretty Buttons straight from the Joomla Extensions Directory, without downloading a file. The tab Install from Web is provided by the plugin Installer - Install from Web. If you do not see the tab, click System, then Plugins, search for "Install from Web" and enable the plugin.

1. Log in to the back-end (administrator) of Joomla with a Super User account. You usually find it at https://<yourdomain>/administrator/. Then click System in the menu on the left, as in steps 2 and 3 of the first manual.
2. In the block Install, click Extensions (1).
   
   
3. Click the tab Install from Web (1). Type Pretty Buttons in the search field (2) and click the magnifying glass (3).
   
   
4. Click Pretty Buttons in the results (1).
   
   
5. Click the green button Install (1).
   
   
6. Joomla shows the name of the extension and the address it is installed from. Confirm with the blue button Install (1).
   
   
7. The module is installed. The message "Installation of the module was successful." appears (1).
   
   
8. You can now set up the module. See Configuration of Pretty Buttons.

Configuration of Pretty Buttons

These steps set up the module after you installed it with one of the manuals above. The example makes a contact block with three buttons.

1. Log in to the back-end (administrator) of Joomla with a Super User account. You usually find it at https://<yourdomain>/administrator/. Then click System in the menu on the left, as in steps 2 and 3 of the first manual.
2. In the block Manage, click Site Modules (1).
   
   
3. The installation has added a module called Pretty Buttons. It is not published yet and has no position. Click its title (1).
   
   
4. On the tab Module:
   • Change the Title (1), for example to Contact.
   • With Title on the right (2) you choose whether the title is shown on the website: Show or Hide.
   • Choose the Position (3) of your template where the buttons should appear. In this example with the Cassiopeia template: Sidebar-right [sidebar-right].
   • Set Status (4) to Published. A new module is always unpublished.
   
   
   
5. Click the tab Buttons (1). The first settings apply to all buttons of this module:
   • Block column layout (2): choose Yes to show the buttons below each other at full width, or No to show them next to each other.
   • Custom Outer Div Class (3): CSS classes for the block around the buttons. The default py-3 adds some space above and below.
   • Enable Custom ARIA Label (4): choose Yes if you want to give each button its own description for screen readers. An extra field ARIA Label then appears for every button.
   • With the green plus button (5) you add a button.
   
   
   
6. Fill in the fields of the button:
   • Button Text (1): the text on the button, for example Send an email. Leave it empty for a button with only an icon.
   • URL (2): where the button links to. This can be a web address (https://...), an email address (mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.), a phone number (tel:+31201234567), a WhatsApp link (whatsapp:) or a path on your own site (/contact).
   • Target (3): open the link in a new window (BLANK) or in the same window (SELF).
   • Icon Class (4): the class of a Font Awesome icon shown in front of the text, for example fa-solid fa-envelope for an envelope. Leave it empty for no icon.
   • ARIA Label (5): the description that screen readers read out. This field is only there if you enabled it in the previous step. If it is empty, the button text is used.
   • Bootstrap 5 Button Classes (6): tick btn and a colour such as btn-primary. You can add btn-lg or btn-sm for a larger or smaller button, and BS5 full width button (W-100) for a button over the full width. With Custom Class an extra field appears for your own CSS class. The colours shown here are examples; your template decides how the buttons look on the website.
   • With the green plus button (7) you add another button below this one, and with the red minus button (8) you remove this button. With the arrows on the left you change the order.
   
   
   
7. Click the tab Extra Content (1) if you want text around the buttons. The text of Content Before (2) appears above the buttons, the text of Content After (3) below them. Both are optional.
   
   
8. Click the tab Menu Assignment (1) and choose at Module Assignment (2) on which pages the module is shown:
   • On all pages: on every page of the website.
   • No pages: on no page at all.
   • Only on the pages selected: only on the menu items you tick in the list (3).
   • On all pages except those selected: on every page, except the menu items you tick.
   
   
   
9. Click Save (1) to save and keep the module open, so you can check the result on your website and adjust it. Click Save & Close (2) when you are done.
   
   
10. The result on the website (1):
    
    

You can find examples here: https://extensions.tlwebdesign.nl/en/pretty-buttons

Assign or adjust module position / page view Pretty Buttons

These steps move Pretty Buttons to another module position or change the pages it is shown on.

1. Log in to the back-end (administrator) of Joomla with a Super User account. You usually find it at https://<yourdomain>/administrator/. Then click System in the menu on the left, as in steps 2 and 3 of the first manual.
2. In the block Manage, click Site Modules and then click the title of your Pretty Buttons module. The column Type shows which modules are of the type Pretty Buttons.
   
   
3. On the tab Module, choose the new Position (3) on the right.
   
   
4. Click the tab Menu Assignment (1) and choose at Module Assignment (2) on which pages the module is shown. With "Only on the pages selected" and "On all pages except those selected" you tick the menu items in the list (3).
   
   
5. Click Save & Close and check on your website that the module is shown on the right pages.

Update Pretty Buttons

When a new version is available, Joomla shows it in the back-end, just like updates of other extensions. Important: always make a backup of your website before updating!

1. Log in to the back-end (administrator) of Joomla with a Super User account.
2. On the Home Dashboard, in the block Notifications, click Updates are available! (1). You can also click System and then, in the block Update, Extensions.
   
   
3. Tick the box in front of Pretty Buttons (1) and click Update (2). In this example the module goes from version 1.2.0 to 1.3.0.
   
   
4. The message "Updating module was successful." appears (1).
   
   
5. Check on your website that Pretty Buttons still works properly.

Uninstall Pretty Buttons

If you no longer want to use Pretty Buttons, you can uninstall it. All Pretty Buttons modules you made are removed as well.

1. Log in to the back-end (administrator) of Joomla with a Super User account. You usually find it at https://<yourdomain>/administrator/. Then click System in the menu on the left, as in steps 2 and 3 of the first manual.
2. In the block Manage, click Extensions (1).
   
   
3. Type Pretty Buttons in the search field (1) and click the magnifying glass (2).
   
   
4. Tick the box in front of Pretty Buttons (1), click Actions (2) and then Uninstall (3).
   
   
5. Joomla asks whether you are sure. Click Yes (1).
   
   
6. The extension is removed. A message confirms that uninstalling the module was successful (1).
   
   

If you run into a problem, let us know with the button below. This is the only way we can improve this extension.

Report problem

If you are satisfied, please leave a review on the Joomla Extensions Directory: https://extensions.joomla.org/extension/pretty-buttons/

Thanks in advance!