Styling header and

  • Resolved Marj Wyatt

    (@marjwyatt)


    10 years, 2 months ago

    Love your plugin. Thanks so much for bringing it to the WordPress community.

    I have a few “nits” to iron out. Frustratingly, they are related to CSS and that should be the easy part.

    I’ve created my custom template, including the featured image and some new fonts. The template is finding and publishing all the custom fields for my custom post type.

    Where I am hung up is styling the header and changing the PDF icon out for an image that my clients want on the submit.

    I have the image displaying but I cannot make the text on the link disappear and I don’t know where it is in your plugin. Here is my CSS:
    a.pdfbutton { text-indent: -9999px !important; background: url(images/wsg-print-pdf.png) no-repeat !important; width: 115px; height: 30px; z-index: -999; }

    Even with that, I had to modify the image reference in the plugin itself, which rather surprised me. If you can tell me how to tweak this small thing, I’d be very appreciative.

    I’m also unhappy with the header area. After eliminating the page top with the page number, there still is a tremendous amount of white space before the header text prints. I’d like to add their logo to that area too and, despite my efforts, I am not getting where I’d like to be so I thought I’d write and ask how one would go about actually styling that area of the PDF. If you’d be so kind, I would be quite grateful.

    There is also a lot of padding around paragraphs that is wasting space on the page. I’ve only begun to play with this so I’m not ready to “cry uncle” just yet.

    Again, thanks for this plugin. I fussed with no less than 6 different plugins before finding yours last night. None are as easy to tweak for Custom Post Types and Custom Fields as yours seems to be. My only concern is that an upgrade will wipe out my work because I’m actually changing code in the plugin itself, like the mPDF configuration and now the image for the print submit request. Should I be moving these files into another folder so they are preserved when you update the plugin?

    Thanks, in advance, for your support.

    https://wordpress.org/plugins/wp-mpdf/

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author fkrauthan

    (@fkrauthan)

    10 years, 2 months ago

    If you wanna extend the configuration system for the plugin itself feel free to create a pull request on github https://github.com/fkrauthan/wp-mpdf/

    I am really busy at the moment but I may have time to look into some of your points in two weeks.

    Thread Starter Marj Wyatt

    (@marjwyatt)

    10 years, 2 months ago

    I’m not sure what you’re suggesting when you say to create a pull request.

    I have spent solved the white space above the header text with inline styles in my custom template. I do not have the logo image in the header yet so, if you could look at that, it would be great.

    The solution for my custom image on the pdf button is hardcoded into your plugin. That’s okay for now but, at the next upgrade, I’m sure it will fail so I/we need to figure out a better way to solve this problem.

    I’m okay with waiting a couple weeks. I can move forward with the hack that I have in place, for now.

    Plugin Author fkrauthan

    (@fkrauthan)

    10 years ago

    With version 3.2 there is this change coming:

    The mpdf_pdfbutton function signature: function mpdf_pdfbutton($opennewtab=false, $buttontext = '', $logintext = 'Login!', $print_button = true, $nofollow = false, $options = array())

    The options array supports ‘pdf_lock_image’ => ‘/my/image/path/relative/to/wordpress/route’ and ‘pdf_image’ => ‘/my/image/path/relative/to/wordpress/route’ to overwrite which icon should be used.

    Thread Starter Marj Wyatt

    (@marjwyatt)

    10 years ago

    @fkrauthan,

    As expected, my solution for the custom pdf print button failed with the upgrade.

    This is the code I changed to display their desired button before:

    //Print the button
    // Modified to use WSG Image
	if(empty($buttontext))
		//$buttontext = '<img src="' . get_bloginfo('wpurl') . '/wp-content/plugins/wp-mpdf/pdf.png" alt="'.__('This page as PDF', 'wp-mpdf').'" border="0" />';
		$buttontext = '<img src="' . get_bloginfo('wpurl') . '/wp-content/themes/wsg/images/wsg-print-pdf.png" alt="'.__('This page as PDF', 'wp-mpdf').'" border="0" />';

    I can’t see how the function with it’s filters will work with version 3.2 so I hardcoded the $image path again. The section of code you referenced above does not declare pdf.png as the image.

    This is the code I’ve changed. 

    //Print the button
	if(empty($buttontext)) {
		//$image = '/wp-content/plugins/wp-mpdf/pdf.png'; // original code
        $image = '/wp-content/themes/wsg/images/wsg-print-pdf.png';
		if(isset($options['pdf_image'])) {
			$image = $options['pdf_image'];
		}

		$buttontext = '<img src="' . get_bloginfo('wpurl') . $image . '" alt="'.__('This page as PDF', 'wp-mpdf').'" border="0" />';
	}

    Can you give me a hint as to how I can use the mpdf_pdfbutton function to override this in the child theme’s function for good?

    Thanks.

    Plugin Author fkrauthan

    (@fkrauthan)

    10 years ago

    As mentioned in my earlier post. In your template you call the function mpdf_pdfbutton. Just look at the new signature (The last parameter is new). So call it for example like that:

    mpdf_pdfbutton(true, ”, ‘Login!’, true, false, array(‘pdf_image’ => ‘/wp-content/themes/wsg/images/wsg-print-pdf.png’))

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Styling header and’ is closed to new replies.

Tags