kurraglen Posted February 12, 2019 Share Posted February 12, 2019 Hi, I am trying to get the footer to stick to bottom of screen but after trying all of the methods that I know and some more Googling, no luck. Maybe I am too fussy but.... I am using the latest version of Cubecart with Noodleman skin. Thanks, Bruce Link to comment Share on other sites More sharing options...
bsmither Posted February 12, 2019 Share Posted February 12, 2019 Welcome kurraglen! Glad to see you made it to the forums. I don't have a copy of Noodleman skin, but I assume it is a variant of Foundation. You can edit the file cubecart.css or cubecart.default.css. I recommend cubecart.default.css. cubecart.css should have this already: footer { background-color: #000; color: #fff; } We need to add more rules, so, in cubecart.default.css: footer { position: fixed; bottom: 0; width: 100%; } You need to have CubeCart clear its internal cache, and possibly force your browser to reload page resources (generally by CTRL-F5). Link to comment Share on other sites More sharing options...
kurraglen Posted February 13, 2019 Author Share Posted February 13, 2019 Thanks for the help, bsmither, I think you are correct in that the Noodleman skin is based on the Foundation skin. I did as you suggested and it does have the desired effect but the problem is that it then covers up some of the bottom of the pages. I have attached an image. Regards, Bruce Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 Yes. What would you like it to do, otherwise? Link to comment Share on other sites More sharing options...
kurraglen Posted February 13, 2019 Author Share Posted February 13, 2019 It would be good if it didn't cover up the bottom of the page because there is the register button that a user cannot click on. It won't scroll past what I showed on the first screen shot. Thanks. Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 We need the footer to stay below everything on the page - below even the very last bit of normal page contents? Isn't that what it did before the edit? Oh, wait. I think I see what you are after. Link to comment Share on other sites More sharing options...
kurraglen Posted February 13, 2019 Author Share Posted February 13, 2019 No it actually has a lot of white space as shown on this login page. Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 Maybe that's because a side panel is that tall. But I think I see what you want. Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 I did something similar to a test install some time ago. But it only works with keeping things stuck to the top. I used the jQuery plugin from: http://stickyjs.com We may need to find something else. Link to comment Share on other sites More sharing options...
kurraglen Posted February 13, 2019 Author Share Posted February 13, 2019 Thanks bsmithers, I will do some playing around. Odd that on every other static website that I have done, that css for the footer worked. Thanks again. Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 I think I have something. We will edit the skin template main.php: Find: </head> On a new line ABOVE that, ADD: <style> div.sticky { position: -webkit-sticky; position: sticky; bottom: 0; background-color: yellow; padding: 50px; font-size: 20px; } </style> Find: {include file='templates/box.off_canvas.left.php'} {include file='templates/box.eu_cookie.php'} On a new line AFTER that, ADD: </div> </div> Near the bottom, find: {include file='templates/ccpower.php'} </div> </div> {include file='templates/element.markup.json-ld.php'} Change to: {include file='templates/ccpower.php'} {include file='templates/element.markup.json-ld.php'} Find: <footer> Change to: <div class="sticky"><footer> Find: </footer> Change to: </footer></div> The above is just an experiment. We will need to put the correct CSS in a CSS file. Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 This does not work out as well as I had thought. When viewing on a mobile device, the footer takes up the whole screen - just at the bottom - like the sticky is supposed to. So, we will need to find a way to make the Documents box a lot smaller in the small view. Maybe make it an off-canvas box. Perhaps the reason that the sticky thing didn't work for you is because: <div class="off-canvas-wrap" data-offcanvas> is an ancestor container (to the sticky div) that has overflow:hidden. Apparently, this destroys the stickiness. So, the edit to that statement closed the div blocks, leaving the rest of the page as a sibling. That allowed the stickiness to work. Link to comment Share on other sites More sharing options...
bsmither Posted February 13, 2019 Share Posted February 13, 2019 Closing the off-canvas block early - that is, not having the main page content within the "inner-wrap" block - makes the off-canvas fly-in menus not work at all on a mobile screen. So, back to square one. Link to comment Share on other sites More sharing options...
kurraglen Posted February 14, 2019 Author Share Posted February 14, 2019 Thanks mate, I will keep experimenting and let you know if and when I find a solution. Link to comment Share on other sites More sharing options...
bsmither Posted February 14, 2019 Share Posted February 14, 2019 Currently, my approach is to make the documents box an off-canvas thing. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.