How to use a master template file with hand coded HTML - Front- & Back-End Development - Front- & Back-End Development - Progress Community
 Front- & Back-End Development

How to use a master template file with hand coded HTML

  • How to use a master template file with hand coded HTML
  • I have a master template file with hand coded HTML that I want to use on my Sitefinity 4.0 project. The problem is the designer's guide only tells me where to place CSS and says nothing about where to put HTML. The template I created worked perfectly in 3.7 but I have no idea how to use it with 4.0
  • Hello Mustafa,

    The HTML could remain in the .master file or you can move it to a widget/control

    All the best,
    Ivan Dimitrov
    the Telerik team
  • When I link external CSS and JS files in the .MASTER Firebug says that the CSS files are 403 Forbidden and the JS files are 404 Not Found. It seems like I figured out how to get a master template uploaded, but I cannot figure out the directory structure- even after setting up the directory structure like the designer's guide says to set it up.
  • Hey Mustafa,

    It sounds like the URLs in your markup point to the wrong location.  But in SF4 there are controls under "Scripts and Styles" for adding external JS and CSS files.  It's much nicer since you can manage it from your template instead of having to edit the markup.

    Don't worry if you put the controls in place holders within the body - the CSS one will always render in the <head>, and the JS one will ask you where in the markup you want the Javascript to appear.
  • I found the solution. Following the designer's guide, I did add the CSS and JS files through the scripts widget, but I had placed the files in the protected App_Master sub folder so IIS refused to serve them for security purposes. Once I changed where the files were located in the project structure all was well.
  • I'm actually having the same problem as well. Can I then put two content places holders for JS and CSS and then use the widget to link them or is best that I stay with them embedded on the page? 

    Also I want to use a theme I created but have it use a custom master page as well. I find it a bit difficult to do esp with my previous issue of the JS and CSS file. I registered the theme in the Advanced section but I want that theme to use the specific CSS and JS files.
  • Jess,

    You have to use a very specific folder structure for making custom website templates - the designer guide describes it.  I'll assume you're registered your theme and put your assets for them in the folders the designer guide mentions.

    Put all of your master pages in the appropriate folder, then add them as page templates in Sitefinity from Design -> Page Templates.  After you've added them, edit each page template.  On the far right there's a Theme button which lets you tell Sitefinity to use your theme for that page template (every theme that's been registered is in the dropdown).

    For CSS:
    Any CSS file you put in the Global folder of your theme will automatically be added when that page template renders.  If you have CSS files that don't apply to all the page templates, put those in the CSS folder instead and use the widget to link to those.

    For JS:
    You'll need to use the JS widget on each of your page templates to link to your JS files.

    This is how I've set up my page templates and it's working fine.  You only need one place holder for the CSS / JS widgets, and it can be anywhere in the master page.  Hope this helps!