by | Saturday, 23 May 2026

abcbanner-logo

ABC Banner

ABC Banner adds flexible top and bottom banner areas to HumHub, allowing site owners to display HTML, CSS, JavaScript, and independent ad sliders without modifying core templates or other modules. Ideal for ads, announcements, sponsor banners, language-based campaigns, and marketplace-ready ABC Suite integrations.

EUR 10.00€ EUR 25.00€
EUR 25.00€
Buy Now

ABC Banner is a lightweight HumHub module for adding global banner areas above and below the main page content without editing HumHub core templates or individual module views.

It provides two independent banner zones:

banner-top / abcbanner-top
banner-bottom / abcbanner-bottom

Each zone can display custom HTML content, optional guest-specific content, additional CSS, additional JavaScript, and an optional image/ad slider. The top and bottom sliders can use separate JSON ad sources, making it possible to run different campaigns in each position.

ABC Banner is especially useful for sites that need global announcements, sponsor banners, advertising carousels, multilingual ad campaigns, or simple promotional areas across all pages.

The module supports language-based ad folders such as:

/ads/en/banner-top/ads.json
/ads/en/banner-bottom/ads.json
/ads/th/banner-top/ads.json
/ads/th/banner-bottom/ads.json

This makes it possible to manage banners and advertisements outside the module while keeping the module itself clean and reusable.

ABC Banner was designed for the ABC Suite ecosystem but can also be used as a standalone HumHub module. It helps remove duplicated banner and ad-slider code from other modules such as directory, people, spaces, calendar, or event modules.

Key features:

  • Global top banner area
  • Global bottom banner area
  • Separate top and bottom ad slider sources
  • Custom HTML content
  • Guest-specific banner content
  • Custom CSS and JavaScript fields
  • Language-aware ad paths
  • No need to modify HumHub templates
  • Normal page-flow banner behavior, so banners scroll with the page
  • Sticky HumHub menu remains usable while scrolling
  • Marketplace-ready structure and documentation
  • AGPL-compatible module distribution

ABC Banner is ideal for community portals, directories, local marketplaces, school platforms, church networks, tourism portals, and any HumHub installation that needs flexible promotional banner areas.

 

ABC Banner Manual

1. What ABC Banner does

ABC Banner adds site-wide banner areas to HumHub without editing HumHub core files or theme templates.

It can show a banner area at the top of the page, a banner area at the bottom of the page, or both. Each banner area can contain normal text, HTML, buttons, links, and an optional advertising slider that reads its images and links from a JSON file.

ABC Banner can also be used without visible banners. In that mode it works as a small administrator-controlled helper for adding custom CSS into the page header or trusted JavaScript into the page footer.

Typical use cases:

  • show a sponsored banner at the top of all pages

  • show a bottom sponsor strip without covering the screen

  • show different ads for different languages

  • show different top and bottom ad campaigns

  • add an “Advertise here” button above or below the slider

  • add one small JavaScript widget in the footer without editing the theme

  • add global CSS overrides without touching CleanTheme or HumHub template files

2. Why this module is useful

Many HumHub sites need small global banners, sponsor areas, or advertising sliders. Normally this is often done by editing the theme or adding snippets directly into layout files. That works for one installation, but it becomes difficult to maintain after updates.

ABC Banner keeps this functionality inside a module:

  • no HumHub core changes

  • no theme template changes

  • no need to modify every other ABC module

  • one central configuration page

  • independent top and bottom settings

  • simple JSON files for ad campaigns

  • optional CSS-only or JavaScript-only use

This is especially useful for community platforms, directories, schools, churches, NGOs, associations, and local platforms that want to sell or display sponsor spaces without building a complete advertising system.

3. Who should use the module

ABC Banner is intended for HumHub administrators.

Normal users do not configure it. The module affects the whole site, so only trusted administrators should be allowed to change the settings.

