Ok, It seems like I’m almost there, but I’m not and I need help to figure this out the rest of the way…
You can see this here -as to what I need to accomplish: http://mustech.net/miscpicts/Printcssbp.jpg

I would like a PRINT CSS that basically does the following:
Omits the Header and allows a graphic to be centered above all…
Omits the Sidebar
Omits the Footer
Omits all Navigataion
Displays the Content of each page minus above.

Here is what I have and it kind of works as a media print CSS:

/* > Print Styles MusicPLN.org BP

---

*/

@media print {
body {
background: #CEDAF4 url( ‘http://musicpln.org/wp-content/uploads/2010/06/HEADERprint.png’ ) top center;
font-size: 12px;
font-family: Arial, Tahoma, Verdana, sans-serif;
color: #555;
width: 100%;
margin: 0 auto;
}

#sidebar { display:none !important}
#header { display:none !important}
#wp-admin-bar {display:none !important}
#footer { display:none !important}
#nav { display: none !important}
#omit { display:none !important}
#whats-new-form { display:none !important}
#whats-new-options { display:none !important}
#whats-new-submit { display:none !important}
#sub-nav {display:none !important}
#sidebar-me {display:none}
.main-column {display:none}

#container {
width: 100%;
border-bottom: 5px solid #e0e0e0;
}

#content{
width:100%;
margin:0;
font-size: 8pt;
float:none;
}
#content a { font-weight:bold;
color:#000066;
text-decoration:underline }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid }
h3 { margin-left:2px;
margin-bottom:0px;
padding-bottom:0px }
blockquote, table, pre { page-break-inside:avoid }
ul, ol, dl { page-break-before:avoid }
img.centered { display: block;
margin-left: auto;
margin-right: auto; }
img.right { padding: 4px;
margin: 0 0 2px 2px;
display: inline; }
img.left { padding: 4px;
margin: 0 2px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left }
img { page-break-inside:avoid;
page-break-after:avoid; }
}

[@pisanojm Participant 15 years, 3 months ago]

Seriously… there has to be some genius CSS person on this site that can help me with this! Polite bump…

[@mercime Participant 15 years, 3 months ago]

@pisanojm disclaimer first – no genius In any case, per image you attached

1. Center Graphic in top center of print screen –
since #header is display: none; we could tweak #container to show the header image instead
#container { padding-top: 100px; background: #CEDAF4 url(http://musicpln.org/wp-content/uploads/2010/06/HEADERprint.png) top center; }

2. Remove right column and expand to full width

div#content .padder {
margin-right: 0px; border-right: 0px; }

3. Remove item list

div.item-list-tabs { display: none; }

[@pisanojm Participant 15 years, 3 months ago]

@mercime First of all THANK YOU!

I’m 95% of the way there! Items 2 and 3 completely resolved with your above.
Item 1 still doesn’t appear… Any other thoughts?

Here is what I currently have:

/* > Print Styles MusicPLN.org BP

---

*/

@media print {
body {
background: #CEDAF4;
font-size: 10px;
font-family: Arial, Tahoma, Verdana, sans-serif;
color: #555;
width: 100%;
margin: 0 auto;
}

#sidebar { display:none !important;}
#header { display:none !important;}
#wp-admin-bar {display:none !important;}
#footer { display:none !important;}
#nav { display: none !important;}
#omit { display:none !important;}
#whats-new-form { display:none !important;}
#whats-new-options { display:none !important;}
#whats-new-submit { display:none !important;}
#sub-nav {display:none !important;}
div.item-list-tabs { display: none !important; }

#container {
padding-top: 100px;
background: #CEDAF4 url(http://musicpln.org/wp-content/uploads/2010/06/HEADERprint.jpg) top center; }

div#content .padder {
margin-right: 0px; border-right: 0px; }

#content{
width:100%;
margin:0;
font-size: 7pt;
float:none;
}
#content a { font-weight:bold;
color:#000066;
text-decoration:underline; }
h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid; }
h3 { margin-left:2px;
margin-bottom:0px;
padding-bottom:0px; }
blockquote, table, pre { page-break-inside:avoid; }
ul, ol, dl { page-break-before:avoid; }
img.centered { display: block;
margin-left: auto;
margin-right: auto; }
img.right { padding: 4px;
margin: 0 0 2px 2px;
display: inline; }
img.left { padding: 4px;
margin: 0 2px 2px 0;
display: inline; }
.right { float: right; }
.left { float: left; }
img { page-break-inside:avoid;
page-break-after:avoid; }
}

