Creating your MyCouncil page

Pre-requisites

Access to the Windows PC where iShare has been installed.

Steps to creating your MyCouncil page

• Using an Internet browser view a typical page on the council's website - one that shows the typical Header & Footer sections that are common to all council web pages.
• Save the web page as D:\Astun\iShare\n.n\Webapps\Web\Custom\<my_example_council>.html.
• Edit the saved html page in a text editor such as Notepad++.
• Back to the browser, identify the Header and Footer sections. To do this in Google Chrome right-click on the web page and inspect any element. Then use the developer tools that appear to inspect the html. Chrome will highlight the relevant element in the web page making identification easy.
• In the text editor replace all html that sits below the Header and above the Footer with;

 ##Page.iShare##

• Copy the entire custom.example folder e.g. D:\Astun\iShare\n.n\WebApps\Web\custom.example, to a new folder called custom. Now you can customise the style sheets, plugins etc. to match your website.
• Add the following CSS files to the Header section:

<!-- iShareMaps CSS -->
	<link rel="stylesheet" type="text/css" href="custom/css/atMyPages.css" />
	<link rel="stylesheet" type="text/css" href="custom/css/atPrint.css"  media="print"/>
	<!--[if lt IE 9]>
		<link href="custom/css/atMyPages-ie8.css" type=text/css rel=stylesheet />
	<![endif]-->
    <!--[if lt IE 8]>
        <link href="custom/css/atMyPages-ie7.css" type=text/css rel=stylesheet />
    <![endif]-->
    <!--[if lt IE 7]>
        <link href="custom/css/atMyPages-ie6.css" type="text/css" rel="stylesheet" />
    <![endif]-->
    <!--[if lt IE 6]>
        <link href="custom/css/atMyPages-ie55.css" type="text/css" rel="stylesheet" />
    <![endif]-->
    <script src="js/atWrapperUtils.js" type="text/javascript"></script>
		<script type="text/javascript">
        	Astun.JS.WrapperUtils.CSSLink('custom/css/atMyPages-js.css', {xhtml: false } );
         	Astun.JS.WrapperUtils.CSSLink('custom/css/iShareCommon.css', {xhtml: false } );
      	</script>
 
	<!-- Including CSS files -->
   		<!-- Core jQuery CSS -->
         	<script type="text/javascript">
             	Astun.JS.WrapperUtils.CSSLink('css/jQuery/jquery.core.css', {xhtml: false } );
         	</script>
   		<!-- End of core jQuery CSS -->   
   		<!-- CSS For jQuery autocomplete -->
      		<link href="css/jQuery/jquery.autocomplete.css" type="text/css" rel="stylesheet" />
   		<!--  End of CSS for jQuery autocomplete -->
 
  	 	<!-- jQuery CSS theme -->
      		<link href="css/jQuery/astun/ui.all.css" type="text/css" rel="stylesheet" />
   		<!-- End jQuery CSS theme -->
	<!-- End of including CSS files -->
<!-- End of ishareMaps CSS -->

• Any URLs that exist in the Header and Footer sections must be absolute, not relative, in nature. Elements to consider are JavaScript sources, image sources and href hyperlinks. An explanation of relative URL paths can be found here: http://goo.gl/0isjY

For example, say our Header contains an image;

<img src=”./images/council-logo.png” alt=”logo”>

By right clicking on the image src in the developer tools you can copy the link address and replace the src in the text editor with;

<img src=”http://my_example_council.gov.uk/images/council-logo.png” alt=”logo”>

• Once all URL paths are absolute save the file.
• Copy the default page from:

<iShare installation folder>\Webapps\Web\atMyResponsiveCouncil.aspx - for Responsive iShare

or

<iShare installation folder>\Webapps\Web\atMyCouncil.aspx - for Basic iShare

to:

<iShare installation folder>\Webapps\Web\<my_example_council>.aspx.

• Edit <iShare installation folder>\Webapps\Web\<my_example_council>.aspx in your text editor.
• Edit the first and last lines of the file, replacing “_atAstunResponsiveTemplate.html” or “_atAstunTemplate.html”, for Responsive or Basic iShare respectively, with “custom/<my_example_council>.html” and Save.
• The <my_example_council>.aspx file is now ready to view in a web browser. Examine IIS and find the web path that equates to <iShare installation folder>\Webapps\Web\. Then inspect the page in a browser e.g.http://localhost/ishare5.4.web/<my_example_council>.aspx where 5.4 is the Version that you entered when you installed iShare.
• If styling corrections need to be made alter the relevant files in the custom folder and clear the iShare web cache by visiting http://localhost/ishare5.4.web/atVersion.aspx. You can then view the <my_example_council>.aspx page again with the style changes in place. 

<div id="cookieNotice">
			<p>By using this website you agree to our use of cookies as described in our cookie policy.</p>
			<p><button onClick="return hideCookieNotice();" name="atAcceptCookies" type="button">I agree</button> <a href="https://astuntech.atlassian.net/wiki/x/oQLaAg">Learn about our cookie policy</a></p>
		</div>

<% Response.Write(GetRemoteSingleTemplateFile("custom/index.html", true) ); %>
	<div id="atContainer">
		<script type="text/javascript">
			if (!window.astun) { window.astun = {}; }        
			if (!window.astun.settings) { window.astun.settings = {}; }
			window.astun.settings.addressSearch = {
				'showRecordsCount': true,
				'minChars': 3
			}
			window.astun.settings.mapOptions = {};
			window.astun.settings.mapOptions.showSearchResultsUnderMap = true;
			/*
				window.astun.settings.mapOptions.click = 'none'; // tooltip or none
				window.astun.settings.mapOptions.hover = 'none'; // tooltip or none
			*/