Report - or custom solution for issues with splash layout

[Jimmi08]

Related issues/questions already exist or were discussed and those are examples or information on how I solved them in version 2.3.3. Maybe it helps somebody else. It is about customization, core is working as it should.

This topis is about splash layout, not page template itself.

Splash layout should be set for Auth pages - login, signup, forgotten password. Name is from bootstrap5 theme.

My tested layout should look like this:

1. Use login.php as standalone page

• add before theme class in theme.php
  e_theme::initThemeLayout(); // set THEME_LAYOUT - 1.part

• add in construct() not in init() like before this:

if (THEME_LAYOUT === "splash")
{
	define('e_IFRAME', false); // set Standalone login page - 2.part
}

2. load javascript files in footer

add in theme.php (not in e107_config.php)

define('e_DEBUG_JS_FOOTER', true); //render jquery in footer

load all theme javascript with footer parameter
e107::js('footer', THEME . 'assets/js/custom.js', 'jquery');

3. use images in layout

supported {THEME} shortcode , not needed custom shortcode in theme_shortcodes anymore. Available from e107 2.3.3.

            <div class="shape-one">
                <img src="{THEME}assets/img/inner-banner/banner-shape1.png" alt="Images">
            </div>

4. fix caption for login page

it has sitename value by default

in theme_shortcodes.php

	/**
	 * Optional {---CAPTION---} processing.
	 * @shortcode {---CAPTION---}
	 * @return string
	 */
	function sc_caption($caption)
	{
		if(e_LOGIN == e_SELF) {
			$caption = LAN_LOGIN_9;
		}
		return $caption; 
	}

5. fix breadcrumb value for login page

	/**
	 * Optional {---BREADCRUMB---} processing.
	 * @shortcode {---BREADCRUMB---}
	 * @return string
	 */
 
	function sc_breadcrumb($array)
	{
 
		if (e_LOGIN == e_SELF)
		{
			$array[0]['text'] = LAN_LOGIN_9;
		}
 
		return e107::getForm()->breadcrumb($array, true);

	}

6. fix breadcrumb look

It looks like this by default and you can't change HTML markup of breadcrumb or its content in theme (that home icon)

added custom javascript file:
e107::js('footer', THEME . 'custom.js', 'jquery');

class inner-banner is used to use this only for page top area.

replaced home icon with text:

    var homeCode = "Home";
    $(".inner-banner ul.breadcrumb li:first-child i.fas.fa-home").replaceWith(homeCode);

fix for missing aria labels

    // Check and add aria-label for each list item
    $(".inner-banner ul.breadcrumb li").each(function () {
        // Check if aria-label is not set
        if (!$(this).attr("aria-label")) {
            // Add aria-label with item value
            $(this).attr("aria-label", $(this).text());
        }
    });

changing separator

    $('.inner-banner ul.breadcrumb li:not(:last)').each(function () {
        var newItem = $("<li><i class='bx bx-chevron-right'></i></li>");
        $(this).after(newItem);
 
    });

removing classes that break look

    $('.inner-banner').find('ul.breadcrumb').each(function () {
        $(this).removeClass('breadcrumb');
    });
 
    $('.inner-banner').find('li.breadcrumb-item').each(function () {
        $(this).removeClass('breadcrumb-item');
    });

Result:

[Alex-e107nl]

I saw what you made..... WOW! the user.php is wonderfull you should show and tell everyone!!! https://github.com/e107inc/e107/discussions/categories/show-and-tell

[Jimmi08]

It is not finished but with the next project before me, it will not be so soon. If you want to try it, you need to change login.php directly, no workaround is now working. Any setting in theme.php will break route functionality.