Extensis Logo SUPPORT | FORUMS | KNOWLEDGE BASE

Question about customizing "tablet" template


#1

Hi.

I am wanting to customize the Tablet template to better match our branding and incorporate some of the things we were using on our old template (a version of effervesance).

On each pane of the assistant I can view the source code for that specific page and make tweaks. EXCEPT the search details page, which happens to be the one i want to need to add some code to.

Is there something im missing? I click view source and the window is completely empty. Is there some other place i can get at the source?

thanks!

a


#2

Hi,

You’re best to contact technical support as I see the code when I click to view it as I go through the NetPublish Assistant, but I’ve only tested on my Mac install.

Having said that though, if I was going to customise a template, I would probably do it outside of the Assistant myself as that would allow me to use various other tools to code and test, which seems easier to me. If you launch the Assistant, proceed to the template selection page, you can then right click on any template to ‘Duplicate site’ and that will save a copy of the template with default settings to your own hard drive (usually in your ‘Documents’ folder). Alternatively you can use the Assistant to choose the various options you want then ‘save a copy’ of the template on the ‘Publish’ page to get a template with your chosen amendments, rather than an unmodified default.

The ‘npt’ template files and other things such as media resources (logos, buttons) and CSS can then all be edited using whatever web editing tools you care to use, to create your own template.


#3

From long-standing experience with NP, I’d suggest customisation of the actual source - beyond the point’n’click options in the NP Assistant - is best done outside NPA. Since ‘Tablet’ is a built-in set the the source files are well hidden from the user. Therefore, start by making a copy of the set (go to the NPA publish page and use the ‘save a copy’ feature to make a new custom set. The name you give the set is the name of the stored folder and the NP site name of the new set. On Mac servers the name is case-sensitive and I suggest you avoid spaces and non basic ASCII characters in the name.

Your new custom master template set will be saved to PC/Mac with the Desktop client you’re using with NPA and stored the files in ~/Document/Portfolio/… or C:\My Documents\Extensis… Drill down from there -> NetPublish -> User Data -> sites -> web to the folder named as per your new set. In there, the template NPT files are in ‘Pages’ within which are the 4 page types. Each contains one or more style variations (IIRC atypically Tablet actually only has one choice) within which are one or more ‘.npt’ templates. The search page template is always called ‘search.npt’. You can open this in your code editor.

NPT code is nested in ]] tags, and is JavaScript. This code is run and disappears as part of the NP publishing process. NP server-side code (also JavaScript) is in <% %> tags.

More so in Tablet than other sets, some of the page’s code is actually drawn from other source files so whilst customising it helps to use a decent (non-WYSIWYG) code editor so you can basically have concurrent access to all the sites files. It makes it much easier to figure out what code comes from where.


#4

thanks for the info.

I am still a little perplexed as to how it is saving files here and there…like why in one folder there will be a css but it is calling a sheet in another folder (called the same thing) saved elsewhere. Perhaps it is an idiosyncracy of how our machine was originally set up and where things are pointing.

off to play and definitely get rid of that orange background!!


#5

Part of the complexity stems from hacking in the support for touch interface; that stuff’s fairly complex and the libraries aren’t for casual fiddling. As you’ve found some stuff is hidden deep away in CSS files - the click action on the home page’s thumbnails is a via jQuery call on a particular CSS style.

In the end I did as I’ve done in the past with older sets and done a file-by-file scrub for JS code errors an non-validating HTML, so that the output looks like the in-box version minus any glitches (Tablet on IE has problems with the detail page nav bar positioning and slideshow control code IIRC). Such a ‘clean’ is a chore (days, not hours, of work) but the result is cleaner than the in-box version and a much more stable baseline from which to customise. So if you’re doing more than few tweaks it’s worth considering starting from a cleaned base.


#6

ok now that i have played a bit and cant seem to get the changes to stick.

btw. I am far more used to working on mac, but am working on a pc, and am a designer before a coder so bear with me!! I have another person on call to help with complicated coding but i should be able to handle the simple style changes and adding some custom code to the landing page.

So back to the beginning…
Dumb question…

I have saved a copy of the site. I have pointed it to a different subfolder (in the last pane of the assistant).
So i have two folders.

  1. the “copy of tablet” (we’ll call it copyoftablet )in mydocuments\extensis\portfolio\netpublish\user data\sites\web\
  2. the subfolder (we’ll call it tablettwo) i made in program files\Extensis\NetPublish\Webroot\sites\

I want to change and test this thing outside the assistant as you guys suggested.

What files do i change and how can i test it without going back in and republishing???
If i change the search.npt in “copyoftablet” the changes are only visible if i go through the assistant and hit publish.
and then they dont always stick. I cant simply view that in a browser cause it isnt an actual .html file.

If i want to change the css, I go the the “tablettwo” folder and change the style.css in there…then changes occur on refresh. But if i hit republish, they invariably disappear, because of course it is pulling from a different style sheet at the time of publishing.

I know there must be a way to get this thing working but i cant for the life of me figure it out! Am i simply changing the wrong files?

thanks so much for your patience.

a


#7

Whilst you can edit templates, etc., of published NP sites to test changes, I urge strongly that you only do so for basic testing. For planned customisation of a long-term site experience suggests it’s a much better plan to make changes in a master set and re-publish. Clients of mine who haven’t do this have invariably got caught out down the line having deleted the NP site data forgetting it was the only customised version and finding their back-ups weren’t as good as they thought. So, best practice - make a custom master that holds your changes.

OK, if you saved the new custom master template set as “copy of Tablet” this name gets used in 3 places:

  • as the name of the OS folder used to store the template

  • the on-screen name of the set in the NPA’s set chooser pane

  • as the default site folder name when publishing from the set

You want to change the last of the above to be “tablettwo”. Do either of:

  • Open NPA, select the custom set, click ‘Publish’ to skip to the last pane, edit the “Sub-folder” box to “tablettwo”, click the 'Save button on the same pane and close NPA.

  • Go the the master template set files and open index.xml in a text editor. Scroll to find the line “ServerSubFolder” followed by a line “”. Type the value ‘tablettwo’ (without quotes) between the latter string tags and save the file.

Do either and now, by default, when NPA publishing using set “copy of Tablet” the output will write to/overwrite the NP site folder ‘tablettwo’.

Get that working before trying anything else. :smiley:


#8

Hi Mark!

Another question.

I have done the customizations, they are all working great, thanks to alot of fiddling. The audience is pretty happy with it and if all goes well we want to roll out this template (with minor variations) to the other netpublish sites we use.

If i want to transfer these changes to the master template as you suggested, what files exactly do i need to switch out, or copy code from one doc to another??

Sorry i am still finding the structure of how it all slots together a wee bit confusing!!

Thank you so much for your help!

a


#9

If going from live templates to masters, it’s not quite that simple. For any pages that are ‘.np’ extension in the master, simply copy the live version to the master. For pages where the master has a ‘.npt’ ext and the live file a ‘.np’ extension you need to reconcile where the ‘.np’ code comes from and replace files accordingly. It’s mainly attention to detail rather than actual difficulty - don’t assign the task to a tl;dr type person.