Need help with print stylesheet and printing logo – can't get it to work

Community Forums Forums Design Tips and Tricks Need help with print stylesheet and printing logo – can't get it to work

This topic is: resolved

This topic contains 16 replies, has 2 voices, and was last updated by  Jen Baumann 1 year, 10 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #17290

    riryrery
    Participant
    Post count: 20

    Regarding the site at http://www.hoseheadmarketing.com, using WP 3.5.1…

    I am trying to follow the instructions here: http://blog.e-ss.be/2007/10/15/printcss-and-your-websites-logo/

    to get the logo to print on a printout of the website.

     

    Here’s what I did:

    In Genesis Simple Hooks, wp_head Hook, I added:

    <link href=”/css/print.css” rel=”stylesheet” type=”text/css” media=”print” />

     

    In wp_footer Hook, I added:

    <img src=”/img/logo.png” alt=”Citivest logo” id=”print-logo” />

     

    In my folder wp content/themes/corporate/

    I added the following print.css file:

    /* Print Style Sheet */
    @media print {
    body { background:white; color:black; margin:0 }
    #header {display:block;}
    #print-logo (display:block;}
    }

    I added this to stylesheet.css at the very bottom:

    #print-logo {display:none;}

     

    It still doesn’t work.

    Can anyone assist me with this?

    #17404

    Jen Baumann
    Keymaster
    Post count: 444

    You’ve got several things going on here that are causing it not to work. Mostly, it’s location of files. The location you’ve used is /css/print.css, but your actual location is http://hoseheadmarketing.com/wp-content/themes/corporate/print.css. So, update that url.

    The same thing with the logo url. . I would put this as the first thing in your Header Right Widget Area instead – in your existing text widget.

    Change the css in your print.css to this, which will work, assuming the image is in the Header Widget:
    [css]
    body {
    background: none repeat scroll 0 0 white;
    color: black;
    margin: 0;
    }
    #print-logo {
    height: 102px;
    width: 260px;
    float: left;
    }
    #header, #print-logo {
    display: block;
    }
    #title-area {
    display: none;
    }
    #header .widget-area {
    width: 100%;
    }[/css]


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17476

    riryrery
    Participant
    Post count: 20

    Thank you for your response Jennifer.

    1. I updated the URL of the css file to: http://hoseheadmarketing.com/wp-content/themes/corporate/print.css

    2. I added it to header right widget area, but it needs to be on the left side of the page where it resides now. My theme doesn’t come with a header left widget area.

    What next?

     

     

    #17489

    Jen Baumann
    Keymaster
    Post count: 444

    Add the css I showed above to your print.css. Right now, you only have a tiny bit of css in it. It needs to have what I gave you above in it.

    I do see you updated the url. BUT, it appears to have an extra ” at the end so it isn’t being included properly.

    You do need to include the image in the header right widget area, in the same widget that is already there. Because you have #print-logo {display:none;}, it won’t show for screen. The css I gave you to include in the print.css will change the layout for print.

    Do those things, then I’ll take a look at it again and we’ll update as we need to.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17510

    riryrery
    Participant
    Post count: 20

    The logo is in position and prints now – wonderful!

    I’m unable to have the text on the right side of the screen show up now. I’d like it aligned horizontally with the logo. Here’s what I have in the widget:

    <img src=”http://HoseheadMarketing.com/wp-content/themes/corporate/images/logo.png” alt=”Citivest Funds Real Estate Investments” > <div style=”line-height: 28px; font-size=24px; font-family: Arial; color: #1c4587; font-weight: bold”>The Citivest Family of<br>Real Estate Opportunities<br>

    #17543

    Jen Baumann
    Keymaster
    Post count: 444

    A couple of things.

    The css I gave you above needs to go in this file: http://hoseheadmarketing.com/wp-content/themes/corporate/print.css

    This css (that you did have in your style.css before), needs to stay in style.css:

    [css]#print-logo {display:none;}[/css]

    The image you add above needs the id added:

    [code]<img id="print-logo" src="[/code]

    Remove what you put in the wp_footer hook.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17549

    Jen Baumann
    Keymaster
    Post count: 444

    PS. It looks like you made some edits to the #nav css tonight as well, which is causing a couple of parse errors in your style.css file.

    [css]#nav li a .sf-sub-indicator {
    background: url(images/arrow-down.png) no-repeat;
    background color: #9ec4e6
    height: 10px;
    position: absolute;
    right: 10px;
    text-indent: -9999px;
    top: 20px;
    width: 10px;
    }[/css]

    the background color line should be (or you can just move the hex number to the prior line and delete the background-color line):
    [css]background-color: #9ec4e6;[/css]

    [css]#nav li li a:visited {
    background-color: #9EC4E6;
    border: 0px solid #9EC4E6;
    color: #1c7b87
    border-top-width: 0;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 120px;
    }[/css]

    color is missing the semicolon at the end ;

    [css]#nav li li a:hover,
    #nav li li a:active {
    background: #9EC4E6;
    color #1c7b87
    background-color: #0274be;
    }[/css]

    color is missing the semicolon at the end and you’re basically repeating background colors with both background and background-color.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17551

    riryrery
    Participant
    Post count: 20

    Okay, did all that and now only the logo shows, the rest of the page is missing?

     

    #17552

    Jen Baumann
    Keymaster
    Post count: 444

    Clear your cache and refresh :) I think now that you’ve fixed your parse errors, it should appear.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17553

    riryrery
    Participant
    Post count: 20

    Forget that, I was missing a </div> tag.

    Another question. At the top left of a printout page, there is in plaint text “Citivest Funds – Real Estate Investments-” and on the top right of the page it shows “http://hoseheadmarketing.com”

    Is there anyway to remove those?

    #17555

    Jen Baumann
    Keymaster
    Post count: 444

    No, those are user controlled settings. The viewer can change those from the browser they print from, but you have no control.

    For the link to your print.css, you do need quotes around it the href. It may have shown as having an extra one earlier if you had a “ instead of a " (subtle difference, but there is one).

    I can’t post the code here, it rewrites it.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17558

    riryrery
    Participant
    Post count: 20

    Okay, in the Genesis wp_head Hook I added the quotes:

    <link href=”http://www.HoseheadMarketing.com/wp-content/themes/corporate/print.css” rel=”stylesheet” type=”text/css” media=”print” />

    Is that correct?

    Also, something happened to the color of the text on the drop down nav and I’m  unable to find where to change the color now.

    Nav bar text should be color #1c4587. When hovered or active, it is #1c7b87

    For some reason the drop down menu items are #1c7b87 all the time now. I tried changing it several places, but it remains the teal color. How can I change it to #1c4587 when it is not being hovered over or active?

     

    #17594

    Jen Baumann
    Keymaster
    Post count: 444

    Yes, that’s correct!

    You must have fixed this already. I see #1c4587 normal and #1c7b87 on hover for the drop down menu items.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #17692

    riryrery
    Participant
    Post count: 20

    It isn’t fixed. For me the text “Residential Fund” “Commercial Fund” “Trust Deeds/Mortgages Fund” and “Institutional” are all appearing in #1c7b87 (teal) when I hover over “Family of Funds”. I want the colors on those to be #1c4587 (dark blue). The only time I want it to be the teal color is when my cursor is actually hovering on it or when I am on that page.

     

     

     

    #17816

    Jen Baumann
    Keymaster
    Post count: 444

    That’s because you have
    [css]#nav li li a:visited {
    background-color: #9EC4E6;
    border: 0px solid #9EC4E6;
    color: #1c7b87;
    border-top-width: 0;
    font-size: 12px;
    padding: 5px 10px;
    position: relative;
    text-transform: none;
    width: 120px;
    }[/css]

    I haven’t visited those pages, but you have. Hence the difference ;)


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

Viewing 15 posts - 1 through 15 (of 17 total)

The topic ‘Need help with print stylesheet and printing logo – can't get it to work’ is closed to new replies.