Creation of templates for Knews. Step by step tutorial for creating Newsletter templates for the Wordpress Knews plug-in

Transcription

1 Creation of templates for Knews Step by step tutorial for creating Newsletter templates for the Wordpress Knews plug-in Document available in: English Spanish Catalan URL of the plug-in, documentation and support: Document version: 1.0 Date of document:

2 CREATION OF TEMPLATES FOR KNEWS 2 Summary 1. Introduction Roadmap Possibilities Necessary structure General advice for layout Step by step Creation of the Sweet Barcelona template Downloading material Structure of directories The info.xml file Thumbnail of the template and modules Conversion of HTML to template Dividing the newsletter into 4 differentiated zones Marking the start and end of the different modules Making the appropriate code for the editor Making the images editable Making the text editable Extracting the content from posts Defining the global colours Defining the global fonts Defining the local colours and fonts Special links... 18

3 CREATION OF TEMPLATES FOR KNEWS 3 1. Introduction Any design can be implemented as a template with Knews, and any model can easily be turned into a template. With the information in this manual, you will be able to create a Knews template from scratch, beginning with a newsletter already designed in HTML or duplicate a Knews template and personalise it by making changes. The Knews templates are newsletters in normal HTML, with a series of parameters added, some as categories, and others as comments inside the html. With these parameters, Knews Editor will know which parts are editable and which not, which colours can be personalised, etc. The result is an html that is perfectly visible in any browser, valid to 3WC standards and editable in any HTML editor Roadmap Firstly we will comment on the possibilities offered by the Knews modular template system; they will largely condition how the templates are designed and laid out. Secondly, we will comment on which specific needs Knews Editor has in terms of HTML format (which are very few). After, we will review the basic rules for designing newsletters and s (so that all mail and webmail programmes can be seen well). Finally, we will do the conversion of the normal Sweet Barcelona HTML layout to the Knews template, step by step Possibilities - There are styles and editable colours for the user in the templates. The styles comprise of typography, text size, CSS text size and CSS line spacing. The colours can be used as background and color text at the same time. - The styles and colours can be local and global. Local means that they will only vary where the user changes them. Global, on the other hand, will change everywhere at the same time when the user edits them.

4 CREATION OF TEMPLATES FOR KNEWS 4 - Fixed contents can be created (like the heading of the newsletter) and modular contents. The modules can be placed once, various times or not at all in the newsletter, its size increasing as the contents that are to be communicated grow. - The fixed contents can have editable images, editable texts and global styles, but not local styles. - The modules can have editable images, editable texts, global and local styles, and can also offer the user the possibility of extracting their content automatically from a post or page. - The templates can have one or various zones to receive modules, and in this case, can define different types of zone, and assign the modules to certain zones. For example: if we design a newsletter with a wide column and a narrow column, we can create some modules for the wide column and others for the narrow column Necessary structure - Each module has to be a complete table, it can have more tables inside and any other element, but obligatorily has to begin with <table> and has to finish with </table> - The modules can only be inserted in containers. There has to be at least one if we want the template to have editable modules. Each container will have to be a table, with a single cell to contain each module. So, if for example we want a template with a structure of two columns of modules, we are compelled to create a first table with two cells, one for each column, inside each cell, a second table that will be the container of modules, and inside these inner tables, we will be able to lodge a module inside each one. The editor creates cells inside the containers as the user goes adding modules, so no empty cells have to be created. And that s it... easy, no?

5 CREATION OF TEMPLATES FOR KNEWS 5 2. General advice for layout The advice or guidelines explained in this section, fruit of our professional experience, are not limited to the creation of templates for Knews, but are applicable in general to all s. They are equally completely valid in the building of templates for Knews. Do the layout sectioning the contents in tables, making them as simple as possible. It is better to do various tables some inside others than try to contain everything in only one very complicated table. Size the cells placing images to act as spacers. In the horizontal distribution of spaces, place all the spacers in one same row, with the total sum of these spacers being the same as the width of the table. This row does not have to have colspan in any cell. In the vertical spacers (if they are necessary), do not put any rowspan in the cells containing them. The images cannot be distorted, they will have to have the same width and height in pixels as their width and height attributes. The old technique of using a 1x1 pixel spacer fails in some versions of Microsoft Outlook, which takes into account the size of the images and ignores width and height. The images have to be placed as <img>, never as background, and give them an alternative text if they are part of the message, or alt="" if they do not form part of the message. This prevents combining text on image, and the text will always have to be put on a background of plain colour, or be turned into image. Note: Some designers use images as a background, expecting many users not to see them, so they make a design that will be attractive with or without these images. Do the lay out properly, closing all the tags. We recommend the Firefox HTML Validator extension: (and configure it as a serial process) Take into account that many mail readers do not initially load the images. Therefore a good part of the message has to be in text, not in image, and it is necessary to put alt content into the images. Advice: Rename the images folder to check in a browser how the looks without images. Anti-spam filters. Avoid over-large text - it may be considered spam, and overlarge images (for example, split images bigger than 350 pixels into two) Some mail readers ignore the CSSs. It is therefore best to first do the lay out with <font face="xxx" size="yyy"> and after checking the browsers, add CSS styles if we want to modify the size of text or line spacing a little for design criteria. Never make CSS indispensable for the correct visualisation of the lay out.