[@mercime Participant 15 years, 3 months ago]

1. Could you check your server if the header image you wanted is indeed at in http://musicpln.org/wp-content/uploads/2010/06/HEADERprint.jpg)
2. If URL path to image is correct, then add opening and closing apostrophe to background image url – I missed adding those, so url(‘http://musicpln.org/wp-content/uploads/2010/06/HEADERprint.jpg’)
3. If that won’t work, I need site URL.

[@pisanojm Participant 15 years, 3 months ago]

Yep, it’s there…
I tried the it with the apostrophes and without as well -I also tried it with background-image: vs background:

The site is musicpln.org but is closed right now Do you have a twitter account? I’ll DM you a testuser account.

[@mercime Participant 15 years, 3 months ago]

Add no-repeat and !important at end of background

#container {
padding-top: 100px;
background: #CEDAF4 url(http://musicpln.org/wp-content/uploads/2010/06/HEADERprint.jpg) top center no-repeat !important; }

P.S. Are you sure you want to have a colored background for print.css or white instead as in #ffffff ?

[@pisanojm Participant 15 years, 3 months ago]

No… I also tried with the ticks enclosing the url… Doesn’t make any sense….

[@pisanojm Participant 15 years, 3 months ago]

With regard to the color… I was just trying to see if it did anything… it’s not….

[@pisanojm Participant 15 years, 3 months ago]

Ok.. just thinking about this… maybe the browswer is set to not print backgrounds… let me look!?!?!

[@pisanojm Participant 15 years, 3 months ago]

Seriously… how dumb. That was it the background on all of my browswers default to not print backgrounds…
Well that solved the issue with not seeing it. Now, it simply goes to the top center and is written over by all of the other page… Ok, I appreciate your help, I’ll see if I can figure out how to get this to format now. THANK YOU!

[@mercime Participant 15 years, 3 months ago]

“Now, it simply goes to the top center and is written over by all of the other page”
Increase padding-top of #container to 145px – so that there’s at least 20px space between header image and content

You’re welcome

[@pisanojm Participant 15 years, 3 months ago]

Ok, so I changed it around little bit…re-added the header after taking out the search box and am pretty happy with this now. For anybody looking for a starter I’ve included it here below. Couple that with this WordPress Codex article and you should be good to go.

Codex: Styling for Print:
https://codex.wordpress.org/Styling_for_Print

My final PRINT CSS for Buddypress THANKs to @mercime !!!:

/* > Print Styles MusicPLN.org BP

---

*/

@media print {
body {
background: #ffffff;
font-size: 9pt;
font-family: Arial, Tahoma, Verdana, sans-serif;
color: black;
width: 100%;
margin: 0 auto;
}

#search-bar {display:none !important;}
#sidebar { display:none !important;}
#wp-admin-bar {display:none !important;}
#nav { display: none !important;}
#omit { display:none !important;}
#whats-new-form { display:none !important;}
#whats-new-options { display:none !important;}
#whats-new-submit { display:none !important;}
#sub-nav {display:none !important;}
div.item-list-tabs { display: none !important; }

div#content .padder {
margin-right: 0px; border-right: 0px;
}

#content{
width:100%;
margin:0;
border-top:2px dashed #628FBD ;
font-size: 7pt;
float:none;
}

#content a { font-weight:bold;
color:#000066;
text-decoration:underline; }

h1, h2, h3, h4, h5, h6 { page-break-after:avoid;
page-break-inside:avoid; }

h3 { margin-left:2px;
margin-bottom:0px;
padding-bottom:0px;
}

blockquote, table, pre { page-break-inside:avoid; }

ul, ol, dl { page-break-before:avoid; }

img.centered { display: block;
margin-left: auto;
margin-right: auto; }

img.right { padding: 4px;
margin: 0 0 2px 2px;
display: inline; }

img.left { padding: 4px;
margin: 0 2px 2px 0;
display: inline; }

.right { float: right; }

.left { float: left; }

img { page-break-inside:avoid;
page-break-after:avoid; }
}