The module is suitable for:

  • small communities that want a simple sponsor banner

  • local directory platforms with paid banner positions

  • NGOs that want campaign banners

  • school or church networks that want announcement strips

  • HumHub installations that need one small footer script

  • ABC Suite installations that want a shared banner system

4. Main features

4.1 Top banner

The top banner appears above the normal HumHub page area. It can contain text, HTML, a slider, or both.

The top banner is useful for important notices, sponsor strips, or a strong call-to-action.

4.2 Bottom banner

The bottom banner appears in the normal page flow near the end of the page. It does not permanently cover the screen.

The bottom banner is useful for sponsor strips, directory advertising, partner logos, or less urgent messages.

4.3 Independent ad sliders

The top banner and bottom banner can use different JSON files. This means the top can show one campaign and the bottom can show another campaign.

Recommended structure:

/ads/en/banner-top/ads.json
/ads/en/banner-bottom/ads.json
/ads/th/banner-top/ads.json
/ads/th/banner-bottom/ads.json

4.4 Multilingual ads

The slider can load ads based on the current page language. For example, English visitors can see ads from /ads/en/..., and Thai visitors can see ads from /ads/th/....

4.5 Fallback language

If the current language has no matching JSON file, the module can try a fallback language, usually English.

Example:

Current language: th
Fallback language: en

The module first tries the Thai JSON file. If it is missing, it tries the English JSON file.

4.6 Shared fallback for old installations

Older setups may have used only one file per language, for example:

/ads/en/ads.json
/ads/th/ads.json

ABC Banner can still fall back to those files. This is helpful during migration.

When you want the top and bottom banners to always be separate, disable shared fallback.

4.7 Separate content for guests and logged-in users

Each banner position has separate fields for:

  • logged-in users

  • guests who are not logged in

This allows simple targeting.

Example:

  • Guests see: “Join our community today.”

  • Logged-in users see: “Advertise your organization here.”

4.8 Optional close buttons

Each banner can have a close button. A visitor can close the banner for the current page view.

This is useful when the banner is large or when users should be able to hide it temporarily.

4.9 CSS in the page header

The module has a field for custom CSS. This CSS is registered in the page header.

You can use it to change the banner background, image sizes, spacing, text alignment, and other visual details.

4.10 JavaScript in the page footer

The module has a field for custom JavaScript. This script is rendered once near the end of the page.

This can be useful for trusted widget scripts, small tracking-free integrations, or simple site behavior.

Only trusted administrators should use this field.

4.11 CSS-only or JavaScript-only mode

ABC Banner does not need to show a visible banner. You can enable only the master switch and leave both banner areas disabled.

This gives you a simple header/footer snippet tool.

CSS-only example:

Enable ABC Banner: yes
Enable top banner area: no
Enable bottom banner area: no
Additional CSS in page header: your CSS
Additional JavaScript in page footer: empty

JavaScript-only example:

Enable ABC Banner: yes
Enable top banner area: no
Enable bottom banner area: no
Additional CSS in page header: empty
Additional JavaScript in page footer: your JavaScript

This can save the site owner from buying or installing a separate snippet module when only one small footer script is needed.

5. Installation

5.1 Copy the module

Copy the abcbanner folder into your HumHub module directory.

Common location:

protected/modules/abcbanner

Use the correct module folder for your installation if you use a custom module path.

5.2 Enable the module

In HumHub:

Administration → Modules

Find ABC Banner, then install and enable it.

5.3 Open the configuration page

Open:

Administration → Modules → ABC Banner → Configure

The configuration page is the central place for all settings.

5.4 Clear cache after replacing old files

After updating the module, clear the HumHub cache if the old JavaScript or CSS still appears.

Also clear the browser cache or open a private browser window if testing gives confusing results.

6. Quick start: show a simple top banner

Use this when you only want a simple text or HTML banner at the top.

Settings:

Enable ABC Banner: yes
Enable top banner area: yes
Enable top ads slider: no
Top text / HTML for logged-in users: Your message here
Top text / HTML for guests: Your guest message here
Enable bottom banner area: no