6 CREATION OF TEMPLATES FOR KNEWS 6 Put tags <p style="margin:0px; padding:0px"> in all the texts. Put <img style="display:block" in all the images Put the colours in #RRGGBB format, never in abbreviated #rgb format or (r, g, b). Do not put CSS attributes unless it cannot be put another way. That way correct visualisation is ensured in all places, use bgcolor in the <td> and <table>, color in the <font> and in the <a>.

7 CREATION OF TEMPLATES FOR KNEWS 7 3. Step by step creation of the Sweet Barcelona template 3.1. Downloading material You can download the necessary material to follow the course here: inside you will find the HTML laid out normally, the template already built and some JPGs where the areas which have to be prepared are marked (columns, modules, editable zones, etc.) You can also download the PSD (Adobe Photoshop document) here: Note: with the JPGs you have sufficient material to follow the tutorial, it is not necessary to open the PSD to understand it Structure of directories The template has to be contained in a directory (e.g. sweet_bcn ). Inside there have to be two directories: images (The images the newsletter uses) modules (Thumbnail images of the modules that the newsletter will have). And 3 files: template.html (All the template code) info.xml (Information about the template) thumbnail.jpg (The template thumbnail)

8 CREATION OF TEMPLATES FOR KNEWS The info.xml file The XML file gives certain information about the template; this is the structure: <?xml version="1.0" encoding="iso "?> <template> <shortname>sweet Barcelona</shortname> <fullname>old and beautiful city</fullname> <url> <date>29/02/2012</date> <author>carles Reverter</author> <urlauthor> <minver>1.0.0</minver> <onlypro>no</onlypro> <description>an elegant, classic, double column newsletter, 100% colour and font configurable.</description> </template> The fields marked in bold can be modified, the rest remain reserved for future versions of Knews Thumbnails of the template and modules The template folder must have one JPG that will serve to illustrate the template. It has to be 150 x 200 pixels. In the folder /modules, there must be one JPG as a thumbnail for each module, size 220 x 90 pixels, the names have to be: module_1.jpg, module_2.jpg... module_n.jpg 3.5. Conversion of the HTML to template We have structured this part of the tutorial introducing different.html documents with step by step changes. We recommend downloading Winmerge, a free application that compares files and shows the changes made in a very simple manner. You can download it here:

9 CREATION OF TEMPLATES FOR KNEWS 9 Here you can see how Winmerge easily helps to find the changes: Dividing the newsletter into 4 differentiated zones HEADER : This zone will be fixed in the newsletter; we therefore do not have to indicate it in any way. LEFT COLUMN and RIGHT COLUMN : These zones can contain the narrow modules; we will therefore label them as a Zone 1 FOOTER : This zone can contain the wide modules, and we will label it as a Zone 2

10 CREATION OF TEMPLATES FOR KNEWS 10 To see these changes, compare (open) with Winmerge the tutorial_0.html and tutorial_1.html files We have marked the two columns as zone 1 containers, so the narrow modules serve for the two columns, and the wide container as zone 2, adding the following classes: class="container_zone_1" / class="container_zone_1" / class="container_zone_2" Marking the start and end of the different modules To see these changes, open the tutorial_1.html and tutorial_2.html files with Winmerge: We will number the modules from 1 to 6, marking where they start and where they end with a comment: <!--[start module 1]--> / <!--[end module 1]-->... <!--[start module 6]--> / <!--[end module 6]-->...And we will assign them to one of the two zones: 1 (left and right column) and 2 (total width), adding a class to each module: class="zone_1" / class="zone_2"

11 CREATION OF TEMPLATES FOR KNEWS Making the appropriate code for the editor Now, let s imagine how the HTML code will result when the editor loads the template for the first time: the editor will pick the modules and take them out of the body of the newsletter, with the <tr><td> (module) </td></tr> that the modules contain remaining empty... therefore, we have to mark them: To see these changes, open the tutorial_2.html and tutorial_3.html files with Winmerge: The first module container of each zone will be special, and will remain as a receptor of modules (modules 1, 3 and 5): <!--[open_insertion_container_start]--><tr class="droppable_empty"><td><!-- [close_insertion_container_start]--> (module) <!--[open_insertion_container_end]--></td></tr><!-- [close_insertion_container_end]--> And the rest (modules 2, 4 and 6): <!--[open_ignore_code]--><tr><td><!--[close_ignore_code]--> (module) <!--[open_ignore_code]--></td></tr><!--[close_ignore_code]--> We will insert a span in each module, where the editor will situate the move and delete module icons: <span class="handler"></span> From now on, we can already test the template: 1. Open the FTP and go to the directory: /wp-content/plugins/knews/templates/sweet_bcn/ 2. Erase the template.html file, upload the tutorial_3.html and rename it as template.html

