• 0
Sign in to follow this  
Followers 0

Customizing CSS for Print Media in older browsers

Question

Posted · Report post

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. 

Share this post


Link to post
Share on other sites

25 answers to this question

  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://www.pagelines.com/store/plugins/browser-css/

 

Instructions and classes at - http://support.pagelines.me/docs/plugins/browser-specific-css/

 

Then using @media queries you'll be able to target the print options depending on that class. See - http://www.w3schools.com/css/css_mediatypes.asp

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Check your spelling ;) 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sean,

 

I use WP-Print, which helps on my sites.  http://wordpress.org/plugins/wp-print/

 

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://support.pagelines.me/docs/customization/custom-css/

 

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 http://bigfishdigital.net/wp-content/uploads/pagelines/compiled-css-1368646038.css

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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. 

 

 

 

 http://69.89.31.196/~autoequi/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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 - http://screencast.com/t/qpL4JDC21

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

 

http://d.pr/i/VEho

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

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

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for letting us know Sean.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Resurrecting this old thread.

Earlier, Rob suggested WP-Print.

I like it, from what I can see. However, the plugin's docs state that one needs to add:

if(function_exists('wp_print')) {
    print_link();
}

to the index.php, after:

<?php while (have_posts()) : the_post(); ?>

I'd like to do this in a way which won't hose any forthcoming Framework updates. With that in mind, where might I add that code?

The plugin's button needs to appear on each post (preferably in the upper-right).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks Danny.
I should have known that already. :(

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No problem.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I went with this:

// ADD WP-PRINT BUTTON TO THE TOP OF EACH POST //
add_action( 'pagelines_loop_before_post_content','add_wp_print' );
	function add_wp_print(){
		if( is_single() ) {
			print_link();
		}
	}

Seems to work well.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for sharing.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0