Example HTML:

<div class="abcbanner-ad-info">
  <strong>Advertise here</strong>
  <a href="/ads/form" class="btn btn-sm btn-primary">Open ads form</a>
</div>

Result: a top banner with your text and button, but no image slider.

7. Quick start: show a simple bottom banner

Use this when you want a sponsor or partner area at the bottom.

Settings:

Enable ABC Banner: yes
Enable top banner area: no
Enable bottom banner area: yes
Enable bottom ads slider: no
Bottom text / HTML for logged-in users: Your message here
Bottom text / HTML for guests: Your guest message here

Result: a bottom banner in the normal page flow.

8. Quick start: top ads slider

Use this when the top banner should show rotating ad images.

Settings:

Enable ABC Banner: yes
Enable top banner area: yes
Enable top ads slider: yes
Top slider folder: banner-top
Top ads JSON path: /ads/{language}/banner-top/ads.json
Ads base path: /ads
Ads JSON filename: ads.json
Fallback language: en

Create this file for English:

/ads/en/banner-top/ads.json

Create this file for Thai:

/ads/th/banner-top/ads.json

Place the banner images in the same folder or any other public folder and reference them in the JSON file.

9. Quick start: bottom ads slider

Use this when the bottom banner should show rotating sponsor images.

Settings:

Enable ABC Banner: yes
Enable bottom banner area: yes
Enable bottom ads slider: yes
Bottom slider folder: banner-bottom
Bottom ads JSON path: /ads/{language}/banner-bottom/ads.json
Ads base path: /ads
Ads JSON filename: ads.json
Fallback language: en

Create this file for English:

/ads/en/banner-bottom/ads.json

Create this file for Thai:

/ads/th/banner-bottom/ads.json

10. Running top and bottom ads at the same time

You can enable both positions.

Recommended settings:

Top ads JSON path: /ads/{language}/banner-top/ads.json
Bottom ads JSON path: /ads/{language}/banner-bottom/ads.json

Recommended folders:

/ads/en/banner-top/
/ads/en/banner-bottom/
/ads/th/banner-top/
/ads/th/banner-bottom/

This keeps the top and bottom campaigns cleanly separated.

11. Important setting: shared fallback

The setting Use shared ads fallback when position-specific JSON is missing controls whether the slider is allowed to use an old shared JSON file.

When enabled, the module may try:

/ads/en/ads.json
/ads/th/ads.json

This is good for old installations.

When disabled, the module will not use the shared fallback. This is better when top and bottom positions are sold separately and must never show the same ads.

Recommended:

  • enable during migration from an older ads setup

  • disable for professional separated ad campaigns

12. Explanation of all general settings

Enable ABC Banner

This is the master switch.

If disabled, the module does not show banners and does not render custom CSS or JavaScript.

Ads base path

Default:

/ads

This is the base public folder for ad files. It is used for fallback paths and placeholders.

Ads JSON filename

Default:

ads.json

This is the default JSON filename used by the slider.

Fallback language

Default:

en

This language is tried when the current page language has no matching ad file.

Use shared ads fallback

Allows fallback to old shared files like:

/ads/en/ads.json

Disable it when top and bottom positions must stay separate.

Slides moved per click / rotation

Controls how many ad cards move when the visitor clicks an arrow or when automatic rotation runs.

Example:

3

This means the slider moves three cards at a time.

Auto-rotation interval in milliseconds

Controls automatic slider movement.

Examples:

10000 = move every 10 seconds
5000  = move every 5 seconds
0     = no automatic rotation

Use 0 if you want the visitor to move the slider manually.

13. Explanation of all top banner settings

Enable top banner area

Shows or hides the top banner container.

Enable top ads slider

Loads the top slider inside the top banner.

The top banner can still show text/HTML without the slider.

Show top close button

Adds a close button to the top banner.

Top slider folder

Default:

banner-top

Used as a fallback folder value.

Top ads JSON path

Default:

