Jump to content


Photo
- - - - -

Customizing CSS for Print Media in older browsers


Best Answer James B , 26 June 2013 - 10:45 PM

Hi,

 

Element style applies to inline css applied to that class, so if you have the class, you can over rule it.

 

So #supersized img {visibility: hidden;} or #supersized img {display: none;} should hide it in the css, if you find it's still appearing add !important to try and for it - #supersized img {visibility: hidden !important;}

Go to the full post


  • Please log in to reply
19 replies to this topic

#1 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 21 June 2013 - 09:18 PM

I have a client who's using ie8 on Vista and wants each page of the site to be printable. Is there a way within Pagelines to customize the print media css file to target older browsers? I'd like to be able to turn off the background image so that it just prints the content of the website. 



#2 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 21 June 2013 - 11:03 PM

Hi there,

 

I've never done this before personally, but looking at your enquiry I think you'll be able to use the following. We have the browser specific css plugin you can use. This will add classes to each of the browsers so you can target the css.

 

The browser specific plugin can be found at -

Please Login or Register to see this Hidden Content

 

Instructions and classes at -

Please Login or Register to see this Hidden Content

 

Then using @media queries you'll be able to target the print options depending on that class. See -

Please Login or Register to see this Hidden Content



#3 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 25 June 2013 - 02:34 PM

Hi James,

Thanks for the reply. I installed the plugin and followed the instructions but I'm getting a LESS compiler error. Below is what I put in the custom code area in the admin:

@media print
  body {
backgorund-image: none;
background-color: #ffffff;
}
 
Can you see anything wrong with this?


#4 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2385 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 25 June 2013 - 04:20 PM

Check your spelling ;) 



#5 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 25 June 2013 - 04:49 PM

nice. ok so I fixed the spelling error but it still isn't reacting to the style declaration. I can't seem to find the element that contains the background image - targeting the body element has no effect. The only way I know to even look at the css is through inspect element. With that tool it says all the CSS is inside this compiled-css file which I can't find. I've set the background image through the pagelines interface so it should be a standard div class that info gets associated with - but i can't find it.



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 June 2013 - 06:20 PM

Sean,

 

I use WP-Print, which helps on my sites. 

Please Login or Register to see this Hidden Content

 

You'll find it's the best way to print a specific part of a page.  I'm sure your client doesn't want to print everything. So this handy tool works. Been around for a long time, and well maintained.



#7 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 25 June 2013 - 07:36 PM

Hi Rob,

Tried installing that wp-print plugin but I get a 404 when I click the print page link. Checked the forums and support pages for the plugins and it looks like others have had this problem but the creator isn't responding. Have you ever had this issue?



#8 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 June 2013 - 08:11 PM

Hi there,

 

I've never used the above plugin so I couldn't advise on that. The css can be found using firebug or chrome dev tools.

 

See the following for a guide on how to use firebug or the developer tools in chrome -

Please Login or Register to see this Hidden Content

 

You can also inspect the compile css by going to view page source within the browser (usually right hand click on the mouse on the page) and clicking on the link in the source code for the compiled css. Looking at the link you have in your private url, your compiled css link would be

Please Login or Register to see this Hidden Content



#9 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 25 June 2013 - 08:24 PM

right. yes I can see the compiled css in chrome, but I can't get to it to make edits. Where is that file located? - or is it created on the fly somehow?



#10 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 June 2013 - 10:03 PM

Hi there,

 

Yes its created on the fly, compiled using LESS from the various LESS files within the different sections, folders throughout the theme.

 

You can copy the code you want to edit from the compiled css and paste it into the custom code box or into the style.css to overrule the compiled code.



#11 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 25 June 2013 - 10:14 PM

Thanks James,

Do you know exactly what element I need to target the background image? I've looked through all the divs from body on down to the header section and I cannot see a background-image declaration which puts the background image on the body. I used the pagelines admin interface to place the image in the background - so I assume there's a standard class that handles this feature. Here's a link to my page if that helps. 

 

 

 

 

Please Login or Register to see this Hidden Content



#12 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 25 June 2013 - 10:34 PM

Hi there,

 

looking through your source code it looks like the background is being applied using the supersize background feature in the color control tab. So it uses js to stretch the background out to fit the screen regardless of the width.

 

The image will be applied to #supersized img

 

See -

Please Login or Register to see this Hidden Content



#13 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 26 June 2013 - 03:35 PM

Awewsome! Thank you for finding that! Now how do i target it in the css with an @media print declaration? I've tried #supersized img {visibility: hidden;} but that doesn't do anything. the control appears to be on element.style - I can toggle the style in firebug and see the background turn off and on. Thought that might be an inline style, but if so will i be able to override it in the custom code section? 



#14 Martin Davies

Martin Davies

    Advocate

  • Moderators
  • 2385 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 26 June 2013 - 05:08 PM

i tried #supersized img {visibility: hidden;} and that worked for me. 

 

Please Login or Register to see this Hidden Content



#15 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 26 June 2013 - 06:34 PM

Hi Martin,

I put #supersized img {visibility:hidden;} in the custom code and it's getting canceled out by the element.style above it. 

 

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#16 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 June 2013 - 09:36 PM

Hi there,

 

You'd add the print css like

Please Login or Register to see this Hidden Content

Example code on :

Please Login or Register to see this Hidden Content

Please Login or Register to see this Hidden Content



#17 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 26 June 2013 - 09:52 PM

Thank you James, I understand how to create a print specific css style. My problem is that I can't seem to target the right element through css. Please see screen shots above.  the supersized img style is canceled out by elemenet.style - Not sure how Martin was able to make it work?



#18 James B

James B

    Advocate

  • Moderators
  • 4978 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 June 2013 - 10:45 PM   Best Answer

Hi,

 

Element style applies to inline css applied to that class, so if you have the class, you can over rule it.

 

So #supersized img {visibility: hidden;} or #supersized img {display: none;} should hide it in the css, if you find it's still appearing add !important to try and for it - #supersized img {visibility: hidden !important;}



#19 seanbahr

seanbahr

    Member

  • Members
  • 16 posts
  • Country: Country Flag

Posted 27 June 2013 - 03:18 PM

brilliant! Thank you! I don't like using the !important if I can avoid it but sometimes it's necessary. 



#20 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 27 June 2013 - 08:33 PM

Thanks for letting us know Sean.