Use a Master File for Template Layout/Design in Sitefinity 4.0

I have a master template that contains hand coded HTML, JS, and CSS (that worked in 3.7) that I would like to use as the template for a Sitefinity 4.0 project but I cannot seem to figure out how to create a template and use that master file instead of dragging and dropping, painfully, a bunch of layout boxes and re-crafting all my existing code. Whereas I could drop my master in to the project from the file system on 3.7 it doesn't seem to find it, or all开发者_运维百科ow me to use it in 4.0

Specifically- I can't seem to get the paths to the JS and CSS files correct in the HTML. Firebug says that the server is returning a Forbidden and Not Found for certain files.

You can use your existing master page, however in 4.0, they don't automatically pickup as they do in 3.x. Instead you first create a design template, choose that master as the base. there should be an option for "choose your own master file".

here's a link to the documentation for this: http://www.sitefinity.com/4.0/documentation/Designers-Guide/creating-a-template/creating-a-template-using-master-pages.aspx

hope this was helpful!

Also, if you want to refer to a file in your /App_Data folder, be aware that you need to leave that folder out of the path

Example:

<script type="text/javascript" src="/Sitefinity/WebSiteTemplates/THEMENAME/App_Themes/SKINNAME/js/script.js"></script>

Same for pictures which are used in the .master file.

Hope this helps, too.

Sitefinity has a very specific file structure necessary for implementing custom templates that utilize a master page.

• Create the file structure described here.
• Once that is complete, be sure that your desired css is contained within the main.css/reset.css files within the Global directory, and upload your master page to the App_Master directory.
• With these files in place, you must register your CSS files as a Theme.
• Go to Administration > Settings, choose the advanced option, and select Appearance > Frontend Themes from the menu on the left.
• Add a new theme, and provide the path to the directory containing your theme (In the provided link, the image shows the file structure for a theme called MyGreenTheme.
  It's path would be: ~/App_Data/Sitefinity/WebsiteTemplates/MyTemplate/App_Themes/MyGreenTheme).
• Once that is done, go create a new template and browse to the App_Master directory to choose your master page. On the right side of the template editor, click Theme and choose your newly registered theme.

Images can be placed by

1. applying a background image to containers specified in your master page via css, or
2. by dropping them into placeholders from the designer backend.

If you choose to use the former rather than the latter, be sure that the image paths in your main.css and reset.css files are relative to those files. (e.g. background-image:url('../../Images/some_image.png';)
(See file structure image in the provided link for clarification)

As a side note, I have found that files added via visual studio are not picked up by Sitefinity, they must be added through the backend by going to Administration > File Structure. Once added through the backend, any changes made those files should be picked up after a page refresh.

Also, I have not yet attempted to include any Javascript/JQuery code in Sitefinity, but my assumption is that the process would be similar.

Cheers!