Community Forums › Forums › Archived Forums › Design Tips and Tricks › Print only a small portion of page using CSS? Using Sample theme
Tagged: printer stylesheet. print.css
- This topic has 13 replies, 2 voices, and was last updated 9 years, 8 months ago by copious.
-
AuthorPosts
-
August 17, 2014 at 10:19 am #119365copiousParticipant
It seemed like a simple thing, and with a whole lot of tutorials online using css and javascript, etc, I thought I'd get something to work. But I haven't. My WordPress and CSS skills are getting better, and I really did try, but just couldn't find a solution. I'm making a website using the Genesis Sample Theme. One page has a coupon that I want visitors to be able to print by clicking a link that says "Click here to print coupon."
The good news is that I got some very basic code to print the page (but I can only get it to print the whole page, which take up two pages since it has to print the header and navigation). There are some good suggestions out there online, but some involve editing the head, etc, and are geared to custom websites, not WordPress or Genesis websites. Since this is a WordPress theme, the head automatically gets inserted, and I only have access to edit the page content. I don't want to edit the code to include the printable feature on every single page. There has to be a way - ideally using CSS - that I can allow website visitors to print just the page content and not the header, footer, etc.
Here's the page I'm talking about: http://virtualmaximum.com/wds/promotion/
Any ideas, suggestions, or links to an appropriate tutorial would be greatly appreciated. Thanks! 🙂
Occasional WordPress designer, learning more with each website!
August 17, 2014 at 11:54 am #119377TomParticipantPlugin:
Genesis Printstyle Plus
https://wordpress.org/plugins/genesis-printstyle-plus/
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 17, 2014 at 12:48 pm #119382copiousParticipantGreat! I like the simplicity of a plugin, but I need to force myself out of my comfort zone and try some more coding. To some of you, this will seem easy. To me, it's something new and challenging. Plus, I've already got a few plugins and don't want too many, as I hear that can slow down a website. That tutorial says to make a print.css file which they don't show, but I found a sample on another website, so I'm going to try it. Just have to run out for a few hours though... looking forward to trying it as soon as I get back! Thanks again! 🙂
Occasional WordPress designer, learning more with each website!
August 17, 2014 at 4:34 pm #119415copiousParticipantIn order to avoid adding another plugin to this website, I decided to try achieving this by code, following the example in the link above. I'm sure it's excellent and the method is absolutely perfect... for someone who is a bit more familiar that than a novice like me. The first thing I did was add this code to functions.php, as-is without making any changes, since I'm really not sure what I should change, if anything. It looks like I might need to add my URL, but I think this adds the code to the head of each page, which calls a file called print.css (which I created):
add_action( 'wp_enqueue_scripts', 'child_print_style' ); /** * Add print style sheet. * * This provides the theme with the functionality to include a * print style sheet. * * @author Jen Baumann * @link http://dreamwhisperdesigns.com/?p=1035 */ function child_print_style() { wp_enqueue_style( 'child_print_style', $src = CHILD_URL . '/print.css', 'false', '1.0.0', 'print' ); }
And then I found a few examples of print.css for WordPress sites, so I pieced a few of them together to make this print.css file which I uploaded to the same directory:
/* Print Style Sheet */ @media print { body { background:white; color:black; margin:0 } #header { display:none } #content { display:block } #comments { display:none } #sidebar { display:none } #footer { display:none } }
Sadly, when I click the print button, there is absolutely no difference. I've tried several different tutorials, edits, etc and I'm getting really frustrated. This probably makes perfect sense to a lot of you, but I have no idea if I'm close, or way off. Could anyone let me know if I'm on the right track please? Thanks! 🙂
Occasional WordPress designer, learning more with each website!
August 17, 2014 at 9:44 pm #119448TomParticipantYou're almost there. (The easy bit has been done. 🙂 )
Jen Baumann's code enqueues the stylesheet with this output in the HTML.
<link rel='stylesheet' id='child_print_style-css' href='http://virtualmaximum.com/wds/wp-content/themes/WendysDrivingSchool/print.css?ver=1.0.0' type='text/css' media='print' />
Inside
print.css
you've placed the "default code" from the WordPress Codex for defining print styles. The problem is that none of those CSS selectors are used in your theme. You get to write your own print stylesheet.The plugin from David Decker also loads a stylesheet but also includes some functioning CSS code as a default that works with most themes. You could use that CSS back in your
print.css
, but it's minified and not going to be much fun. With the plugin you have the alternative to use an additional stylesheet to tweak the print output or to start from scratch with your own recipe.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 18, 2014 at 10:44 am #119549copiousParticipantThanks for your help. I think I'm going to have to find an outsourcer to get this to work for me. I used Firebug to try and identify the elements, and after spending about half an hour trying (what seemed like) every single possible page element, there was absolutely no change. The print preview still showed that it would print on two pages and print the navigation, phone numbers at the top right, footer, etc.
I even tried the David Decker's plugin. The print preview looked a lot better, but for some reason, it pushed the page content about half way down the page, and the footer was still being printed, on the second page. There don't seem to be any settings in the dashboard for making edits - they all require cracking open the code and css and editing. And then the code I put on the page itself for "click here to print coupon" kept disappearing!!! I'd put it back in, save it, work on a different part of the page, and then it just turned into bolded text with no link to print!
I was ready to throw the computer out the window. What seemed like a simple task is clearly way above my skill level. I could waste hours on this. I was really hoping to figure it out so I could use it on future sites, but I have to give up on it now. Ironically, I was able to figure out a lot of really challenging things on this website, but not the simple print feature, despite the plethora of tutorials (though none the same as my site) and the help I got here. But thanks for the help and suggestions. I wish I could have got it to work. Time to find an outsourcer.
Occasional WordPress designer, learning more with each website!
August 18, 2014 at 11:25 am #119557TomParticipantI'm sorry you're experiencing frustrations with your print setup 🙁 . Can we give it another try? (we'll use the plugin)
- Install and activate Genesis Printstyle Plus plugin.
- Create a file in your theme root folder named
print-additions.css
(where your original stylesheet is found). - Place this code in that file, save and upload to the live site.
/* Print Stylesheet Supplemental CSS Media Queries Ref: Genesis Printstyle Plus plugin Template Version: 1.0 */ /* Print Style Sheet */ @media print { .header-widget-area, .genesis-nav-menu, .site-footer { display: none; } }
Now reload the page with the coupon and test with print preview. The header text, nav menu and footer should not display, leaving only the logo and body text from the page. You should be able to add other CSS statements to this file to change elements of the print output.
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 18, 2014 at 3:33 pm #119605copiousParticipantThanks for your perseverance. I re-installed the plugin and uploaded that print-additions.css file. The good news is that the navigation, phone numbers, etc, are not showing up anymore. The bad news is that the page content is still being pushed down the page, and still results in two pages being printed (when viewed in print preview). The second page just shows the date and and h1 name. Still, I don't want people to end up with two sheets of paper coming out of their printer for something that should fit on half a sheet.
I've spent the last hour or so scouring Google and found many good tutorials. Again, many that are similar but none that are quite like my situation. I've tried all sorts of css tricks, padding, collapse, hidden, etc. You have no idea how frustrating it is when every single thing you try ends up have no effect! I am seriously ready to give up on this and pay someone on Fiverr $5 to fix this. It's probably a simple thing, but I don't have the patience for it anymore. I'd actually rather have the code than another plugin, as there already 7 (soon to be 9) plugins. I hear the more plugins, the slower the site runs. Since programming is not my strength, I need to stop relying on plugins and just outsource the programming/coding/css to someone who's proficient at it. I'm sure it would be done in less than 10 minutes. Maybe even 2 minutes. I've spent a few hours on this crazy print page thing!
Occasional WordPress designer, learning more with each website!
August 18, 2014 at 9:49 pm #119692TomParticipantUse this as your
print-additions.css
file./* Print Stylesheet Supplemental CSS Media Queries Ref: Genesis Printstyle Plus plugin Template Version: 1.0 */ /* Print Style Sheet */ @media print { p a, .site-header, .header-widget-area, .genesis-nav-menu, .site-footer { display: none; } .entry-title:before { display: block; content: "Thank you for printing our Coupon!"; margin-bottom: 10px; border: 1px solid #bbb; padding: 10px; font-style: italic; font-size: 12pt; } }
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 18, 2014 at 10:25 pm #119699TomParticipantAlso - I meant to add something about plugins: there is an amount that is 'too many'. I don't know what it is, but it is more than 7. Or 9.
For example, from this thread, we have counts of 38, 7, 30, 34, 24 and 40+. It's not so much the number but the quality. If they are well-constructed they won't affect performance or security really any differently than code in your
functions.php
. (Anything from David Decker is top notch.) If you want to measure and tweak performance there are techniques, tests and - yes- even more plugins 🙂 for that.Plugins also offer the flexibility of changing your theme more easily because you're not dependent on having everything built-in. This might not be so critical in the case of your printing, but good measure for your next project. You can even make your own plugin to keep things organized and portable.
Also Also: it took me a while to notice you were working all weekend on a site from Montreal - you could have been at Wordcamp Montreal! Whatever your skill level or area of expertise, there's always something interesting at WC. Several of the Montreal presenters have been at Ottawa and Toronto - I'm looking forward to WCTO in November.
http://2014.toronto.wordcamp.org/ http://2014.montreal.wordcamp.org/
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 19, 2014 at 9:14 am #119778copiousParticipantTom, thank you so much! That code worked perfectly! I added back the link to print the page, to make it even easier for site visitors to print, and it also seems to be working. Thanks again!
When I see the correct code in front of me, it all makes perfect sense. But unless I've encountered that issue before, I just can't seem to figure it out on my own. I've been able to figure out a lot of things by finding free tutorials online, or in this case, a premium theme's support forum. Occasionally, I've outsourced it someone on Fiverr. I've been working with WordPress for a few years now, but only on a part time basis. I started out with the default themes, then free themes. Then I tried *cough* the Thesis theme, and got the hang of it, until they changed to version 2.x. It was so totally different, I never got used to it. I took a paid WordPress course online, on Udemy, and the instructor was using Genesis with the sample theme. In fact, the basis of this website was done in that course, as my first ever Genesis site. After the course, I made some changes and additions to make it work for this project. I'd like to get back into making websites (all with Genesis), even if part time, (ideally full time) but so that I can generate a measurable income from it. I think I need to make a few more websites, then hopefully I will be comfortable enough with it.
This website I'm working on is actually for a friend of mine. I originally designed her current HTML website and have been maintaining it since 2006 (actually, 2004 was the original site, but it was awful). She hired a programmer to make a registration and scheduling back end, since that's way out of my skill level.
And yes, it's a Montreal area website! I used to live there for many years, and loved it, except for the long winters. So I moved back to BC, in the Vancouver area. But at the moment, I'm in the Toronto area due to my mother's health and hospitalization. I've been here for two months already, and am going to Montreal for a week or two in early September, but by the end of September, I have to get back to Vancouver. If I had known about Wordcamp in Montreal, I would have gone for sure! It's not too far to drive and I'd have a place to stay. Too bad I missed it, and I'll miss the one in Toronto in November. Hopefully they come to Vancouver.
As for plugins, that's good to hear that it's not so much the quantity, but the quality. Now that I have a bit more WordPress experience, I avoid "brand new" plugins that might be of questionable quality, and abandoned by the time the next WordPress update comes along. Two of the plugins I have are paid plugins from respected people on Code Canyon. I figure those plugins should be reliable and updated when needed. The others are free plugins, but from trustworthy sources (like Akismet, Contact Form 7, W3 Total Cache, etc. I try to pick plugins that have been around for a while and have a history of being maintained, and a large number of downloads. So, I guess I was on the right track after all! I still try to keep the number of plugins to a minimum, if anything, for simplicity.
Thanks again! I really appreciate the help and persistence in getting me to not give up on this! 🙂
Occasional WordPress designer, learning more with each website!
August 19, 2014 at 9:26 am #119782copiousParticipantI forgot to mention, now that this website is finished, I get to do it all over again, in French! The content is already made (I will take it from the current HTML website), but we're getting a professional proofreader to go over it, as my French grammar is not perfect, although that content has been up for almost 10 years! But, we're moving up to a classier looking website now with the mobile responsive Genesis theme, so we want the grammar and spelling to be perfect on the French pages too. At least with making the website in French, it will be easier as I've already gone through the learning curve with getting the English version to work.
Once they let me know if everything is OK with the English version, I will use the WordPress Multilingual plugin to set it up for English navigation on the English pages, and French navigation on the French pages, and a language selector. I might replace the slider on the home page with a video, once the video is made.
I cringe looking at the 2006-era HTML website at http://wendysdrivingschool.com/ which is soon to be replaced by this modern looking Genesis website. Even back in 2006, the patterned wallpaper was dated, but my friend loves it. In fact, I know she'll be upset that I didn't use it in this redesign...
Occasional WordPress designer, learning more with each website!
August 19, 2014 at 10:07 am #119789TomParticipantSuper! Glad you persevered. Next time will be easier, no matter what it is.
This year's WC was in July but if you stay tuned you can catch the next one. The WordCamp sites for past events have links to most presentations (http://2014.vancouver.wordcamp.org/) and some are video recorded and made available on http://wordpress.tv/.
Meetups are another good way to mingle, learn and contribute.
http://www.meetup.com/Vancouver-WordPress-Meetup-Group/
Also: Home in YVR, working from YYZ on a YUL site. I like that. 🙂
Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]August 19, 2014 at 11:26 am #119801copiousParticipantYes, for sure the next one will be easier. That's why I try my best to get things to work, even if time consuming and challenging, especially if I think I will use them later - which will be faster once I have experience. But I have to admit, I was almost ready to give up on the "print coupon" challenge! Thanks again for your help.
So far I've heard back from my friend's son that the new site is too plain. After all of the time I spent on it, I was hoping to hear something positive about it. But that's OK. I'm sure there are many things they will like about it. I put it up in the feedback forum here to get some feedback from other people too.
Yeah, home in YVR, working from YYZ on a YUL site. Makes me sound like someone really important, haha!
Nice to see there's a big WordPress community in the offline world in major cities! Looks like quite an active group in Vancouver. I'll have to check them out when I get back. Thanks for letting me know about it.
Occasional WordPress designer, learning more with each website!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.