/ads/{language}/banner-top/ads.json

This tells the slider where to load top banner ads.

Top text / HTML for logged-in users

Content shown to logged-in users.

Top text / HTML for guests

Content shown to visitors who are not logged in.

14. Explanation of all bottom banner settings

Enable bottom banner area

Shows or hides the bottom banner container.

Enable bottom ads slider

Loads the bottom slider inside the bottom banner.

The bottom banner can still show text/HTML without the slider.

Show bottom close button

Adds a close button to the bottom banner.

Bottom slider folder

Default:

banner-bottom

Used as a fallback folder value.

Bottom ads JSON path

Default:

/ads/{language}/banner-bottom/ads.json

This tells the slider where to load bottom banner ads.

Bottom text / HTML for logged-in users

Content shown to logged-in users.

Bottom text / HTML for guests

Content shown to visitors who are not logged in.

15. Supported path placeholders

The JSON path fields can use placeholders.

Placeholder

Meaning

{language}

Current page language, for example en or th

{lang}

Same as {language}

{basePath}

The configured ads base path, normally /ads

{category}

The configured top or bottom slider folder

{position}

The banner position, top or bottom

{filename}

The configured JSON filename, normally ads.json

Example:

{basePath}/{language}/{category}/{filename}

With the default top folder this becomes:

/ads/en/banner-top/ads.json

Another example:

{basePath}/{language}/{position}/{filename}

This becomes:

/ads/en/top/ads.json
/ads/en/bottom/ads.json

16. Ads JSON format

ABC Banner accepts two simple JSON formats.

16.1 Plain array format

[
  {
    "img": "/ads/en/banner-top/example-001.jpg",
    "link": "https://example.com",
    "alt": "Example sponsor"
  },
  {
    "img": "/ads/en/banner-top/example-002.jpg",
    "link": "https://example.org",
    "alt": "Second sponsor"
  }
]

16.2 Object with ads array

{
  "ads": [
    {
      "image": "/ads/en/banner-bottom/example-001.jpg",
      "url": "https://example.com",
      "title": "Example bottom sponsor"
    }
  ]
}

Both formats work.

17. Supported JSON keys

ABC Banner accepts several common key names so you do not need to rewrite older JSON files.

Image keys

You can use one of these:

img
image
src
banner

Example:

{"img": "/ads/en/banner-top/banner.jpg"}

or:

{"image": "/ads/en/banner-top/banner.jpg"}

Link keys

You can use one of these:

link
url
href

Example:

{"link": "https://example.com"}

Text/label keys

You can use one of these:

alt
title
name

This becomes the image alt text.

Target key

You can optionally use:

target

Allowed values are:

_blank
_self
_parent
_top

If the value is invalid, the module falls back to a safe target.

18. Good image sizes

The default banner card size is:

300 × 250 px

This is a common ad format and works well in a horizontal slider.

For best results:

  • use consistent image dimensions

  • compress images before uploading

  • avoid very large image files

  • use JPG, PNG, WebP, or AVIF depending on browser support

  • keep text inside the image large enough for mobile users

The default mobile size is smaller:

240 × 200 px

You can change these sizes with CSS.

19. Styling the banner

ABC Banner provides CSS variables and classes.

19.1 Useful CSS variables

:root {
  --abcbanner-bg-color: #ffffff;
  --abcbanner-text-color: #333333;
  --abcbanner-border-color: rgba(0, 0, 0, 0.12);
  --abcbanner-ad-width: 300px;
  --abcbanner-ad-height: 250px;
  --abcbanner-z-index: 1040;
}

19.2 Example: change background and text

:root {
  --abcbanner-bg-color: #f7fbff;
  --abcbanner-text-color: #1f2937;
}

19.3 Example: make ad cards wider

:root {
  --abcbanner-ad-width: 320px;
  --abcbanner-ad-height: 180px;
}

19.4 Example: smaller mobile ads

@media (max-width: 570px) {
  :root {
    --abcbanner-ad-width: 220px;
    --abcbanner-ad-height: 160px;
  }
}

