Sticky footer and Dashboard toolbar do not mix!
Permalink
As you can see by the attached image, the popular stickyfooter solution by ryan fait does not play well with C5 in Edit mode. When you try to add to an editable area, it throws off a highlight approximately the the height of the Dashboard Toolbar (see image).
Any idea how to fix this?
More on Ryan Fait's stickyfooter here:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/...
And here is Ryan Fait's sample CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Any idea how to fix this?
More on Ryan Fait's stickyfooter here:http://ryanfait.com/resources/footer-stick-to-bottom-of-page/...
And here is Ryan Fait's sample CSS:
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 142px; /* .push must be the same height as .footer */
}
/*
Sticky Footer by Ryan Fait
http://ryanfait.com/
*/
Unrelated to sticky footers - but I'm using Zurb's foundation framework http://foundation.zurb.com and had exactly the same problem in edit mode.
Just wanted to say thanks because your solution also fixed my problem :)
Just wanted to say thanks because your solution also fixed my problem :)
Awesome and thank you for mentioning Zurb. I had never heard of it, but after looking it up, I think it might save me a heck of a lot of time. I wouldn't be surprised if the stickyfooter solution was built into Zurb because it's really the only thing that works well for footers.
actually, I'm looking through Foundation, and there doesn't seem to be any sort of "sticky footer." I'm trying to integrate Ryan Fait's, but something is conflicting... need to look through everything; it'll take a while...
double-checked everything. just had to correct html,body to height:100%
so hey, works!
so hey, works!
hi Traq - do you have an example site i could take a peek at please?
i just discovered this thread now - i've been having this same problem the last couple of days and i've been tearing my hair out!
many thanks,
Dave
i just discovered this thread now - i've been having this same problem the last couple of days and i've been tearing my hair out!
many thanks,
Dave
you can take a look athttp://bethanyj.com - basically, just follow the original rules for ryan's sticky footer, and it'll work. In my case, I was also trying to eliminate as many unnecessary elements as possible (wrapper divs, etc.). I haven't had any problems -for example, using the body as a .container- but I haven't done extensive testing yet, either.
I´m not getting this... Guide me through, plz
Been working on this footer for days, and it just doesnt work
Been working on this footer for days, and it just doesnt work
If you are using the latest version of C5 something might have changed. I don't know as I have not tried out the brand new version released in December yet.
I can confirm that on latest C5 and Zurb 2.2 adding
#ccm-highlighter {margin-top:-49px;}
to my themes CSS fixed the edit highlight offset
#ccm-highlighter {margin-top:-49px;}
to my themes CSS fixed the edit highlight offset
If you are using Ryan Fait's stickyfooter solution, you will need a special CSS rule for C5's Edit Mode…
/* For Concrete5 EDIT MODE- Need this adjustment, otherwise "edit" buttons will shift 49 pixels down while in Edit Mode*/
#ccm-highlighter {margin-top:-49px;}
If you don't add this, when you are in Edit Mode in the C5 control panel, it will be a pain in the ass to click "Edit Area" or "Add To Area" buttons.