Skip to content

Customization

ANDI Amine edited this page May 22, 2026 · 5 revisions

Overriding Core Layouts

JoomCCK has some core layouts like:

  • Alpha Index - located in components/com_joomcck/layouts/core/markup/alphaIndex.php
  • On This Page - located in components/com_joomcck/layouts/core/list/onThisPage.php

If you want to override this layouts for a specific section follow this steps:

  • Create a new folder in components/com_joomcck/layouts/apps/
  • Folder name will be section alias in camel case format for example: knowledge-base will become knowledgeBase

Here examples

components/com_joomcck/layouts/apps/knowledgeBase/markup/alphaIndex.php components/com_joomcck/layouts/apps/knowledgeBase/list/onThisPage.php

Customizing Record Buttons (bookmark, follow, repost, compare, print)

Each of the record-action buttons renders from its own layout file, so you can restructure a single button's HTML without touching the rest:

  • components/com_joomcck/layouts/core/list/recordParts/buttonBookmark.php
  • components/com_joomcck/layouts/core/list/recordParts/buttonFollow.php
  • components/com_joomcck/layouts/core/list/recordParts/buttonRepost.php
  • components/com_joomcck/layouts/core/list/recordParts/buttonCompare.php
  • components/com_joomcck/layouts/core/single/recordParts/buttonBookmark.php
  • components/com_joomcck/layouts/core/single/recordParts/buttonFollow.php
  • components/com_joomcck/layouts/core/single/recordParts/buttonRepost.php
  • components/com_joomcck/layouts/core/single/recordParts/buttonPrint.php

The parent buttonsManage.php in each folder is now a thin composition shell that just calls each of the four (list) or five (single) button layouts in order.

Using a button layout on its own

Render any button directly from any template — no need to drop the whole buttonsManage.php btn-group. Example inside a custom list template:

<?php echo \Joomcck\Layout\Helpers\Layout::render(
    'core.list.recordParts.buttonBookmark',
    ['record' => $item, 'type' => $submissionTypes[$item->type_id], 'params' => $params]
); ?>

Data keys expected by each layout:

Layout Required keys
buttonBookmark record, type, params
buttonFollow record, section, params (optional)
buttonRepost record, section
buttonCompare record, type, section
buttonPrint record, params (optional)

Each layout emits nothing if the viewer lacks permission or the record doesn't qualify — same gating that HTMLFormatHelper::bookmark() / follow() / repost() / compare() apply. Those helper methods still exist and now delegate to these layouts, so any existing caller keeps working.

Overriding a single button's HTML

To change the markup of just one button site-wide, drop an override file in your active Joomla template:

templates/<your-template>/html/layouts/core/list/recordParts/buttonBookmark.php

Section-specific override (same rules as other core layouts):

components/com_joomcck/layouts/apps/<sectionName>/list/recordParts/buttonBookmark.php

Custom icon packs for bookmark and follow buttons

Both buttons use folderlist parameters that auto-discover icon packs from the media/com_joomcck/icons/ tree. Add new packs without touching any code.

Bookmark icons — folder convention media/com_joomcck/icons/bookmarks/<packName>/state0.png and state1.png. Ships with star (default), bookmark, and tick.

Follow icons — folder convention media/com_joomcck/icons/follow/<packName>/state0.png and state1.png. Ships with default.

To add your own pack:

  1. Create a new folder, e.g. media/com_joomcck/icons/follow/hearts/.
  2. Drop two PNGs inside: state0.png (not followed / not bookmarked) and state1.png (active).
  3. In Joomla admin, open the section's template settings and pick your pack from the "Bookmark icons" or "Follow button icons" dropdown — the folderlist field discovers it automatically.

You can also place the PNGs with Joomla's built-in Media Manager (or any FTP client) — no upload step required.

Uploading a pack from the template settings

The "Bookmark icons" and "Follow button icons" selectors now include an inline upload widget (an mjiconpack form field). Enter a pack name, choose a .zip of images, and click Upload — the pack is extracted to media/com_joomcck/icons/<bookmarks|follow>/<packName>/ and immediately selected in the dropdown, no page reload.

For bookmark/follow packs the archive must contain state0 and state1 images (any of png/gif/jpg/jpeg/webp/svg). The endpoint is locked down: it requires com_joomcck manage rights and a valid CSRF token, confines writes to media/com_joomcck/icons/, flattens every archive entry to its basename (so a crafted path can never escape the target), accepts only image extensions, and caps the upload size and file count.

Raw button values for fully custom markup

When overriding a button layout is more than you need, ask HTMLFormatHelper for the raw values and build your own HTML. Each accessor returns an array of primitives, or null when the current user/record isn't eligible (same gating the default buttons apply):

Method Returns (keys)
HTMLFormatHelper::bookmarkData($record, $type, $params) state, pack, icon, alt, tip, id, onclick, sectionId
HTMLFormatHelper::followData($record, $section, $params) state, pack, icon, alt, tip, id, onclick, sectionId
HTMLFormatHelper::repostData($record, $section) icon, alt, tip, id, onclick, sectionId
HTMLFormatHelper::compareData($record, $type, $section) icon, alt, tip, id, hidden, onclick, sectionId
HTMLFormatHelper::printData($record, $params) url, tip, onclick
HTMLFormatHelper::editData($record, $type, $section) href, label, icon

Example — a custom bookmark control with no wrapper button:

<?php if ($d = HTMLFormatHelper::bookmarkData($item, $submissionTypes[$item->type_id], $params)): ?>
    <a href="#" class="my-bookmark" onclick="<?php echo $d['onclick']; ?>">
        <img src="<?php echo $d['icon']; ?>" alt="<?php echo $d['alt']; ?>">
    </a>
<?php endif; ?>

The default per-button layouts are themselves thin wrappers over these accessors, so the values you get are exactly what the stock buttons use.

Customizing the settings (controls) dropdown

The settings/controls dropdown is now its own layout, separate from the button group:

  • components/com_joomcck/layouts/core/list/recordParts/controlsMenu.php
  • components/com_joomcck/layouts/core/single/recordParts/controlsMenu.php

Override either in your template — templates/<your-template>/html/layouts/core/list/recordParts/controlsMenu.php — to restructure the menu without touching the surrounding buttons. The layout receives $controls (the per-record control array) and $record (the full item). The Modern UI uses Tailwind variants under layouts/modern/... which the core.modern. resolver picks automatically.

Standalone edit button

The edit action is available on its own, independent of the dropdown:

  • components/com_joomcck/layouts/core/list/recordParts/buttonEdit.php
  • components/com_joomcck/layouts/core/single/recordParts/buttonEdit.php

Turn it on in the template settings with the Edit button option (item_edit_button) to show it inline next to the other record actions, or render it anywhere yourself:

<?php echo \Joomcck\Layout\Helpers\Layout::render(
    'core.list.recordParts.buttonEdit',
    ['record' => $item, 'type' => $submissionTypes[$item->type_id], 'section' => $this->section]
); ?>

It emits nothing for visitors who lack edit rights (MECAccess::allowEdit).

Filter (funnel) icons

The inline author/type "funnel" filter links render through a single overridable layout, components/com_joomcck/layouts/core/list/recordParts/recordFilter.php, and their icon is chosen per template via the Author filter icon (item_author_filter_icon) and Type filter icon (item_type_filter_icon) parameters. Override the layout to change the funnel structure everywhere at once; change the parameter to swap just the icon.

Clone this wiki locally