20. CSS classes for designers

Top banner:

.abcbanner-top {}
.banner-top {}

Bottom banner:

.abcbanner-bottom {}
.banner-bottom {}

Shared banner container:

.abcbanner {}
.abcbanner-inner {}
.abcbanner-text {}
.abcbanner-slider {}

Slider parts:

.abcbanner-slider-wrapper {}
.abcbanner-slider-list {}
.abcbanner-ad-card {}
.abcbanner-ad-link {}
.abcbanner-arrow {}

Page state classes:

html.abcbanner-has-top {}
html.abcbanner-has-bottom {}

These classes are useful when you need theme-specific adjustments.

21. CSS-only mode in detail

CSS-only mode is useful when CleanTheme or another theme already handles most design work, but you still need one small site-wide adjustment.

Settings:

Enable ABC Banner: yes
Enable top banner area: no
Enable bottom banner area: no
Additional CSS in page header: filled
Additional JavaScript in page footer: empty

Example:

body {
  scroll-behavior: smooth;
}

.my-custom-notice {
  border-radius: 8px;
}

The banner asset files are not loaded unless an actual banner is shown.

22. JavaScript-only mode in detail

JavaScript-only mode is useful when you want to add one small trusted footer script.

Settings:

Enable ABC Banner: yes
Enable top banner area: no
Enable bottom banner area: no
Additional CSS in page header: empty
Additional JavaScript in page footer: filled

Example:

window.addEventListener('load', function () {
    console.log('ABC Banner footer script loaded');
});

Only use JavaScript that you trust. Footer JavaScript can affect the whole page.

23. Combining banners with CSS or JavaScript

You can use visible banners and the CSS/JavaScript fields at the same time.

Example use:

  • top banner shows ads

  • bottom banner shows partner logos

  • CSS field adjusts banner colors

  • JavaScript field loads a small trusted external widget

This is powerful, but keep the setup simple where possible.

24. External JavaScript warning

Do not paste random third-party scripts into the JavaScript field.

JavaScript can:

  • read page content

  • modify the page

  • break other modules

  • slow down the site

  • send visitor data to third parties

Use only scripts from trusted sources and only when you understand why they are needed.

For privacy-friendly sites, avoid external tracking scripts and host assets locally whenever possible.

25. External image warning

Ads can use external image URLs, but local images are better.

External images may expose visitor information to the external host, such as IP address, browser, and page request details.

Recommended:

/ads/en/banner-top/banner-001.jpg

Instead of:

https://external-site.example/banner-001.jpg

26. Recommended folder structure

For a professional multilingual setup:

ads/
  en/
    banner-top/
      ads.json
      banner-001.jpg
      banner-002.jpg
    banner-bottom/
      ads.json
      banner-001.jpg
      banner-002.jpg
  th/
    banner-top/
      ads.json
      banner-001.jpg
      banner-002.jpg
    banner-bottom/
      ads.json
      banner-001.jpg
      banner-002.jpg

This is easy to understand and easy to back up.

27. Example: English top ads file

File:

/ads/en/banner-top/ads.json

Content:

[
  {
    "img": "/ads/en/banner-top/phuket-school-directory.jpg",
    "link": "https://phuket.school",
    "alt": "Phuket School Directory"
  },
  {
    "img": "/ads/en/banner-top/phuket-proms.jpg",
    "link": "https://phuketproms.com",
    "alt": "Phuket Proms"
  }
]

28. Example: Thai bottom ads file

File:

/ads/th/banner-bottom/ads.json

Content:

{
  "ads": [
    {
      "image": "/ads/th/banner-bottom/sponsor-001.jpg",
      "url": "https://example.com",
      "title": "ผู้สนับสนุน"
    }
  ]
}

29. How the slider chooses the first visible ad

The slider does not always start from the first ad. It uses a small offset based on the slider position and the day of the month.

This gives sponsors a more even chance over time when several ads are in one JSON file.

