Site Builder for Play- Cricket 2 A guide for administrators 10 February 2016
Contents Changing the look of the site... 3 The Site Builder... 4 Introduction... 4 What is a widget?... 5 Widget placement... 6 Moving, re-sizing and deleting widgets... 7 The Site Builder menus... 8 Site menu... 10 Add Tagline... 12 Add background colour... 13 Add a header image... 16 Copy Templates... 19 Using Widgets... 21 Adding content to the Home page... 21 The HTML widget... 22 Adding links to your welcome message... 23 Creating a link to an external site... 25 Adding a link to a document in your site... 28 Adding images to the Home page... 29 Widget code from other sites - Twitter, Facebook, weather etc... 36 Twitter timeline... 38 Other external widgets... 42 The Navigation Bar... 43 Sub-Menus... 46 Changing the display settings for the Navigation Bar... 48 About Us widget... 50 Advertisement widget... 51 Statistics widgets... 56 How to add a page... 62 When things go wrong...... 64 Rogue widgets... 64 More than one Home page... 64 Unable to see widget... 65 If all else fails..... 65 Useful sites... 66 10 February 2016 Page 2 of 66
Changing the look of the site If you have been allocated administrator rights in play-cricket, you will have access to the administration pages by signing in, clicking on your name and selecting Site Administration from the drop down menu. The default menu items, which appear on the left-hand side of the Admin Home page, are dependent on your site type and administration rights. The illustration below is for a club site s main administrator. To make changes to your site s web pages, you need to visit Site Builder. 10 February 2016 Page 3 of 66
The Site Builder Introduction The play-cricket Site Builder is the place to visit when making changes to the site s content. When you select Site Builder, you will see a representation of your site s Home page by default. To leave Site Builder, click Exit Builder, in the top right corner, next to the red Logout button. Any changes that you made should appear on the page that was altered. This is a picture of the site that I am using to create this document: The page is made up of a number of widgets that can be moved around until you are happy with the layout. 10 February 2016 Page 4 of 66
What is a widget? A widget is an application, like the ones that you download to a smartphone or tablet device that enables a user to perform a function or access a service. In the play-cricket system, you will see that some widgets are pre-built e.g. About Us, Cricket Directory, Statistics etc. Other widgets such as Twitter feeds, a weather forecast, Facebook links etc. can also be placed on the play-cricket site. To do this, you would visit the relevant website, look for widget or feeds for your website, generate the code, then copy it into an HTML widget (illustrated below) from the Site Builder>Widgets drop down. 10 February 2016 Page 5 of 66
Widget placement Imagine that the Home page is divided into three columns, labelled Left, Center, and Right. You can set the initial placement of the widget by selecting the appropriate radio buttons for the width in columns and the position. Most of the widgets have Position and Dimension Settings, measured in pixels. If you have selected a Left, Center or Right position, the X-axis value at the bottom of the widget will be set for you. A default value 0f 300 pixels has been set for the Y-axis so that you can find the widget if you save it without setting a value yourself. If the co-ordinates are set at 0,0, the widget will be placed in the top left hand corner of the page, and may be hidden by the header image. For example, if your header image is 150 pixels high, add 40 pixels for the navigation bar plus 160 pixels for the title and your first widget may have a Y-axis figure of 350. The height and width of a widget may be adjusted when it has been saved so the default settings may be left as is. 10 February 2016 Page 6 of 66
Moving, re-sizing and deleting widgets As you move the cursor around the screen, you will notice elements get highlighted with a border, a black cross at the top centre and a red circle with a white cross at the top left. To move the widget to a different position, use the black cross to drag it into place (hold down left-click on your mouse or trackpad and move the mouse or finger). Double clicking on the black cross will open the widget for editing. To re-size a widget, place the cursor at one edge or at the bottom right hand corner of the widget (where there are three diagonal lines). The cursor will change its shape. Left click on the mouse or trackpad and you will be able to drag the frame in any direction. The text will move to fit the frame. To delete a widget, click on the white cross inside the red circle in the top left corner of the widget. Warning - if you remove an HTML widget that you have created yourself, the content will be lost so make sure that you have a copy of any text in a plain text file - use Notepad on a Windows PC (in Accessories) or TextEdit on a Mac (in Applications). 10 February 2016 Page 7 of 66
The Site Builder menus In this section, we will look at all of the things that are available in Site Builder. Click on Site to see a drop down menu of the available options. All of the items listed under Site apply to the whole site. You cannot apply the background colour (Add BG Colour) to a single page. Click on Widgets to view a list of widgets that may be selected for placement on any page. Some widgets appear within a group. The Statistics entry contains the widgets for the Team, Batting, Bowling and Fielding Statistics. 10 February 2016 Page 8 of 66
Click on Pages to see a list of pages that your site contains. The page that you are currently viewing appears in brackets. In the example below, I am viewing/editing the Home page. By moving the cursor down to Home, I can see the list of widgets on the Home page. They are listed in order of entry onto the page - the latest is on top. In my example, the Cricket Directory widget was the last one to be added. 10 February 2016 Page 9 of 66
Site menu Add Title Selecting this option brings up the Site Title Widget. Please don t use this widget for anything other than the Site Title. This is because the Site Title widget can be shown on every page of your site unless it has been suppressed (using edit page). Choose a position on the page for the title and then highlight the title before applying other formatting to it e.g. colour, font size, bold... If you wish, you can set the text against a coloured background. Click on the coloured square beside the Background Color field to bring up the colour picker. The Y-Axis position defaults to 260 pixels, which will normally put the title below the header image. 10 February 2016 Page 10 of 66
10 February 2016 Page 11 of 66
Add Tagline A tagline is a memorable catchphrase associated with a company e.g. Drinka Pinta Milka Day for the Milk Marketing Board in the 1950s. If your organisation doesn t have one, delete the widget. Don t try to use this widget for any other text because it is linked to the Site Title widget and may appear on every page of your site. You may also find that the lines of text are double-spaced - as if in draft mode. 10 February 2016 Page 12 of 66
Add background colour Selecting the Add BG Colour option allows you to change the colour of the page throughout your website. There is no option to select a different colour for individual pages. If you have any doubts about site colour, leave this option alone and change the colour of the navigation bar. Click inside the square box to bring up the colour picker. 10 February 2016 Page 13 of 66
Click on the vertical spectrum and you will see a double-headed cursor. Use this to slide up and down the spectrum bar until you get to the colour that you want. Inside the colour square, look for a small circle, click on it and move it around the square to adjust the colour brightness and saturation. If you get the colour wrong, you can remove it by setting the background colour field to blank, or by entering #ffffff. You can change the background colour at any time by repeating the exercise. 10 February 2016 Page 14 of 66
An alternative to using the colour picker is to go to this site http://www.color-hex.com, where you will find the hexadecimal codes for a vast array of colours. Select the colour and enter the code, including the # into the field and then click Save background Colour. Tips: Don t use very dark or fluorescent background colours - you want visitors to be able to read the content on your site easily. If you find the right shade that you might want to use elsewhere, make a note of the colour code so that you are consistent with your colours. 10 February 2016 Page 15 of 66
Add a header image From the Site drop down list, select Add Header Image to display the Header Image widget settings. The recommended size of the header image is 1170 x 150 pixels width x height. If the image is not the correct size, you may find that it interferes with the look of the Home page in Site Builder. To change the image size in Windows, copy it into an accessory called Paint and then resize it in pixels. You can also crop the image to get a better fit. To change the image size in a Mac environment, use Tools in Preview. Click Browse to find the required image from your computer. 10 February 2016 Page 16 of 66
Select the file and click Open. 10 February 2016 Page 17 of 66
Click Save Header Image and wait for it to load onto the background. 10 February 2016 Page 18 of 66
Copy Templates This is a last resort option - to be used only when you think that the Home page is irrecoverable and you need a sensible starting point. If you choose to go down this route, the whole site template will be reset and you will lose any widgets that you have created, not just those on the Home page. For example, if you added and advert widget on a fixture page, or had created a new page, these would be removed. Fixtures, Results, About Us information, News and Library articles are not affected. The template to choose is based on your site type. If you want to reset a club site, choose Black & White - Club. A warning message will appear to make sure that you really want to take this action. 10 February 2016 Page 19 of 66
Here is an example of the standard template s Home page: Note that if you can t see a Photo Gallery page, it will have to be created and the photo gallery widget added. See the section How to add a page. 10 February 2016 Page 20 of 66
Using Widgets Adding content to the Home page Click on Widgets in Site Builder and you will see the list of pre-built widgets available to you. You can choose to place any of the available widgets on your Home page. Some widgets have grouped into Library, matches and Statistics. To see more widgets in a group, click the arrowhead. 10 February 2016 Page 21 of 66
The HTML widget Ideally, the first item to put on to the Home page is a welcome message, which doesn t need to be very long. To do this, we select the HTML (general purpose) widget. The message would normally be one column wide and appear in the centre of the page. Copy the welcome message from a plain text file that you have saved on your computer and paste it into the text box. Do not copy the text from a Word document because the formatting codes will also be copied in and may interfere with editing that you do within the widget. Click Save Widget to see the message on the Home page. 10 February 2016 Page 22 of 66
Adding links to your welcome message Rather than expose your email address on the front page or display a web address, you can create links to them. To create an email link: 1. Highlight the text e.g. Club Secretary is highlighted for an email link. 2. Click on the link icon - it looks like a chain link. 3. Click on the mailto: icon. 4. Enter the email address in the box. 5. Click OK to create the link. 10 February 2016 Page 23 of 66
It is easy to see that the link has been created - the text is underlined. The public page text will look like this: 10 February 2016 Page 24 of 66
Creating a link to an external site The following steps will show you how to create a link to a league division table. 1. In the HTML widget, enter the text to identify the division link. 2. In a separate browser tab or window, open the table in the competition site. 3. Highlight and copy the URL from the competition site to your PC s clipboard. 10 February 2016 Page 25 of 66
Return to the HTML widget in Site Builder and highlight the text to be used for the link. 4. Click on the link icon. 5. Paste the URL into the box. 6. Tick the box to open the link in a new window if required, and click OK to save the link. 7. Save the widget. 10 February 2016 Page 26 of 66
The result looks like this: 10 February 2016 Page 27 of 66
Adding a link to a document in your site If you have added a document to your site (Admin>Information Board>Library) - club rules, constitution etc. why not put a link to it on your home page? You will need to know the URL of the document. To find this, open the document from the public side of the document library. The page will open in a new tab. Now highlight and copy the URL and paste it into the link address in the HTML widget as if you were creating a link to an external site. 10 February 2016 Page 28 of 66
Adding images to the Home page The best way to add a single image to a page is to upload it to the photo gallery and then use its web address (URL). Do not copy and paste images directly into the HTML widget box this will cause performance issues with your site which may not come to light until you have several images placed on your site s pages. Follow the steps below to get the photo s URL: 1. Open a new tab or window with another view of your site and you should be signed in already. 2. Now go to your public Photo Gallery OR go to Administration>Gallery>Manage Photos (illustrated below). 3. Find the photo that you want to use and click on it to get the full size view. 10 February 2016 Page 29 of 66
4. Now right click on the chosen photo and select Copy Image Location (Firefox), Copy Image Address (Safari), Copy Image URL (Chrome). See steps 5 and 6 for Internet Explorer 11 instructions. 10 February 2016 Page 30 of 66
5. To find the URL of a photo using Internet Explorer, right click on the image as before but select Properties. 10 February 2016 Page 31 of 66
6. Highlight the URL and copy it. 10 February 2016 Page 32 of 66
Having copied the photo s address to your PC s clipboard, return to Site Builder>Widgets and select the HTML widget. Click on the image icon. Paste the address from the clipboard into the Image Address box. Click Insert Image. 10 February 2016 Page 33 of 66
If you want to add text beneath the image, it needs to be in place before the image is inserted. After entering the text, move it down by inserting a couple of blank lines. Place the insertion point into an area above the line(s) of text before selecting the image icon. When the image has loaded into the widget, it will be too big to view. Its size on the web page will be determined by the width and height specified in the widget. In the screenshot below, the widget size will be 220 x 220 pixels. Save the widget and view its position and size on the Site Builder page. You can always make adjustments later. 10 February 2016 Page 34 of 66
This is the Home page view of my site, with the image added. 10 February 2016 Page 35 of 66
Widget code from other sites - Twitter, Facebook, weather etc Users who want to put Twitter feeds, links to Facebook pages or weather forecasts must visit the relevant site to do this. Do not copy the code from a non-official site since it may be out-dated information, which could interfere with the code that already works on your site. Facebook Like and Share Starting from https://developers.facebook.com/docs/plugins/like-button/ log in with your Facebook credentials. 1. Enter your site's url into the URL to Like box. 2. Set the width to 300. 3. Check the layout and action type are what you want. 4. Uncheck the show Friends' Faces. 6. Click Get Code. 10 February 2016 Page 36 of 66
7. Click on IFRAME. 8. Highlight all of the code in the box and copy it to the clipboard. 9. In Site Builder, open an HTML widget on the page that you want the icon to appear. 10. Click on the blue HTML icon. 11. Paste the code into the HTML widget. 12. Enter values into the X and Y axes. 13. Save the widget. 10 February 2016 Page 37 of 66
Twitter timeline If you have your own Twitter account, use the article from the Twitter.com site: https://support.twitter.com/groups/52-notifications/topics/211-tweeting/articles/20170071- how-to-embed-a-timeline If you want to upload a Twitter timeline from someone else s account, e.g. @ECB_cricket, then, starting from https://twitter.com/ 1. Log in and search for the account that you want to follow. 2. When you have found the correct account, click on the cog icon and select Embed this Profile. 10 February 2016 Page 38 of 66
The dialogue to Create a user widget should appear. 3. Make any changes to the configuration and click on Create widget. 10 February 2016 Page 39 of 66
The highlighted code for your Twitter feed will appear in a box. 4. Right click and Copy the highlighted code. (It s a good idea to paste it into a text file in case you need it again.) 5. In Site Builder, open an HTML widget on the page where you want the icon to appear. 6. Click on the blue HTML icon. 10 February 2016 Page 40 of 66
7. Paste the code into the HTML widget. 8. Enter values into the X and Y axes. 9. Enter a width of 250 pixels and a height of 600 pixels to set the initial size. 10. Save the widget. You should be able to re-position the widget by use of the four-arrow cursor. If you need to re-size the widget, it s best to delete it and enter the code again. Tip - if you see the Tweets by @xxxxx in the HTML box when you save the widget, refresh the page to see the Twitter timeline. If the box is blank, the code has been corrupted and you will have to paste it in again. 10 February 2016 Page 41 of 66
Other external widgets Weather widgets and site hit counters may be added to your site. In these cases you need to visit the relevant site (search for weather widgets etc using the internet) and copy the code for the widget into the HTML widget as you would for the Facebook and Twitter entries. For weather widgets, try http://www.netweather.tv/index.cgi?action=4web;sess=; or http://www.weathercast.co.uk/services/website-weather-widget.html 10 February 2016 Page 42 of 66
The Navigation Bar The navigation bar is usually found at the top of every page, above or below a header image. Its purpose is to guide visitors to different sections of your site, rather like a contents page. If the navigation bar is missing, having been removed by mistake, you can restore it by selecting it from the Widgets drop down list. As you add content to your site, if the pages haven t been disabled, they will appear on the Navigation Bar in the order of creation. You can change this order by editing the widget. In Site Builder, click anywhere on the Navigation Bar to call up its widget. 10 February 2016 Page 43 of 66
To change the display order of the content select the required page from the drop down list. To remove the last item from the navigation bar, select the blank entry. 10 February 2016 Page 44 of 66
Some of the Navigation Bar items have sub menus. e.g. the Statistics entry has Team Statistics, Batting Statistics etc. linked to it. The sub-menus will move with the associated items, so if you move the Statistics, there is no need to move all of the sub-menu items yourself. When all changes have been made, click on Save Navbar. 10 February 2016 Page 45 of 66
Sub-Menus There is room on the Navigation Bar for up to twelve items although in practice, six to eight items would be enough for most sites. Some pages might be grouped under a single tab by creating sub-menus. e.g. Calendar and Photo gallery might appear under Communities. Pages to appear in sub-menus should be disabled when created so that the title of the page doesn t automatically appear in the navigation bar. If this has not happened, then the page may be edited to disable it. To do this, select the page and open it. Then edit current page. 10 February 2016 Page 46 of 66
Tick the box to Disable page and click Save. If the page is not disabled, it may also appear in the navigation bar as a main menu item. In the example below, the Photo Gallery page is enabled but also appears in the Community sub-menu. Both Community and Photo Gallery are highlighted as active links. 10 February 2016 Page 47 of 66
Changing the display settings for the Navigation Bar To change the font style, font size or colours in the navigation bar, select the Display Settings tab. This is the ideal place to use your club s colours. Background Colour is the main colour of the navigation bar. The default background colour (#474646) is almost black. Link colour is the colour of the text - this should contrast sufficiently with the background colour so that the text is clearly read. The default link colour is white (#ffffff). Active link bg colour is the background colour of the active item on navigation bar. Find a colour that contrasts with the background colour so that the user can see which link is active. See the Add Background Colour section for colour picker instructions. X-Axis Position and Y-Axis Position setting both default to 0 so that the navigation bar appears at the top of the page. Leave the settings as they are and use the four-arrow 10 February 2016 Page 48 of 66
cursor to drag the navigation bar to a new position if required. Leave the X-Axis set to 0 to get a reference point for the left hand side of the page. 10 February 2016 Page 49 of 66
About Us widget This widget appears on the About Us page but can be tailored to show a sub set of the information to appear on the Home page if desired. The information is shown in tabbed format, each section appearing in its own tab. The example below shows that all of the sections are to be displayed. The resulting widget looks like this: 10 February 2016 Page 50 of 66
Advertisement widget This widget is used to place adverts that you have created using Ad Manager (using Ad Manager under Site Settings). Enter the Y-axis to set a position for the advert to appear. The X-axis will be assigned a number greater than zero if you have set a position of Center or Right. 10 February 2016 Page 51 of 66
10 February 2016 Page 52 of 66
Select the Advertisement Settings tab. Adverts created by a play-cricket sub site will appear in the Site Advertisements dropdown. Adverts created by the ECB for the main play-cricket site appear in the General Advertisements dropdown. You may use these adverts on your own site. Be aware that some adverts or offers may last for a limited amount of time. 10 February 2016 Page 53 of 66
Here is a sample advert that needs to be re-positioned and re-sized. 10 February 2016 Page 54 of 66
The final position of the re-sized advert is shown below. Take care not to overlap adverts. If the frame of one advert overlaps another, the link in the advert beneath may not work. 10 February 2016 Page 55 of 66
Statistics widgets There are four statistics widgets, which may be tailored to suit your requirements. Here, we will use the Batting Statistics widget for illustrative purposes. In the screen shot below, I have selected the Batting Statistics page and then clicked Open page. 10 February 2016 Page 56 of 66
Click anywhere on the Batting Stats widget to open it. The example on the following page illustrates the default settings for the Batting Statistics widget. In the Batting Stats widget, click on the Batting Statistics Settings tab and use the filters to select the values that you want displayed. Use Select All to select all of the values. Labels that are not ticked will not have a column displayed. 10 February 2016 Page 57 of 66
10 February 2016 Page 58 of 66
You can use the statistics widgets to create a display of the best batting, best bowling etc like the one below, to appear on your home page. The next page will show you how to do this. 10 February 2016 Page 59 of 66
This is an example of the batting widget, set to show the top 10 run scorers for 2013. 10 February 2016 Page 60 of 66
The Title, Season, Order by and Min. no of Innings Played fields have been changed. The year in the Comment field has been removed. Make sure that Filter Column is set to Off so that it looks neater. The Print Statistics option has also been set to Off. You may also set the X and Y axes, in the General widget settings tab before saving the widget. 10 February 2016 Page 61 of 66
How to add a page There will be occasions where you want to add a new page - perhaps for junior teams, fund raising events, club history etc. From the Pages drop down list, select Add page. Use the pop up box to complete details about the page. Page name: The title that you want to see on the page and in a menu. Suppress header image: If ticked, the header image will not appear at the top of the page. Suppress site title and tagline: If the site name and tagline appeared below the header image, by suppressing this, there will be more space on the page for content. Disable page: If a page is to appear as a sub-menu item, or it is a work in progress, tick this box in order that the page doesn t appear on the navigation bar (so it can t be selected). 10 February 2016 Page 62 of 66
The empty page below, New Pavilion, is now the current page. The site title and tagline were suppressed to stop the page looking cluttered when the detail is added. Now you can add content to this page as you did for the home page. Notice that the new page appears automatically as the last selection in the navigation bar and you can change its position by editing the navigation bar widget. Warning: Do not use the word Home in the Page name. The Home page is the landing page for visitors to your site and it cannot be removed. If you do this, you will have two Home pages and a site that doesn t work properly. If this has already happened, go to the When things go wrong section. 10 February 2016 Page 63 of 66
When things go wrong... Rogue widgets Below is an example of a Home page in Site Builder where the header image and other widgets are not showing. The problem has been caused by a widget where the code wasn t correct but the user can t see the rogue widget in Site Builder. Widgets known to cause problems are visitor counters and Twitter or Facebook code that has been copied from a site other than the official Twitter.com or Facebook.com sites. Hovering over the Home page entry will display a list of the widgets that exist on the page. Click on each HTML entry to display the contents and delete the faulty widget. If you already know which widget to delete e.g. you ve added too many stats widgets, click on the bin to remove it. More than one Home page If you have created a new page with the word Home in it, your site will not function as you would like it to. To remove the second Home page, you may be able to use Site Builder to rename it. When you enter Site Builder, the default page will be a Home page. If it is the page that you have created, then select Edit Current page and change the title of the page to remove the word Home. If you cannot see the page that you have created in the dropdown list, then edit the navigation bar to remove the page. 10 February 2016 Page 64 of 66
Unable to see widget There are times when a widget appears to be missing and it could be that the value in the X-Axis is too large i.e. greater than 1690 pixels. Bear in mind that the header image is 1700 pixels wide, so anything greater than that will be off the page! Find the HTML widget using the method described for Rogue Widgets and check the position settings. If all else fails.. The play-cricket helpdesk may be contacted at play.cricket@ecb.co.uk. 10 February 2016 Page 65 of 66
Useful sites http://www.w3schools.com to learn more about HTML 5 and to use the Tryit Editor where you can test your code. http://color-hex.com/ to find colours for your site. https://developers.facebook.com/docs/plugins/like-button/ for facebook like button 10 February 2016 Page 66 of 66