SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Different logo in Print Css....

    On our website, our logo is white on a blue background.

    Is there anyway in the print css that I can change the logo from a white version to a blue version? (so it saves printing all the blue background etc).

    I have tried adding a 2nd logo div in the main page, and having its attributes in the screen css set to display: none; but then when i go to print, nothing shows on the print screen page, even though it is set to visable in the print.css.

    Any ideas how i can get this to work? Is it possible?

    Cheers.

  2. #2
    SitePoint Wizard bronze trophy Tyssen's Avatar
    Join Date
    Oct 2005
    Location
    Brisbane, QLD
    Posts
    4,067
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is the image a background-image? Browsers are set up to not print bg images by default. A user can set their browser to do that but you can't rely upon users to do so. The only way to guarantee it will print is to insert the image into the HTML.

  3. #3
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Tyssen
    Is the image a background-image? Browsers are set up to not print bg images by default. A user can set their browser to do that but you can't rely upon users to do so. The only way to guarantee it will print is to insert the image into the HTML.
    The image is in the HTML.

    What im hoping to be able to achieve, is to have both images in the html, each surrounded by their own div.

    Then in the screen css have one logo hidden and one shown, and then in the print css have the other logo hidden and the other one shown.

    Is this possible?

  4. #4
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hey BigKingy,

    Sure, it's possible. Here's one way of doing it: http://corkd.com/

  5. #5
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Egor, I see you have stuck it in a H1 tag, could you please let me see what the CSS is for the H1 tag?

    Many thanks.

  6. #6
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi again,

    Well it's not actually my site.

    Code:
    #header h1 {	
    	float: left;
    	margin: 0;
    	padding: 20px 0;
    	text-indent: -9999px;
    	}
    #header h1 a {
    	display: block;
    	width: 103px;
    	height: 42px;
    	background: url(../img/logo-dark.gif) no-repeat top left;
    	}
    Negative text-indent is used to shift inline elements off the page, (in this case the <img>). The <a> is set to display: block; so that dimensions can be given and to prevent it from being shifted off the page along with the <img> (because <a> is also an inline element by default). A background image (which is the screen logo) is then applied to the <a>.

    As all these styles are applied to the screen style-sheet only, no rules need to be over-written for the logo in the print one.

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,235
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by BigKingy
    The image is in the HTML.

    What im hoping to be able to achieve, is to have both images in the html, each surrounded by their own div.

    Then in the screen css have one logo hidden and one shown, and then in the print css have the other logo hidden and the other one shown.

    Is this possible?
    It's possible, but not ideal. Do you want people seeing two images if CSS is turned off in their browser?

  8. #8
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Egor
    Hi again,

    Well it's not actually my site.

    Code:
    #header h1 {	
    	float: left;
    	margin: 0;
    	padding: 20px 0;
    	text-indent: -9999px;
    	}
    #header h1 a {
    	display: block;
    	width: 103px;
    	height: 42px;
    	background: url(../img/logo-dark.gif) no-repeat top left;
    	}
    Negative text-indent is used to shift inline elements off the page, (in this case the <img>). The <a> is set to display: block; so that dimensions can be given and to prevent it from being shifted off the page along with the <img> (because <a> is also an inline element by default). A background image (which is the screen logo) is then applied to the <a>.

    As all these styles are applied to the screen style-sheet only, no rules need to be over-written for the logo in the print one.

    Hi Egor, I cant get it to work?

    All that happens is that it displays the H1 link and background fine, but when i go to print, it just shows that logo, not the print one?

    HTML:

    <div id="logo">
    <h1><a href="/"><img src="../../images/logo_print.gif" width="250" height="31"></a></h1>
    </div>

    CSS:

    #logo {
    padding-left: 10px;
    padding-top: 10px;
    }

    #logo h1 {
    float: left;
    margin: 0;
    padding: 0px 0;
    text-indent: -9999px;
    }

    #logo h1 a {
    display: block;
    width: 250px;
    height: 29px;
    background: url(../images/jylogo.gif) no-repeat top left;
    }


    Any ideas?

  9. #9
    SitePoint Enthusiast BigKingy's Avatar
    Join Date
    Jun 2004
    Location
    London
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    It's possible, but not ideal. Do you want people seeing two images if CSS is turned off in their browser?
    If the CSS is turned off, then a lot of the website will look odd, but sadly thats not down to my design skills, its a template ive been made to use from higher management

  10. #10
    Non-Member Egor's Avatar
    Join Date
    Jan 2004
    Location
    Melbourne, Australia
    Posts
    7,305
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi,

    Are you positive the styles above were put in a screen-only style-sheet? If you're feeding those same styles to the printer, you'll need to do this:

    Code:
    <style type="text/css" media="print">
    #logo h1 {
      text-indent: 0;
    }
    </style>

  11. #11
    SitePoint Wizard jag5311's Avatar
    Join Date
    Jan 2003
    Location
    Somewhere in Indiana
    Posts
    3,082
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you want a higher quality logo for print on your site, typically I will have one for the screen, and then I will include a print version in the HTML that is much larger. Sometimes 400px wide (works best if its a gif for file size). Then I will hardcore set it to be 200px wide (give or take) just using <img src="blah.gif" width="200" alt="" class="print" />

    In the main CSS, I set the .print to be display: none;

    In the print stylesheet, set it to display: block;

    When they print it, the preview will look kinda bad, but it prints much crisper and of better quality on paper then if you were to use a 200px logo for screen and print.

    Just a recommendation. This site is where I have used it: http://woods.com/


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •