The how to…
Load up Xara, and a blank document, or your Website. Generally I use two ways to insert a PDF. Either I drag and drop it into my site, in which you’ll receive the dialog box to the right.
This is asking if you want the PDF to be imported, so its editable within Xara, or if you want the PDF to be accessible to your site users through a link. Select Add Link, this will add the standard PDF placeholder symbol to your page like this: The second method is to highlight text and apply a link using the link properties box, Right click the highlighted text and select Web Properties >> Link Tab. This will not give you the option to have a Icon, so i will not continue with that method.
The next step is to design your PDF icon, now because everyone is a unique flower, and you will want your Icon to be part of your site, i can’t really explain how to make your design. So we’ll be working with one of the designs in the downloadable file, which is the recreation of the Xara PDF icon, but in much higher quality. So, design your icon, and group it as one group. Right click the group >> Web Properties >> Image Tab, and select the radio button “PNG (Best for Graphics)”.
This ensures Xara exports your design as a PNG. Now right click the group again and go to “Names…”, and apply the following name: filename=”pdfIconName”. Replace pdfIconName with what you want to name it (this is case sensitive), mine will export the PDF icon as “pdfIconName” and I already set it to export as a PNG, so my filename will be “pdfIconName.png”. Now position the icon itself, on another layer, or off the page, or behind another object, so it can’t be seen. This makes sure it isn’t visible to your users, but also it will definitely get exported.
Now that the Icon is there, your icon is designed and will be exported and published, it’s time to explain the icon. It’s a placeholder; this is a rectangle which is actually saving a spot for some Code. In this case the code is:
So where the code is grey and boring colour, you don’t need to worry about, it’s good to know, but you don’t need it for this article. The purple here is just giving you a bit of excess knowledge, you never know when you might need it. The red is what we’re changing. The red is the icon, it’s where the icon is on the internet, we simply put in the new icons address and your new icon is being shown! So the address will be, http://www.yourdomain.com/index_htm_files/yourIconsName.png .
So in this for this, the website is http://www.xaramarketplace.com/, and my Icons name was “pdfIconName” (this is case sensitive), and so my code, is changed from:
http://webdesigner.xara.com/pdficon_large.png to http://www.xaramarketplace.com/articles/index_htm_files/pdfIconName.png
Now, just press OK, apply and publish! You will not see the icon in website preview or page preview until you have published your whole site. Currently the icon is in the Xara file, when you publish your website, the icon is published, when you then preview your site in Xara, you will see the icon, but you must publish first, otherwise you’ll get a symbol missing resource symbol.
You’re done! Now view your site and your updated PDF Icon!