Custom @media print stylesheet settings no longer have effect

  • Unknown's avatar
    bbllr87 · Member ·

    I have the Custom Design package and some time ago set Custom CSS to override the default print stylesheet to have certain items such as a customised header and not display some page items. The code I have is shown below. I have not changed anything for several weeks if not months.

    Today the printed version is not showing this. It is showing in a different font from the non-printed version; the header is missing and the links to which the images refer are shown in plain text.

    This is happening both in Chrome on my Mum’s pc – she noticed it – and here in Firefox.

    What is going on please?
    Has any recent upgrade to WordPress or the theme (Fresh & Clean) caused this?
    How do I fix it?

    ——————————–
    CODE IN CUSTOM CSS 

    @media print {
	#content {
		width: 96%;
	}

	#content article {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	#sidebar,
												#jp-post-flair,
												#access {
		display: none;
	}

	#branding {
		background: url('http://anitasailsagain.files.wordpress.com/2013/05/jointheader7.jpg') 0 0 no-repeat;
		min-height: 152px;
	}
}

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    designsimply · Member ·

    To start, I tested this on my own blog to see if I could get print styles to work and I was able to make them work for the Fresh & Clean theme. Here are my testing steps for reference:

    1. Change the blog to the Fresh & Clean theme
    2. Go to Appearance > Customize > CSS
    3. Add the basic print stylesheet example below
    4. Open the blog front end and do a print preview to see if the sample print stylesheet shows up

    Sample CSS:

    @media print {
	body { border: 5px dotted red; }
}

    Since my test worked and your print styles seem okay to me at first glance, I’m not sure why they aren’t taking effect yet but I’m going to try some more testing to see if I can figure it out.

  • Unknown's avatar
    designsimply · Member ·

    I took another look at this, and I found that a global print style was added to the Fresh & Clean theme in Aug 2013.

    In the global print stylesheet, it already takes care of some of the things you were targeting for print CSS before (like hiding the sharing buttons), but it also adds the !important rule for backgrounds. This means that you will also have to add the !important rule to override it — the same thing will be true any styles that are affected (so not all of them, but some of them).

    I think if you update to use the following CSS, it will work to get the result you’re after:

    @media print {
	#content {
		width: 96% !important;
	}
	#branding {
		background: url('http://anitasailsagain.files.wordpress.com/2013/05/jointheader7.jpg') 0 0 no-repeat !important;
		min-height:152px !important;
	}
}
  • Unknown's avatar
    bbllr87 · Member ·

    Thank you for your help with this.

    I had heard of the !important rule but never seen it used. Also didn’t think of checking for new stylesheets that may have been introduced.

    I have used your code to fix the image display and have also fixed the font and the display of each image url in addition to the image.

    Thanks again.

  • Unknown's avatar
    designsimply · Member ·

    Great! Glad to hear it’s working.

  • The topic ‘Custom @media print stylesheet settings no longer have effect’ is closed to new replies.