Forum Replies Created
-
AuthorPosts
-
August 18, 2014 at 10:44 am in reply to: Print only a small portion of page using CSS? Using Sample theme #119549copiousParticipant
Thanks 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 17, 2014 at 4:34 pm in reply to: Print only a small portion of page using CSS? Using Sample theme #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 12:48 pm in reply to: Print only a small portion of page using CSS? Using Sample theme #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 11:41 am in reply to: How to center or move the h1 to the right a bit on just one page? #119373copiousParticipantAh, that makes perfect sense! Since I set up the permalinks to show the page names, rather than the page ID, I completely forgot about the page ID. But it sure comes in handy, especially in this case, thank you so much! I just added that CSS to my stylesheet, and it worked perfectly. I've also just installed Firebug. From a WordPress online course I recently took, it was suggested to use the Developer Tools in Chrome, but Firebug seems to be a lot better. I should use Firefox for developing, and Chrome for browsing. And I've bookmarked the CSS Box Model for future reference.
Thanks again! 🙂
Occasional WordPress designer, learning more with each website!
August 7, 2014 at 8:54 am in reply to: Replaced logo in sample theme, same size as original but mine is cut off #117574copiousParticipantI forgot to ask... do you think it looks OK with that large amount of white space in the middle of the header area? I tried making a wider graphic with the logo and a photo, which filled in some of the space nicely. But it didn't work well on mobile phones - it widened the viewing area and made it necessary to scroll left to right on mobile phone, which didn't seem very good. It works fine right now, with the extra white space. Should I just leave it like this?
Occasional WordPress designer, learning more with each website!
August 7, 2014 at 8:36 am in reply to: Replaced logo in sample theme, same size as original but mine is cut off #117568copiousParticipantExcellent, thank you! That new snippet of code worked perfectly. I tested it on my computer by resizing the browser as well as on my iPhone. In both cases, it works great. Looks much better with the phone numbers below the logo than diagonally across. Luckily I didn't need to do any tweaking. The only changes I made prior to this were to the height and padding of the logo, which didn't seem to affect this.
I understand the concept of what you did, but I don't think I would have figured out what code to write. Once you showed it to me, it made perfect sense. Writing and troubleshooting CSS is not my strong point, but with each website I make, I get a bit better. It's been a while since I made a website, so I need to get back into the groove. Thanks again! 🙂
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 8:24 pm in reply to: Replaced logo in sample theme, same size as original but mine is cut off #117497copiousParticipantThank you for your help! I really appreciate it. I noticed my logo was getting partially cut off when viewed on my iPhone so I reduced the size to 275x110 px. I just discovered I can add back a bit of padding at the top to push the logo down a bit without harming anything else - or so it seems.
Good to hear it's OK to edit the child themes. It's a bit different than what I got used to with the *cough* Thesis theme, but I'm sticking with Genesis now. Just a bit of a learning curve to get past. I think it's actually easier to edit the child theme than using hooks anyways.
I tried resizing my browser, and for the most part, the website looked good. At a certain point, the logo was diagonally across from the phone numbers (normally at the right side of the header at full browser width), and then eventually once the browser window got narrow enough, the phone numbers jumped below the logo - just as they do when viewed on my iPhone. If you'd like to see the website, please keep in mind that I'm still building it, so a lot of content is still not up, and I'm still working on the layout and fine tuning the appearance, though I think the header will be just about done now. Looks a bit odd with so much white space in the middle, but it might have to be that way so nothing gets cut off or too spread out on mobile phones, which is really important these days. Here's the temporary link where I'm working on the website while it's in development: http://virtualmaximum.com/wds/
That's a great idea for the logo to look good at high resolutions! I'm going to do that, but I'll have to do it later. For some reason, Photoshop keeps crashing on me today. Must be too many things open, normally it's fine. Hopefully a computer restart will take fix that.
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 5:36 pm in reply to: Replaced logo in sample theme, same size as original but mine is cut off #117460copiousParticipantThere doesn't seem to be a way to edit my posts, so I will just post a new reply. In playing around with the code, I found this:
/* # Site Header ---------------------------------------------------------------------------------------------------- */ .site-header { background-color: #fff; min-height: 160px; } .site-header .wrap { padding: 40px 0; }
I removed the 40px from the padding and now the extra white space is gone. But I wonder if that will have any repercussions elsewhere, or in other browsers? Seemed like too easy of a fix, and troubleshooting CSS, or any code, is NOT my strongpoint!
Occasional WordPress designer, learning more with each website!
August 6, 2014 at 5:25 pm in reply to: Replaced logo in sample theme, same size as original but mine is cut off #117459copiousParticipantI decided to take a chance and edit the styles.css file - despite my hesitations. I always thought it was a bad idea to edit the files. Having used *cough* Thesis before (but not anymore, Genesis from now on!) I would have used "hooks" in a separate file for new code to take priority over existing code. That way, when a theme gets updated, changes made to the code will be preserved in the separate file and not overwritten.
So the good news is that I got my logo to display now by changing min-height from 60px to 164px but the bad news is that it added a whole lot of extra white space above and below my logo (I'd say about 100px worth). I'm not sure how to eliminate the extra white space AND keep the logo from being cut off or cropped.
This is the code I edited:
.header-image .site-title > a { background: url(images/logo.png) no-repeat left; float: left; min-height: 164px; width: 100%; }
Occasional WordPress designer, learning more with each website!
-
AuthorPosts