BasicUI - why does it not have a HOME button?

Setup, Configuration and Use Items & Sitemaps
11

Hey all,

I also wanted a Home Button to go back to my default sitemap from every subpage. So I build my own css and javascript to solve this problem. It based on this post here: Customizing Basic UI with CSS

Now the Home Button ( house in the left corner ) will be visible all the time and will direct you to the base uri of your sitemap. The url could also be changed.

See:

image
image1350×385 14.1 KB

The picture show subpage. If you click on the arrow you will go just one step back, if you click on the house you will go back to the base uri, red framed part off the url.

The additional part you have to add to your own css file:

.mdl-layout__header-row {
	padding: 0 0px 0 0px;   /* to have no space from the window border to the arrow on small windows  */
	max-width: 1400px;   /* to have some space from the window border to the arrow on large windows  */
	margin: 0 auto;   /* to have some space from the window border to the arrow on large windows  */
}

.navigation-page .navigation__button-home {
	display: block;   /* to get the house visible */
}

.mdl-layout__header-button {
	position: unset;    /* to get the house next to the arrow */
}

a {
	color: #ffffff;      /* to get the house white, because is a hyperlink now */
}

My full own *.html file

<head>
    <style>

    </style>
</head>

<body>
    <script type="text/javascript">
        
        function addStyleSheet(filename) {
            // check if script runs before
            if( window.parent.document.body.getElementsByClassName("own_hyperlink_class").length > 0 )
                return;

            var head = window.parent.document.head
            , link = window.parent.document.createElement('link')

            link.type = 'text/css'
            link.rel = 'stylesheet'
            link.href = filename

            head.appendChild(link)

            // Hide the last web element of the page ...
            _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-form__row--height-auto mdl-cell mdl-cell--12-col ");
            _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
            _lastWebViewElement.style.display = "none";

            _webViewElements = window.parent.document.body.getElementsByClassName("mdl-form__row mdl-cell mdl-cell--6-col mdl-cell--8-col-tablet ");
            _lastWebViewElement = _webViewElements[_webViewElements.length - 1];
            _lastWebViewElement.style.display = "none";

            // add a link to the Home Button
            var mydiv = window.parent.document.body.getElementsByClassName("navigation__button-home ");
            mydiv = mydiv[0];
            var myI = mydiv.getElementsByClassName("material-icons ");

            var aTag = document.createElement('a');
            // mydiv.baseURI could be also any other url in "", like "http://MyServer:8089/basicui/app?sitemap=MyOwnSitemap"
            aTag.setAttribute('href', mydiv.baseURI);
            aTag.setAttribute('class', "own_hyperlink_class");
            aTag.appendChild(myI[0]);

            mydiv.appendChild(aTag);
        }
        addStyleSheet("http://server:8089/static/css/own_dark.css")
    </script>
</body>

How to get all this to run you will find in the post linked before.

Hope that will help someone!

Cheers Jonas

2 Likes