30. Slider arrows

Each slider has left and right arrow buttons.

The setting Slides moved per click / rotation controls how many cards move per click.

Example:

3

The slider moves three cards when a visitor clicks the arrow.

31. Auto-rotation

The slider can move automatically.

Examples:

10000 = every 10 seconds
15000 = every 15 seconds
0     = disabled

Use a slower interval when many visitors read text or when banners contain important information.

32. Close button behavior

The close button hides the banner for the current page view.

It does not delete the banner and does not permanently change user settings.

After a full page reload, the banner can appear again.

This is intentional because the module does not store per-user close preferences.

33. Guest and logged-in content examples

Guest top content

<div class="abcbanner-ad-info">
  <strong>Welcome to our community</strong>
  <a href="/user/auth/signup" class="btn btn-sm btn-primary">Join now</a>
</div>

Logged-in top content

<div class="abcbanner-ad-info">
  <strong>Support our platform</strong>
  <a href="/ads/form" class="btn btn-sm btn-primary">Advertise here</a>
</div>

This way guests and members see different calls-to-action.

34. Accessibility notes

ABC Banner uses banner regions and labels for the top and bottom banner areas.

To keep your own content accessible:

  • use clear link text

  • add meaningful alt or title text in JSON entries

  • avoid images with tiny text

  • keep color contrast readable

  • do not make auto-rotation too fast

35. Performance notes

ABC Banner is intentionally small.

The banner CSS and JavaScript asset bundle is loaded only when a visible banner is rendered.

When you use CSS-only or JavaScript-only mode without banners, the banner slider assets are not loaded.

For good performance:

  • keep JSON files small

  • keep image file sizes small

  • avoid too many ads in one slider

  • host images locally where possible

  • avoid heavy third-party scripts

36. Security notes for administrators

The configuration page is protected for module administrators.

However, the fields themselves are powerful:

  • HTML can change what visitors see

  • CSS can change the whole site appearance

  • JavaScript can modify the whole page

Treat access to this configuration like access to theme editing.

Only trusted administrators should have permission to configure this module.

37. Privacy notes

The module itself does not create database tables and does not store visitor tracking data.

However, the content you add can affect privacy.

Examples:

  • external images can contact external servers

  • external JavaScript can track visitors

  • third-party widgets may load cookies or fingerprinting code

For GDPR/DSGVO-friendly operation, use local images and avoid third-party tracking scripts unless users have clearly consented.

38. Troubleshooting

38.1 I enabled the module but see no banner

Check:

Enable ABC Banner: yes
Enable top banner area or bottom banner area: yes

Also check that either text/HTML is filled or the slider is enabled.

A banner area with no content and no slider is intentionally not shown.

38.2 The slider says “No ads configured”

The JSON file exists, but it does not contain usable ad entries.

Check:

  • the JSON is valid

  • the file contains an array or an object with an ads array

  • each ad has an image key such as img or image

  • image paths are correct

38.3 The slider does not load

Check:

  • the JSON file path is correct

  • the file is publicly reachable in the browser

  • the web server serves .json files

  • the current language folder exists

  • the fallback language folder exists

Open the JSON path directly in the browser to verify it.

Example:

https://your-site.example/ads/en/banner-top/ads.json

38.4 English ads show instead of Thai ads

This usually means the Thai file is missing or invalid.

Check:

/ads/th/banner-top/ads.json
/ads/th/banner-bottom/ads.json

Also check that HumHub’s page language is actually Thai.

38.5 Top and bottom show the same ads

Disable shared fallback and use separate paths.

Recommended:

Use shared ads fallback when position-specific JSON is missing: no
Top ads JSON path: /ads/{language}/banner-top/ads.json
Bottom ads JSON path: /ads/{language}/banner-bottom/ads.json

38.6 The top banner overlaps the menu

Clear cache first.

If your theme has custom topbar heights, add a small CSS adjustment in the custom CSS field.

The module provides variables such as:

