A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.
Hi, Sorry if this has already been answered somewhere. I couldn't find anything similar but feel free to correct me if I'm wrong.
I'm a first time user of mojoportal and have been trying to edit one of the skins (ramblingsoul-colorpencils) to fit an existing design I have for a customer. The design needs to have a footer that is always at the bottom of the viewport, unless the content extends beyond that, when the footer will need to move to wherever the content ends, (sometimes described as a "sticky footer").
I've tried a few different methods that I've found online but nothing seems to work across all browsers.
Are there any skins that incorporate this, or is anyone willing to share any successful methods used?
Thanks, Andy
Hi Andy,
You can take a look at i7media-2horizontalmenus. It has a sticky footer.
HTH, Joe D.
Thanks Joe!
I was able to use some of that CSS and fiddle round with the nesting a bit and it's solved it.
Great help. Thanks again!
What was your solution to the sticky footer? I found a solution here. I was able to achieve the effect by making #wrapfooter a child of the body and nexting #wrapwebsite inside a parent div:
/* Sticky footer - place at bottom of style.css */ html, body, #sitewrapper {height: 100%;} body > #sitewrapper {height: auto; min-height: 100%;} #wrapwebsite {padding-bottom: 100px;} /* must be same height as the footer */ #wrapfooter { position: relative; margin-top: -100px; /* negative value of footer height */ height: 100px; clear:both; }
<body class="pagebody"> <div id="sitewrapper"> <div id="wrapwebsite"> .... </div> </div> <!-- sitewrapper --> <div id="wrapfooter"> .... </div> </body>