12 CREATION OF TEMPLATES FOR KNEWS Go to wordpress admin, to knews>newsletters and make a new newsletter, choosing the Sweet Bcn template Now you will see that you can already include modules, delete them and reorder them, but we still cannot edit the content... Important note: To be able to test the changes we have made to a template, we will always have to create a new newsletter, so that once we have created a newsletter, the changes to the template do not affect it. You can check all the files from tutorial_3.html on, in the same way if you wish to Making the images editable Now we will make the images editable, we can see the changes comparing the tutorial_3.html and tutorial_4.html files with Winmerge: class="editable" Note: in our case, we will make them all editable, but if you are making a corporate template, perhaps you will want to leave some images as non-editable:

13 CREATION OF TEMPLATES FOR KNEWS Making the text editable Now we will make all the sections editable, we can see the changes comparing the tutorial_4.html and tutorial_5.html files with Winmerge, we will add: <!--[start_editable_content]--> (the part we want to make editable) <!--[end_editable_content]--> Note: in our case, we will make all the texts editable, but you may want to leave texts as non-editable. You have to take into account that it is always necessary to completely surround the html tags, for example: <p><!--[start_editable_content]-->hello world<! [end_editable_content]--></p>... is correct, but we will not be able to edit the justification of the text <!--[start_editable_content]--><p>hello world</p> <!--[end_editable_content]-->... is correct and we will be able to edit the justification of the text <!--[start_editable_content]--><p>hello world <!--[end_editable_content]--> </p>... is incorrect!!! Extracting content from the posts We can make the newsletters get their content from the posts/pages of Wordpress, avoiding entering the information twice and achieving an automatic link between the newsletter and the post of the web/blog. To see these changes, open the tutorial_5.html and tutorial_6.html files with Winmerge: We will have to change the text for: %the_title_1% / %the_excerpt_1% / %the_permalink_1%

14 CREATION OF TEMPLATES FOR KNEWS 14 Why do they finish in _1? Because a module can be receptor of more than one post, in this case, we will number these labels _2, _3 etc. to differentiate them (In the Clean Blue template there is an example) In the same way as we put before <span handler></span>, we will put: <span class="chooser"></span> The editor will put the selectors in the chooser to choose between free text and select post Defining the global colours The global colours are inspired by the style pages. The user can change them all at once. This gives harmony of appearance to the newsletter, and saves the user work. We will number the global colours, in our case: 1, 2 and 3. In each tag where we put the colour, we will add a class linking it to the global colour, for example, the can t read link: <a href="#" style="colour:#bc0000;" class="global_colour_1 _caption_link_colors">here</a> If we had wanted to associate it to global colour 2, we would have simply put global_colour_2.

15 CREATION OF TEMPLATES FOR KNEWS 15 Note: the global colours can be colours and backgrounds at the same time, in which case the name will be: global_colour_bg_1 / global_colour_bg_2 / global_colour_bg_3. Later we will see an example. In the same class, we will put a title to help the user, codified in the following manner: _caption_ + [the_name_putting_the_spaces_as_underscores] To see the first global colour, open the tutorial_6.html and tutorial_7.html files with Winmerge. To see the second and third global colours applied, open the tutorial_7.html and tutorial_8.html files with Winmerge Defining the global fonts The global fonts work in exactly the same as the global colours, they have as values: - The font - The size - The CSS size (optional) - The CSS line spacing (optional)... And they take them from the tag where the class is

16 CREATION OF TEMPLATES FOR KNEWS 16 The only difference is the nomenclature; we will do 2 global fonts: class="global_font_1 _fcaption_title_fonts" class="global_font_2 _fcaption_article_fonts" To see the global fonts applied, open the tutorial_8.html and tutorial_9.html files with Winmerge Defining the local colours and fonts The local colours and fonts work in exactly the same way as the global ones, with the difference that they are assigned to a single module. This means that they cannot be assigned to any content outside the module. The names change, instead of starting with global_ they begin with local_, and for each module they begin numbering with 1: class="local_colour_1 _caption_text_color Important: if we do not number correctly, the editor will not find them To see the local colours and fonts applied, open the tutorial_9.html and tutorial_10.html files with Winmerge.

17 CREATION OF TEMPLATES FOR KNEWS 17 Here we have an example of colour as background: class="local_colour_bg_2 _caption_background_color" Special links There are two types of special link: %cant_read_href% %unsubscribe_href% Knews will replace them by the correct values in the mailing lists, you can see them applied comparing the tutorial_10.html and template.html # End of document #