Creating a Custom Print Template in HTML/CSS/Javascript

JavaScript
1

I’m looking to add custom functionality to my website. My site runs in the Hugo static site generator. I would ask the question on the community forms of Hugo, but this is more of a HTML/CSS/Javascript thing. With Hugo its very easy to author content pages with markdown. Hugo translates my content authored in markdown into HTML/CSS. This makes it very easy to write content and publish it on my website. In addition I create newsletters for my customers every so often and have been doing this all in HTML outside of Hugo because I want email them to my customers and its easier to do this way. But as a write more and more newsletters the html markup is getting in the way and I want to embed my html/css code into a hugo tempate so I can create news letters using the markup engine. But this presents a problem with generating the newsletter content for emails because the HTML and CSS code needs to be different from my website.

I would like to have a specific style for the email version of these newsletters. I was thinking about using a Javascript button on each news letter that when pressed would show a new window with the content, using differnt html/css styles, that makes the page email friendly as described here that I could just copy and paste into an email. I was wondering if anyone has any experience with this and could get me started in the right direction. Im pretty good with HTML/CSS, but I don’t really know JS that much.

2

Is this topic relevant to these forms? Any suggestions?

3

I’ve never worked with Hugo, but I’ll take a shot at this one :slight_smile:

What you could do is, setup a CSS script that styles you email as you like, and when you press the button that you described, it adds the CSS script to the page.
You would need a button on screen

You would need a JS script with some code that is run when the button is clicked.
You need to add all the code below to the JS script, and add the JS script to the head of your html file.
You also need jQuery.
Well, I’ve written the below using the jQuery library.
You can find plain old JS equivalents of all of the below:

// will call the loader() function once the page has finished loading
jQuery(document).ready(function($){loader();});

// loader function
// runs once page has loaded
// adds click event to the button with id btnClickMe
function loader()
{
$(‘#btnClickMe’).click(catchClick);
}

// is called when the button is clicked
// this function will add the css script to the html page
// make sure the href is correct
function catchClick()
{
var head = document.getElementsByTagName(‘head’)[0];
var link = document.createElement(‘link’);
link.id = cssId;
link.rel = ‘stylesheet’;
link.type = ‘text/css’;
link.href = ‘/link/to/you/stylesheet.css’;
link.media = ‘all’;
head.appendChild(link);
}

I haven’t tested this out, but it should be on the right track.

I hope this helps.

4

Thank you. Hugo has HTML templates that I can use to generate content from markdown files so I can easily implement this. Thank you for the information I will test it out in the coming weeks and see how it works.

5

Hi I am testing this script and Im not sure I am missing something. Could someone with javascript experience check to see if I am doing this right? I created a test.html file and included the script into the header. To test it I am trying to change the background from black to white. The code is below:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
      // loader function
      // runs once page has loaded
      // adds click event to the button with id btnClickMe
      function loader()
      {
      $(’#btnClickMe’).click(catchClick);
      }

      // is called when the button is clicked
      // this function will add the css script to the html page
      // make sure the href is correct
      function catchClick()
      {
      var head = document.getElementsByTagName(‘head’)[0];
      var link = document.createElement(‘link’);
      link.id = cssId;
      link.rel = ‘stylesheet’;
      link.type = ‘text/css’;
      link.href = ‘stylesheet.css’;
      link.media = ‘all’;
      head.appendChild(link);
      }
    </script>
    
    <style type="text/css">
      body {
        background-color: black;
      }
    </style>
    
</head>
<body>
  Test text
  
  <button id="btnClickMe" type="submit" form="form1" value="Submit">Submit</button>
</body>
</html>

The file stylesheet.css is in the same dir:

body {
  background-color: white;
}
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.