Pin the footer to the bottom of the page?

TraceyYates · Post by **TraceyYates** » Thu Sep 01, 2022 4:31 am

My UX designer would like me to "pin" the footer on the home page to the bottom of the page or browser window, rather than have it up near the carousel of icons. Ideally, we would like to pin the copyright statement as a footer to all the other topic pages as well, but the home page is the top priority.

Is there a way to do this? I suspect I am not using the right keywords when I'm search for it in the help or on the forum.

Thanks,
Tracey

ChoccieMuffin · Post by **ChoccieMuffin** » Fri Sep 02, 2022 6:02 am

Yes, there is. I've done it but I'm blowed if I can work out which bits in my stylesheet did the job! Here are some bits and pieces that may or may not be involved in it, so feel free to have a play with adding and removing these bits and see what happens. (And if you get it to work, please post which bits you used and what tweaks you needed to make.)

Code: Select all

#fixed
{
	height: 95%;
}

#footer-padder
{
	height: 60px;
}

#footer
{
	position: fixed;
	bottom: 0;
	left: 0;
	width: 98%;
	background-color: var(--Background-Light);
	border-top-style: solid 1px var(--Border);
	font-size: 12px;
	margin: 0;
	padding: 5px;
}

p.Footer_Info
{
	font-size: 85%;
	margin-right: 0;
	text-align: right;
	margin-left: 0;
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: var(--Border);
	padding-top: 10px;
	mc-hidden: hidden;
}

table.footer
{
	width: 100%;
}

div.body-container
{
	margin-bottom: 60px;
	mc-hidden: hidden;
}

div.sidenav-container	/* Not used in stylesheet, defines how the sidenav menu appears when output built */
{
	height: 93%;
	overflow: auto;
	mc-hidden: hidden;
}

div.body-container	/*Wraps the content on the masterpage and provides the white background behind topics.*/
{
	margin-right: 0;
	background-color: var(--White);
	padding: 25px, 25px, 30px, 25px;
	min-height: 80vh;
	/* 95vh; */
	mc-hidden: hidden;
}

div.side-content	/*Container for Menu proxy*/
{
	float: right;
	margin-left: 10px;
	margin-bottom: 10px;
	width: 33.33%;
	mc-hidden: hidden;
}

.sidenav-wrapper
{
	mc-hidden: hidden;
}

And this is the code for my masterpage (or whatever it's called now)

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<html xmlns:MadCap="http://www.madcapsoftware.com/Schemas/MadCap.xsd" MadCap:conditions="Primary.HTML5Only">
    <head>
    </head>
    <div id="skin-heading">
        <p class="Title-bar">  |  <MadCap:variable name="Local_Data.ApplicationName" /></p>
    </div>
    <script type="text/javascript">/*<![CDATA[*/
		$(document).ready(function(){
		$("#skin-heading").appendTo("div.logo-wrapper"); 
		});
	/*]]>*/</script>
    <body>
        <MadCap:topicToolbarProxy data-mc-skin="/Project/Skins/HTML5_Topic_Toolbar.flskn" />
        <MadCap:breadcrumbsProxy />
        <div>
            <MadCap:bodyProxy />
        </div>
        <div id="footer">
            <MadCap:snippetBlock src="../Snippets/Footer_table.flsnp" />
        </div>
    </body>
</html>

See how you get on with those and let us know.

TraceyYates · Post by **TraceyYates** » Tue Sep 06, 2022 12:48 pm

Quick question . . the script in the master page (or whatever it's called now) references the div.logo-wrapper, but I didn't find that div defined in the style sheet bits you posted. Would you mind posting the div.logo-wrapper bit as well?

Thanks,
Tracey

Post by **NorthEast** » Tue Sep 06, 2022 11:40 pm

TraceyYates wrote:Quick question . . the script in the master page (or whatever it's called now) references the div.logo-wrapper, but I didn't find that div defined in the style sheet bits you posted. Would you mind posting the div.logo-wrapper bit as well?

div.logo-wrapper is generated in the output and contains the logo - so it's not relevant to the footer.

As far as I can tell, the key part of the CSS is for #footer, which is used to style <div id="footer"> in the template/master page.
#footer is set to use position:fixed; - meaning it's displayed in a fixed position at the bottom of the page (with the topic body scrolling behind it).

jimhun · Post by **jimhun** » Wed Sep 07, 2022 1:50 am

ChoccieMuffin, Dave Lee thanks, I was looking for that too.

MadCap Software Forums

Pin the footer to the bottom of the page?

Pin the footer to the bottom of the page?

Re: Pin the footer to the bottom of the page?

Re: Pin the footer to the bottom of the page?

Re: Pin the footer to the bottom of the page?

Re: Pin the footer to the bottom of the page?