Help get this topic noticed by sharing it on Twitter, Facebook, or email.

How to create .html page without displaying default COT header/footer layout

Hi, all.
I want to add a landing page into the project where it can exclude all the default css and js files generated by COT.
Please advise.
Thanks.



Regards,
Justin
1 person has
this question
+1
Reply
  • With dedicated login page enabled, I am able to hide header and footer using the below css and js
    It wasn't the best approach but it meets the expected output.
    if anyone does have better idea, please share it out. Thanks.
    <head>
    <style type="text/css" id="editable-css" editable="true">
    [data-content-framework="bootstrap"].ui-page footer > .container {
    display: none;
    }
    [data-content-framework="bootstrap"].ui-page > .ui-content > .app-bar-footer {
    display: none !important;
    }
    [data-content-framework="bootstrap"].ui-page > .ui-content .app-page-content {
    padding: 0;
    }
    /*<editable>*/
    #app-bar-toolbar {
    visibility: hidden;
    }
    /*</editable>*/
    #app-bar-toolbar > *:not(.app-btn-cluster-right):not(.app-back-text):not([data-action="#app-back"]),
    #app-bar-toolbar > .app-btn-cluster-right a[data-title=Apps],
    #app-bar-toolbar > .app-btn-cluster-right a.app-avatar,
    #app-bar-toolbar.app-has-back > .app-btn-cluster-right a[title=More],
    #app-bar-toolbar > .app-btn-cluster-right #app-btn-context,
    #app-bar-toolbar > div.app-menu-strip {
    visibility: hidden;
    }
    @media (min-width:768px) {
    #app-bar-toolbar.app-has-back > .app-btn-cluster-right a[data-title=Apps],
    #app-bar-toolbar.app-has-back > .app-btn-cluster-right a.app-avatar,
    #app-bar-toolbar.app-has-back > .app-btn-cluster-right a[title=More] {
    width: 0 !important;
    height: 0 !important;
    }
    #app-bar-toolbar.app-has-back > .app-btn-cluster-right a[data-title=Apps],
    #app-bar-toolbar.app-has-back > .app-btn-cluster-right a.app-avatar {
    display: none !important;
    }
    }
    [data-content-framework="bootstrap"].ui-page > .ui-content {
    margin-top: -57px !important;
    }
    [data-content-framework="bootstrap"].ui-page {
    height: 100% !important;
    padding-top: 0 !important;
    }
    [data-content-framework="bootstrap"].ui-page > .ui-content > .app-wrapper {
    height: auto !important;
    }
    [data-content-framework="bootstrap"].ui-page > .ui-content > .app-vscrollbar {
    height: 100% !important;
    }
    </style>
    </head>

    <body>
    <!-- HTML content here -->
    <script type="text/javascript">
    function changeDefaultLayout(isHide) {
    let styleTags = $('style#editable-css[editable=true]').html();
    styleTags = isHide ? styleTags.replace('/*<editable>*//*', '/*<editable>*/')
    .replace('*//*</editable>*/', '/*</editable>*/') :
    styleTags.replace('/*<editable>*/', '/*<editable>*//*')
    .replace('/*</editable>*/', '*//*</editable>*/');
    $('style#editable-css[editable=true]').html(styleTags);
    }
    var previousHashTag = -1;
    $(window).on('hashchange', function (event) {
    event.preventDefault();
    let currentHashTag = !window.location.hash.length;
    if (currentHashTag != previousHashTag) {
    changeDefaultLayout(currentHashTag);
    previousHashTag = currentHashTag;
    }
    });
    </script>
    </body>

    Output:


    Regards
    Justin


  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly happy, confident, thankful, excited indifferent, undecided, unconcerned sad, anxious, confused, frustrated