Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Jul 2007
    Posts
    27
    Thanks
    10
    Thanked 0 Times in 0 Posts

    printStyle css acting on Gradient Background

    I have many html files that has the background set to gradient with the following style:
    Code:
    <body class=bodyBG style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#add8e6', startColorstr='#FFFFFF', gradientType='0');"><center>
    On print, I want the background to be white. I have a .css style sheet that has the following that works if I'm just using "normal" background color settings (i.e. - bgcolor=lightblue) but is not working with this style:
    Code:
    .bodyBG { background-color:white;}
    What do I need to change to get this to work with this gradient style?

    Thanks

  • #2
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    in ie (and possibly others) you can use code like this to detect the print events and change your styles before and after the print event (just keep in mind if the print is cancelled, onafterprint might not fire). it sounds like you're setting your self up for some difficulty though, I'd just let the background get printed as is, sure the user loses a little ink but you might avoid a nightmare in finding a series of glitchmode events to create similar behaviors on the different browsers you'll be targetting.

    <head>
    <script>
    function changeToWhiteBack()
    {
    document.body.className = "class name for print style";
    document.body.style = "";
    }
    function changeToCoolStyle()
    {
    document.body.className = "class name for normal use";
    document.body.style = "styles applied not listed in your css class";
    }
    </script>
    </head>
    <body onbeforeprint="changeToWhiteBack();" onafterprint="changeToCoolStyle();" ...>
    </body>
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender

  • #3
    New Coder
    Join Date
    Jul 2007
    Posts
    27
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thanks Mike.
    I have tried to apply this but can't seem to get it to work. This just turns the page white. This is going to be used for ISO documentation so print appearance is a concern. Here's what I have:
    Code:
    <script>
    function changeToWhiteBack()
    {
    document.body.className = "whiteStyle";
    document.body.style = "";
    }
    function changeToCoolStyle()
    {
    document.body.className = "gradientStyle";
    document.body.style = "filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#add8e6', startColorstr='#FFFFFF', gradientType='0');"
    }
    </script>
    </head>
    <body onbeforeprint="changeToWhiteBack();" onafterprint="changeToCoolStyle();"><center>
    I have tried a few variations of this to no avail.

  • #4
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Did it ever occur to you that this'll only work for MSIE?

  • #5
    New Coder
    Join Date
    Jul 2007
    Posts
    27
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by CyanLight View Post
    Did it ever occur to you that this'll only work for MSIE?
    That's fine. This is for internal use in my company and everyone here uses MSIE.

  • #6
    New Coder
    Join Date
    Jul 2007
    Posts
    27
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Is there another way to do this?

  • #7
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Alright if you like...

    Code:
    <style type="text/css">
    @media screen {
        body {
            filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#add8e6', startColorstr='#FFFFFF', gradientType='0');
        }
    }
    @media print {
        body {
            background: #fff;
        }
    }
    </style>

  • Users who have thanked Apostropartheid for this post:

    joefrench (01-22-2008)

  • #8
    New Coder
    Join Date
    Jul 2007
    Posts
    27
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Thank you CyanLight. Just curious. Is your hesitation on this due to the fact that it will only work for MSIE?

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Yes. It seems a bit hypocritical to me, too, seeing as iso standardizes things. Electronic documents don't have an expiry date, either. What if IE totally dies out (unlikely) and businesses ditch it for Ffx or Opera? Alright it's just a background, but it's the little touches...=P

  • #10
    New Coder
    Join Date
    Jul 2007
    Posts
    27
    Thanks
    10
    Thanked 0 Times in 0 Posts
    I see. Personally, I'd rather it be all white background but my boss is a fanatic for aesthetics. (Why an engineer is letting aesthetics trump functionality is beyond me.)
    These docs are just project information which is basically just detailing meeting notes. Besides....I'm sure I'll be retired (only 45 yrs. away) before this place even thinks about switching away from any microsoft product. They'll stay at IE7 if need be.
    As you said, it's just a background....

  • #11
    Regular Coder mjlorbet's Avatar
    Join Date
    Jan 2008
    Location
    Milwaukee, WI
    Posts
    724
    Thanks
    8
    Thanked 96 Times in 95 Posts
    $get("elementID").style.filter = "filter name string";
    -Mike
    "Want me to precludify him, like some kind of dispatcherator?... Can do!" -Bender


  •  

    Posting Permissions

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