Forum How do I...?

Footer background color + text on left and right sides?

altjx
Hey all,

Just started using Prince yesterday so forgive me for my lack of knowledge.

I'm simply trying to have a footer with a background color of gray. In addition to that, I want the page counter on the bottom right and also I want to add some text to the bottom left.

I can't seem to get this working for some reason. I can get the page counter to show on the bottom right, but then I can't get the background color to use the full width of the page without pushing the page counter off the page. Just seems like I should be able to set a background color to match the entire width of the footer, and then set a separate margin for the actual text that'll be on top of the background color.

Any help would be greatly appreciated.
mikeday
This will put some text on the left and the page counter on the right:
@page {
    @bottom-left {
        background: gray;
        content: "Some text"
    }
    @bottom-right {
        background: gray;
        content: counter(page)
    }
}

If you want the gray background to span the full width of the page, then you will need to specify corner margin boxes as well:
@page {
    @bottom-left {
        background: gray;
        content: "Some text"
    }
    @bottom-right {
        background: gray;
        content: counter(page)
    }
    @bottom-left-corner {
        background: gray;
        content: ""
    }
    @bottom-right-corner {
        background: gray;
        content: ""
    }
}

You could choose to put the text or page number in the corners, if you preferred.
altjx
Thanks so much for this assistance. One additional question for you. Is there a way that I could have the "Some Text" to appear like 20pt from the left side without also moving the gray background?

Like, if I try "margin-left: 20pt", then the "some text" text moves, but then I end up with a white gap because the gray background's margin also changes.

Edited by altjx

mikeday
How about padding-left? :)
altjx
Woooot! Thank you so much, sir. This is a simple case of me not being extremely proficient with CSS. Sorry if I've tasted your time, but thanks so much :D