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

[riryrery]

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?

[Jen Baumann]

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:

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

[riryrery]

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?

 

 

[Jen Baumann]

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.

[riryrery]

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>

[Jen Baumann]

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:

#print-logo {display:none;}

The image you add above needs the id added:

<img  id="print-logo" src="

Remove what you put in the wp_footer hook.

[Jen Baumann]

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.

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

the background color line should be (or you can just move the hex number to the prior line and delete the background-color line):

background-color: #9ec4e6;

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

color is missing the semicolon at the end ;

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

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

[riryrery]

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

 

[Jen Baumann]

Clear your cache and refresh 🙂 I think now that you've fixed your parse errors, it should appear.

[riryrery]

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?

[Jen Baumann]

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.

[riryrery]

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?

 

[Jen Baumann]

Yes, that's correct!

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

[riryrery]

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.

 

 

 

[Jen Baumann]

That's because you have

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

I haven't visited those pages, but you have. Hence the difference 😉

[riryrery]

That was it: #nav li li a:visited {

Not sure why that doesn't come up when I inspect the element via firebug.
Instead it shows me this:

#nav li li a, #nav li li a:link {

Bothersome!

Thank you for your help 🙂 You've been a great help and I think we're all done!

[Jen Baumann]

You're very welcome! I'm glad I could help!

[Author]

Posts