The Joomla Training Cohort has been launched!

Please send any feedback or bug reports to (opens new link)  

The XTD buttons in the Joomla editor area show below the work area by default. In this video we see how to move the XTD buttons from below the Joomla editor to above it.





00:00 Introduction

Tim Davis introduces the topic of moving extended editor buttons (XTD) from below the editing area to above in Joomla.

00:32 Sponsorship

Sponsored by, offering Joomla site management tools with a promo code for a free trial.

01:02 Issue Explanation

Extended buttons (XTD) currently appear below the editor area in Joomla articles, which might not be intuitive for users.

01:41 Solution Overview

Using custom CSS to relocate XTD buttons above the editor area for improved accessibility.

02:11 Acknowledgment

Solution derived from a discussion on the Joomla Facebook page, link provided in the video description.

02:44 Implementation Steps

Navigate to Administrator Templates > Select Template > Create custom.css file in CSS folder.

03:09 Creating Custom CSS File

Detailed steps on creating and saving the custom.css file within the Joomla administrator template.

03:47 Adding CSS Code

Copy and paste specific CSS code provided (code also available in video description) to move XTD buttons.

04:08 Testing

Save CSS file and test by adding a new Joomla article to ensure XTD buttons now appear above the editor area.

04:43 Demonstration

Shows XTD buttons now located above the editor, enhancing user accessibility and interface clarity.

05:14 Conclusion

Encourages likes, subscriptions, and notifications for future Joomla tutorials on the channel.



Introduction: Tim Davis discusses the challenge of XTD buttons appearing below the editor in Joomla articles.

Sponsorship: Sponsored by, offering tools for Joomla site management with a free trial promo code.

Issue Explanation: XTD buttons' current placement below the editor may be confusing for users accessing Joomla articles.

Solution Overview: Using custom CSS to move XTD buttons above the editor area for better user accessibility.

Acknowledgment: Solution originated from a Joomla Facebook page discussion, with a link provided for reference.

Implementation Steps: Navigate to Joomla's Administrator Templates, create a custom.css file in the CSS folder.

Creating Custom CSS File: Detailed instructions on creating and saving the custom.css file within Joomla's admin template.

Adding CSS Code: Instructions on copying and pasting specific CSS code to relocate XTD buttons above the editor.

Testing: Guide on testing the CSS changes by adding a new article to verify XTD buttons' new position.

Demonstration: Visual demonstration of XTD buttons now appearing above the editor, improving accessibility.

This structured outline provides a comprehensive overview of the video tutorial, covering each step from identifying the issue to implementing and testing the solution, ensuring clarity and ease of understanding for Joomla users looking to adjust their XTD button placement.

Please send any feedback or bug reports or queries to;

Contact Tim Davis ► This email address is being protected from spambots. You need JavaScript enabled to view it.

Joomla Training Cohort ►

JTC has been launched and is now accepting members ►
Backing Up Your Joomla Site with Akeeba ►



Monday Maintenance 204

Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.

Written by:
Tim Davis is the founder and owner of Cybersalt.
Log in to comment

Add comment