Skip to:
Content
Pages
Categories
Search
Top
Bottom

Need Help with Print CSS for Buddypress. PLEASE help.


  • Pisanojm
    Participant

    @pisanojm

    14 years, 4 months ago

    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; }
    }

Viewing 12 replies - 1 through 12 (of 12 total)

  • Pisanojm
    Participant

    @pisanojm

    14 years, 4 months ago

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


    @mercime
    Participant

    @mercime

    14 years, 4 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

    @pisanojm

    14 years, 4 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

    @mercime

    14 years, 4 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

    @pisanojm

    14 years, 4 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

    @mercime

    14 years, 4 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

    @pisanojm

    14 years, 4 months ago

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


    Pisanojm
    Participant

    @pisanojm

    14 years, 4 months ago

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


    Pisanojm
    Participant

    @pisanojm

    14 years, 4 months ago

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


    Pisanojm
    Participant

    @pisanojm

    14 years, 4 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

    @mercime

    14 years, 4 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

    @pisanojm

    14 years, 4 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; }
    }

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Need Help with Print CSS for Buddypress. PLEASE help.’ is closed to new replies.

Topic Info

Topic Tags

Skip to toolbar