--abcbanner-top-visible-height
--abcbanner-top-height

38.7 My JavaScript does not run

Check:

  • master switch is enabled

  • JavaScript field is saved

  • there is no syntax error

  • browser console does not show an error

  • cache is cleared

38.8 My CSS does not apply

Check:

  • master switch is enabled

  • CSS field is saved

  • selector is correct

  • another theme rule does not override it

  • cache is cleared

Use browser developer tools to inspect the element.

38.9 Images look stretched

Use images with consistent dimensions and adjust the CSS variables.

Example:

:root {
  --abcbanner-ad-width: 300px;
  --abcbanner-ad-height: 250px;
}

The image uses object-fit: contain, so it should normally fit inside the ad card without cropping.

39. Recommended test checklist after installation

Test these cases on a staging site before using the module in production:

  1. Enable only top text banner.

  2. Enable only bottom text banner.

  3. Enable top slider with /ads/en/banner-top/ads.json.

  4. Enable bottom slider with /ads/en/banner-bottom/ads.json.

  5. Enable both top and bottom sliders at the same time.

  6. Test a missing Thai JSON file and confirm English fallback works.

  7. Disable shared fallback and confirm positions stay separate.

  8. Set auto-rotation to 0 and confirm the slider stops rotating.

  9. Test close buttons.

  10. Test CSS-only mode with both banner areas disabled.

  11. Test JavaScript-only mode with both banner areas disabled.

  12. Test as a guest.

  13. Test as a logged-in user.

  14. Test on mobile width.

  15. Test with CleanTheme or your active theme.

  16. Clear cache and confirm the page still works.

40. Recommended production setup

For a clean production setup:

Enable ABC Banner: yes
Ads base path: /ads
Ads JSON filename: ads.json
Fallback language: en
Use shared fallback: no
Slides moved per click / rotation: 3
Auto-rotation interval: 10000 or 0

Top banner:

Enable top banner area: yes
Enable top ads slider: yes
Top slider folder: banner-top
Top ads JSON path: /ads/{language}/banner-top/ads.json

Bottom banner:

Enable bottom banner area: only when needed
Enable bottom ads slider: only when needed
Bottom slider folder: banner-bottom
Bottom ads JSON path: /ads/{language}/banner-bottom/ads.json

Use local images whenever possible.

41. What ABC Banner does not do

ABC Banner is intentionally simple.

It does not:

  • sell ads

  • manage payments

  • count impressions

  • count clicks

  • upload images

  • edit JSON files in the browser

  • create per-Space ad campaigns

  • provide a full advertising marketplace

It is a clean display module for site-wide banners and JSON-based sliders.

For selling ad positions, collecting payments, or managing campaigns, use a separate workflow and then place the final JSON and images into the /ads/... folders.

42. Best practice for paid banner spaces

When you sell banner spaces:

  • keep top and bottom JSON files separate

  • disable shared fallback

  • use clear image size rules

  • test every sponsor link

  • keep local copies of sponsor images

  • check mobile readability

  • keep a backup of the JSON files

  • document start and end dates outside the module

A simple spreadsheet can be enough for campaign management.

43. Example shop-page description

ABC Banner adds flexible site-wide banner areas to HumHub without editing core files or theme templates. It supports top and bottom sponsor areas, multilingual JSON ad sliders, guest/member content, optional close buttons, and custom CSS or JavaScript injection.

Use it for sponsor strips, campaign banners, community announcements, or as a simple footer JavaScript helper. It is especially useful for organizations that want practical banner functionality without a heavy advertising system.

44. Summary

ABC Banner is a small but flexible module.

Use it when you need:

  • one global top banner

  • one global bottom banner

  • independent ad sliders

  • multilingual ad files

  • a simple sponsor strip

  • an “Advertise here” call-to-action

  • CSS in the page header

  • trusted JavaScript in the page footer

Keep the setup simple, keep images small, host assets locally where possible, and only allow trusted administrators to change the configuration.