Question asked by Tony Boyle 11 years ago
I'm configuring a new theme and I just wondered how you replicate the thick blue top border and blue footer in the clearbooks theme? If anyone could give me the code I'd be very grateful.
Hi Tony,
Sorry for the delay. I looked into this issue and came up with the following solution:
In .cb-page { } please change "padding: 30px 30px 30px 30px !important;" to "padding-top: 30px !important; padding-right: 30px; padding-bottom: 30px !important; padding-left: 30px;". This should solve the shift.
And for the footer, please replace the entire @page { } which is right below "meta[name="companyreg"] { }" with this:
@page { background: #ffffff !important; color: #57585a !important; font-family: Arial !important; font-size: 12px !important; margin: 0.6cm 1cm 2.5cm 1cm !important; size: A4 portrait !important; @bottom-center { content: string(companyreg) !important; / Load contents for company_reg into the page footer / clear: both !important; font-size: 11px !important; margin: 10px 0px 30px 0px !important; padding: 10px 0px 10px 0px !important; text-align: center !important; background: #3A7BBE !important; color: #ffffff !important; } }
Hope it'll help.
Best answerHi Tony,
Sorry this was not replied to sooner. You should be able to paste the following sections of css into your theme editor to enable the blue bar effects seen in the Clear Books theme. If you need any further help, please don't hesitate to ask.
.cb-page { background: #ffffff !important; color: #57585a !important; font-family: Arial !important; font-size: 12px !important; margin: 0px auto !important; border-top: 20px solid #3A7BBE !important; padding: 30px 30px 30px 30px !important; position: relative !important; width: 800px !important; }
.cb-page .cb-registered-office { clear: both !important; font-size: 11px !important; margin: 10px -30px 0px -30px !important; padding: 10px 0px 10px 0px !important; text-align: center !important; background: #3A7BBE !important; color: #ffffff !important; }
Thanks Edward, I'll tweak the CSS tonight and report back. As I tend to send out invoices as PDFs I'll need to include the relevant code in the PDF section of the CSS as well?
Hi Tony, you shouldn't need to include anything extra for PDF.
Hi again, I added the CSS and it worked fine in the HTML version but not in the PDF.
As you'll see in the attachment, the layout in the upper part of the invoice (above payment advice) shifted hard against the right margin, and the blue block/white text did not appear in the company details footer. Therefore perhaps you do need to add CSS to the PDF section as well?
Hi Tony,
Sorry for the delay. I looked into this issue and came up with the following solution:
In .cb-page { } please change "padding: 30px 30px 30px 30px !important;" to "padding-top: 30px !important; padding-right: 30px; padding-bottom: 30px !important; padding-left: 30px;". This should solve the shift.
And for the footer, please replace the entire @page { } which is right below "meta[name="companyreg"] { }" with this:
@page { background: #ffffff !important; color: #57585a !important; font-family: Arial !important; font-size: 12px !important; margin: 0.6cm 1cm 2.5cm 1cm !important; size: A4 portrait !important; @bottom-center { content: string(companyreg) !important; / Load contents for company_reg into the page footer / clear: both !important; font-size: 11px !important; margin: 10px 0px 30px 0px !important; padding: 10px 0px 10px 0px !important; text-align: center !important; background: #3A7BBE !important; color: #ffffff !important; } }
Hope it'll help.
Best answerThanks. that did the trick!
You must 