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 mysites.guru, 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.
Summary
Introduction: Tim Davis discusses the challenge of XTD buttons appearing below the editor in Joomla articles.
Sponsorship: Sponsored by mysites.guru, 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 â–º
Joomla Training Cohort â–º https://cybersalt.com/jtc
Add comment