To start managing your website the first step is to login to your website. The website address to edit your website is always your main website and “/admin” at the end i.e. http://mycommunitywebsite.onesuffolk.net/admin
Simply go to this address and then insert your username and password and click “login”
So that you can add Images or files to your website you need to upload them first to the File Storage area on the website. This is accessed by clicking on “Files” along the left hand side. (see screenshot below)
From here you can :-
To upload new files, simply click the “upload” button (see screenshot below of what the following screen looks like)
From here you can either, drag and drop the files into the area shown on the screen or you can click “choose files to upload”. If you do choose the files then this will take you to a screen which shows your computer file structure and from here you can choose to upload 1 or more files. To upload the file, simply double click on the file from your computer. This is an improvement that we have made in this version of the software, where previously, you could only upload 1 file at a time.
If you do want to upload multiple files then click the first file you want to upload and then press and hold down the “ctrl” key on your keyboard to select other files (you can unhold down the ctrl key when you have finished selecting the files you want to upload), or if you have a group of files that are all one after each other then you can click on the first file you want to upload and then hold down the “shift” key and find the last file you want to upload. Once either of these has been done click “open” at the bottom of the box and it will automatically start the process of uploading.
It will tell you when your files have been uploaded with a large green box.
Add and work with Folders
To add a new folder simply click “Add Folder” and then on the box that appears give your folder a name.
Please note you cannot move folders around. The system is not designed to be like your computer’s own file storage system.
Editing & Deleting Files
To delete a file, simply click on the cross next to the file (as shown above) you wish to delete and then confirm you wish to delete the file.
To edit a file, simply click on the little page symbol (as shown above).
From here you can then edit the following :-
Ensure you click “Save” when you are done editing
Re-ordering Files (to take effect in widgets)
Within the files system you can also re-order the file listing so they appear in the correct order in any widgets or pages you use.
To do this, simply click on "Files" along the left hand side, click on the folder you want to re-order the files in it. Tick the "Allow Drag and Drop Re-ordering" tick box ( and then the list of files will come up for you to re-order. You can then simply drag the order of files into the order you want them.
Moving Files (from 1 folder to another)
The Silverstripe system is not really built for moving files between folders, however on a 1 by 1 basis it is possible.
To move a file from 1 folder to another, click on "Files" along the left hand side. Go into the folder where your file is stored, find the file and then click on it.
From here click on the Folder drop down and then select the folder, from the list, that you want to move it to and click "Save" and then your file will have moved.
To manage your pages, once you have logged in, click on Pages along the left hand side and then a view of your “page tree” will be shown (as per screenshot below)
From here you can do a number of things
Editing Order of Pages
To edit the order of pages you simply hover your mouse over the page you want to move until a “hand” appears and then click and drag the page into the order you want it in.
Click “Published” or “Save and Publish” when done to save the change. We recommend this is done when you have already selected a page. If you don’t select a page and re-order the pages then your changes won’t take effect.
Adding New Pages
To add a new page, click “Add New” and you will be greeted by a screen like the one below.
From here you can choose whether you want this to be a “top level” page i.e. one that appears in the main menu or “under a page” i.e. a sub page underneath another page. Select which one you wish to select. Once you have done this select the type of page you wish to create – generally speaking it will be a standard “Page” but more information on the other page types can be found later in this guide.
Once you have selected the type of page you want from the options, click “Create”. You will then be greeted by a screen like the one below.
From here, you will need to give your page a “Page Name” and “Navigation Label”. These can be different if you so wish but automatically when you set the Page Name it completes the Navigation Label for you.
IMPORTANT - You will need to add a content area before you can start adding your text and images. To do this click the left hand box of this box that sits just below "URL Segment" and that looks like below to create a standard full page width content area.
Once you have completed setting the page up how you want you can choose to either “Save” the page which will save it so you don’t lose your work but it won’t publish it to the live site.
To publish it to the live site you need to click “Save and Publish”
If you want to subsequently delete the page then next to Save and Publish you will see a “more options” button. Click on this and click "Archive" and this will set the page to delete in due course.
If you want to subsequently un-publish a page that had previously been published then click the “more options” button and click “Unpublish”.
Please note, in this version of the One Suffolk Silverstripe software there is no delete page button. Archiving is your method of effectively deleting the page.
Editing Pages
To edit an existing page, simply click on "Pages" on the left hand side and then click on the page you wish to edit.
From here you should be greeted by a screen with your blue content area on the right hand side where you can edit the text, images, links etc and also change all the other various settings detailed in this guide.
Deleting Pages
To delete a page from your site, simply go to "More Options" at the bottom of your page and then click "Archive". Archive is delete in Silverstripe language.
Previewing a Site & Draft Pages
If you've made some substantial changes to a page, and wish to check exactly how it looks before making the changes live, you can save the changes to the Draft site and then preview it.
To do this click the “Save Draft” button (shown below)
Then click the mode toggle icon (shown below)
Following that click the “Preview Mode” button (shown below)
And then "Click on Draft site" (shown below)
After you save your page as a draft, you can preview the page by clicking on "Preview mode" or "Split mode" in the side by side preview menu. (shown below). This will allow you to view a preview of your draft content alongside your editable form. That way you can make live updates to the draft site and see the preview immediately.
Preview Mode – A full page view of your published or draft site as it appears.
Split Mode – A split mode where you can edit the text of that page and see the preview of what it looks like.
Edit Mode – A Full Page view of the editor.
Saving & Publishing
Saving & Publishing your page whenever you change something is one of the elements that has changed in the new One Suffolk software.
When you have finished editing a page you will simply see these options below.
Even though it says the words "Saved" and "Published" or "Save as Publish" you still need to click one of the buttons to save your work. Whenever you change anything on the page make sure you click "Published" if you want to make the content go live on your site, or "Saved" if you want to view it on the "Draft" site first before publishing it.
The One Suffolk Silverstripe software has a number of different type of page types. The vast majority of which you do not need to worry about as most get setup as standard when you have your One Suffolk site initially built.
The 3 page types that you will most likely have any dealings with will be the “Standard Page”, “Asset Listing Page” and “Image Gallery Page”. The rest of the page types can generally be ignored, however if you feel you could use them for something but are unsure how to use them then please contact us and we can help.
Earlier in this guide I have already shown you how to use the “Standard Page” type. In this section I will deal with how to use the other two main pages you may work with.
Gallery Page Type
To add an image gallery to your site (one that can be displayed on the main page), click “Pages” on the left hand side and then click “Add New”. From here choose whether you want the page to be a top level page or a sub page under another page by clicking the relevant option and then where it says “Choose Page Type” select “Gallery Page” and click “Create”. From here you will be greeted with a screen like the one on the next page.
On this page and specifically the “Content” tab, give your Gallery a proper Page Name & Navigation Label and the choose your images that you want in your image gallery from either your computer or from the File Store which will include all images that are already on the system. If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click Open to upload them. If you want to upload multiple files at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click "Open".
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your image gallery and click “attach files”. You can also add multiple files at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.
Click “Save and Publish” when done.
Asset Listing Page Type
An Asset Listing Page is essentially a full page that lists a set of files that you wish to list - either from a set of individual files of your choosing or listing all the files in a folder.
To add a Asset Listing page to your website, click “Pages” on the left hand side and then click “Add New”. From here choose whether you want the page to be a top level page or a sub page under another page by clicking the relevant option and then where it says “Choose Page Type” select “Asset Listing Page” and click “Create”. From the next screen give your new page a “Title” and “Navigation Label” in the relevant boxes under the “Content” tab.
Click the “Page Settings” tab and then you will be greeted with a screen like the one below.
From here, click on the “Media to show” dropdown and select “Choose Assets to show” if you want to pick and choose your files or if you want to display all the files in a folder then choose the “All Assets in a folder” option and select the folder on your Files section which you want to use in the “Folder” box below.
If you do want to pick and choose your files and you have set the “Choose Assets to show” option then the bottom section of the page is where you add your files. You can either just add them from your computer or from your File Store.
If you want to upload some from your computer click “From Your Computer” and then you will be greeted by a box that shows your computer. From here find your files and click Open to upload them. If you want to upload multiple files at once then the new upgraded system allows you to do this. Simply click on the first item you want to upload, then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click Open.
If you want to pick files from the File Store then click “From Files” and then a box with a view of the File Store will appear. From here click on each item you want to add to your image gallery and click “attach files”. You can also add multiple files at once in the File Store, simply click the first item you want to add then hold down the “CTRL” key on your keyboard and then select all the other files you want to upload and then click “attach files”.
You can leave the section where it asks you about Widget Areas and Carousels unless you wish to have a widget section on your Asset Listing page or you wish to have some sort of slide show. Instructions on adding these are available in our Widgets, Carousels and Other Elements guide.
Click “Save and Publish” when done.
Editing your content and adding text and images is a little different from the previous system and can still be done when creating the page or once you have created the page and you go back into it.
We have built extra flexibility into the new system and when creating a page you can choose whether the page is a Full Page, 2 equally sized columns page or a 2 differently sized column page. This means you can format your text in more innovative and different ways.
As you can see from the image above, the 3 buttons show these 3 options and you simply need to click on the option you would like. Once you have done this you can then click into the box and start adding your content (see screenshot below).
The blue area is where you add the content, the toolbar just above it follows you however far you go down so it will always be visible from where you are typing.
The toolbar is fairly similar to the previous One Suffolk software so we won’t go into detail about what each and every option is on this.
The only thing that may be worth mentioning here is that we have given users more flexibility around fonts in this version of the software. You can now change font style and size if you wish – we do however recommend keeping these changes to a minimum as generally speaking website font styles and sizes should be consistent throughout a website.
Linking to other Websites
To insert a link to another website, click the “insert link” button (see below)
From here you will be greeted by a screen like on the one below.
On the box, type in the Display text that you want your link to be. If the link is to a website link then leave the link type as “URL” and then type in the URL (website address) of the website you want to link to i.e. www.bbc.co.uk. If you wanted to insert a link to an email address then in the link type box you would need to select “email” from the dropdown and type in the email address you want to link to in the “email address” box.
Linking to pages on your website
To insert a link to a page on your own website , click the “insert link” button (as above)
Click "Link to page on site"
You will then be greeted by a screen like the one below.
Click on the Page you want to link to, type in the Display text that you want your link to be and then click "OK" to save the link.
Note: Pages that are “tabbed” below a page are classed as sub pages in this view.
Inserting Images (Preferred Method)
IMPORTANT NOTE: PLEASE ENSURE BEFORE FOLLOWING THIS INSTRUCTION YOU UPLOAD YOUR IMAGES INTO THE SYSTEM BY USING THE GUIDANCE AT THE TOP OF THIS PAGE
To insert an image into a page, click on the part of the page you want to insert the image too and then click on the “Insert Image” button on the toolbar (shown above). Once you have done this you will be greeted with a screen like the one below.
Click on “Browse Server” and then you will be greeted by a box which shows you all the images you have on the server.
From here, select the image you want to insert and click “Ok”. Your image will then be inserted.
Once you have your image on your page you can then double click on it to edit it's properties and do things such as edit the size.
Inserting & Uploading Images in 1 process
Note – When you use this option you don’t get a choice of where to upload your image so your website files may become un-organised. If you want your files to remain organised then we recommend uploading the file first and then linking to it separately.
You can also upload a file and insert it into the page in 1 process. To do this click on the “Insert Image” button on the toolbar, click on the “Upload” tab and then you will be taken to a screen like the one below.
Click on “Choose File” and then a screen will open which will show your computer files. From here double click on the file you want to upload and click “Send it to the server” and then you will be greeted with a message to say your file has been uploaded. Once you have seen this message click the "Image Info" tab on the top of this box and then Click on “Browse Server” and then you will be greeted by a box which shows you all the images you have on the server.
It is worth pointing out that on the left hand side of the screen shows the folders and then the right hand main side of the screen shows the files and images within the folders.
From here, select the image you want to insert and click “Ok”. Your image will then be inserted.
There are plenty more things you can do with images before you click ok and insert it. You can set the width and height in the relevant boxes if you want to make it larger or smaller. If you change one of the height or width setting then the system should change the other one so it keeps it in proportionally. The height and width settings are in pixels so be aware of this when you are changing these settings. A larger image for example might have a width of 600 pixels or a thumbnail image 150 pixels.
You can also do things like change the alignment, for example you could make the image align on the right of the page rather than the left. To do this simply click the “Alignment” drop down arrow and select where you want it to align.
You could also choose to link your image to a website or webpage. To do this click on the Link tab on the screen I showed you on the previous page and then type in the website address in the URL box. Once you have amended any settings ensure you click “Ok”
The other benefit of this version of the One Suffolk software is working with images once you have inserted them. You can now simply click on the image in the editor and then a box like the one below will appear. From here you can then change sizes, alignments etc.
Deleting Images
If you want to delete an image you have already inserted then click on the image in the editor so it goes blue and click the “Delete” key on the keyboard.
Editing Images
Once you have your image in to the page then there are still a number of things you can do to your image to improve or change the display of them.
The key thing to look at is the sizing of the image, but there are also a number of other things you can change.
To edit an image that is shown on the page. Click on "Pages" down the left hand side, click on the page that you have added the image to and then right click on the image and click on "Image Properties". On the box that comes up you will see see a "Width" and "Height" box, it is these boxes that you need to change to ensure the images are displayed in the way you want them to be. It is difficult in a guide like this to give you exact guidance on what numbers need to be in these boxes because it depends on what you want but a few bullet point hints are shown below.
Please note, you don't really need to worry about the height. As soon as you change the width, the height will change with it.
To change the width of the image, simply overtype the number that is in the box and then click "Ok"
Make sure you click "Save and Publish" when you are done editing the image.
Image Scaling on Mobile
If you are finding your images are not scaling correctly on mobile i.e. they look stretched etc then please follow the instructions below.
If you double click on the image, click the "advanced" tab, and then in “style” at the bottom enter the code max-width:100% and then click "OK" this will scale images on mobile properly.
Inserting Links to Files (Preferred Method)
IMPORTANT NOTE: PLEASE ENSURE BEFORE FOLLOWING THIS INSTRUCTION YOU UPLOAD YOUR FILES INTO THE SYSTEM
To insert links to files within a page, click on “Pages” down the left hand side. Click on the page you want to edit, make sure you are on the “Content” tab, click into the content area and where you want to exactly put the link on the page (the blue section) and then the toolbar will pop up. The content area or blue section looks like the image below.
Click the “Insert Link” button (shown above) on the toolbar. You will then be greeted with a screen like the one below.
From here type in some Display Text into the "Display Text field for what you want your link to be called (i.e. the name of the file perhaps) and then click “Link to File on Server" and then a screen with all of your images and files will be listed on your screen (Shown Below).
On this screen, find the file you uploaded in the previous step (folders will be on the left hand side and the files in the folders on the right hand side) and then click on the file and then click “Ok”. Your file will then be linked in your main content.
Linking to a file and uploading in the same process
Note – When you use this option you don’t get a choice of where to upload your image so your website files may become organised. If you want your files to remain organised then we recommend uploading the file first and then linking to it separately.
You can also upload a file and insert it into the page in 1 process. To do this click on the “Insert Link” button on the toolbar, click on the “Upload” tab, click on “Choose File” and then a screen will open which will show your computer files. From here double click on the file you want to upload and click “Send it to the server” and then you will be greeted with a message to say your file has been uploaded. Once you have seen this message click the "Link Info" tab on the top of this box and then Click on “Browse Server” and then you will be greeted by a box which shows you all the files and images you have on the server.
It is worth pointing out that on the left hand side of the screen shows the folders and then the right hand main side of the screen shows the files and images within the folders. On this screen images will be shown as a thumbnail version of the actual image that is listed on the server whilst Files will be shown as the relevant file icon depending on their type (i.e. pdf, word, excel etc).
To link to the file of your choosing double click on the file, put some relevant text into the “Display Text” box and then click “Ok”. Your file will then be linked in your main content.
Click “OK” and your file should be uploaded and inserted into your page.
Settings
Once you have your page setup as you like it, you can go back and change certain settings in regards to the page by clicking on “Settings” on the very top bar. Below are the settings you can change. (see screenshot below)
It should be fairly explanatory what these are but essentially :-
Top level or sub page – Choose whether you want your page to appear as a top level menu item as opposed to under one of these top level items.
Show in menus – You can have a page that doesn’t appear in any menu. Simply tick the box whether you want the page to appear in a menu.
Show in search – If you don’t want your page to appear in the site’s search system then simply untick this box. Leave it ticked if you do.
Who can view the page – You can allow only certain registered users the ability to view a page. Generally this setting should be left as it is but if you do want to use it then you will need to follow our Security & Users guide where we describe more about this.
Who can edit the page – You can allow only certain registered users the ability to edit the page. Generally this setting should be left as it is but if you do want to use it then you will need to follow our Security & Users guide where we describe more about this.
Page Settings
Page Settings allows you to do a number of things, the core elements worth bringing attention to is the ability to set a Carousel to display on a page and also the setting to set whether Widgets get displayed on a page or not.
Once you have clicked on “Page Settings” you will see a screen like the one below.
On every page there is not only a settings option (described above) but also a “Page Settings” option (see image below)
This gives you a variety of options which are listed below with descriptions beside them of what they are.
Show Carousel – Tick this box if you want a carousel of images to be shown on your page. Generally only used on a home page.
Choose Carousel – Choose the Carousel you want shown. This will only display if you tick the box above. See our Widgets, Carousels… guide for information
Choose Widget Area – Allows you to display a list of widgets on any one page. See our Widgets, Carousels… guide for information on this.
Page Layout – Allows you to choose full page, sidebar right or sidebar left on any page. Generally used for widgets or extra navigation. Widgets will not be displayed if you do not choose sidebar left or right.
Hide Page Title – Will hide the page title in the coloured bar underneath navigation
Hide Breadcrumbs – Will hide the whole coloured bar underneath navigation.
Choose a Feature Image.- Displays an image in a set location on the page.
If you wish to display videos on your page then firstly we recommend uploading them to a video site such as Youtube. We don't recommend uploading them to your site direct as they are often very large and could cause performance issues on the server.
We won't document the Youtube process fully here but essentially you need to sign up for a Google account, and then login to Youtube at https://www.youtube.com . From here click the "Create a video or post" button at the top right and then click "upload video"
Once you have uploaded your video, play your video in Youtube and then there are 2 options.
1. Simply link to your video
or
2. Embed your video
If you wish to simply link to your video, right click over the video and then click "Copy Video URL". Once you have done this, go into your website editor as you would do normally, click on "Pages", click on the page you wish to edit and then add a link as you would do normally. In adding the link you can paste the link you copied earlier into the URL box, click "Ok" and once you have done this, click "Save and Publish"
If you wish to embed a video then you need to right click over the video in Youtube and click "Copy Embed Code". Once you have done this, go into your website editor as you would do normally, click on "Pages", click on the page you wish to edit and then this time you need to click on the HTML button which looks like the image below. This is placed just above the blue content box towards the right.
Once you have gone into the HTML editor you then need to paste the code you copied earlier into a part of the page. If you have not had much experience in HTML before then it can be a little confusing where to paste the code into and it is difficult to describe easily in a guide but essentially you want to do it on a new line where there is no coding. If you read through the code you should see your text so you should be able to work out where roughly to put it.
Once you have done this, click "Save and Publish"
If you would like to see what these shortcodes do and how they look please see our site here - http://os-demo.1sixty.co.uk/elements/shortcodes/
To add them to your website simply copy and paste the code into the blue content section and then tailor to how you want to display them.
Poll Shortcodes
Poll with multiple Answers
[Poll, id=1]
Poll with single options
[Poll, id=2]
Form Shortcode
With easy to use form builder
[FrontEndForm, id=2]
Testimonial Slider Shortcode
& easy to use testimonial management module
[Testimonials]
Testimonial Slider Shortcode
Easy to modify style and content
[alert, color=primary]This is an alert with the primary colour[/alert][alert, color=secondary]This is an alert with the secondary colour[/alert][alert, color=success]This is a success alert[/alert][alert, color=danger]This is a danger alert[/alert]
[alert, color=warning]This is a warning alert[/alert][alert, color=info]This is a info alert[/alert][alert, color=light]This is a light alert[/alert][alert, color=dark]This is a dark alert[/alert]
Badge Shortcode
[badge, color=primary, text='primary colour']
[badge, color=secondary, text='secondary colour']
Button Shortcode
Easy to change style and colour
[button, color=primary, text='Primary Colour', size=sm, link=http://onesuffolk.net] [button, color=secondary, text='Secondary Colour', size=sm, link=http://onesuffolk.net] [button, color=secondary, text='Small Size', size=sm, link=http://onesuffolk.net] [button, color=secondary, text='Medium Size', size=md, link=http://onesuffolk.net] [button, color=primary, text='Large Size', size=lg, link=http://onesuffolk.net]
Card Shortcode
Easily created with image, heading, text and link
[card, title='A Card Title', text='The Cards Text', btn_link='http://google.com', image='http://placehold.it/300x300']
[card, title='A Card Title', text='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.', image='http://placehold.it/300x300']
[card, title='A Card Title', text='The Cards Text', btn_link='http://google.com']
[card, title='A Card Title', text='Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. ']
Dropdown Links Shortcode
{Same options as button are available}
[dropdown, text='Choose an option', link1="Google, http://google.com", link2="BBC, http://bbc.co.uk", link3="Facebook, https://twitter.com"]
Call to action Shortcode
[callout, title='A big callout Title',subtitle='A little Subtitle', text='A little bit of text to make it look good', btn_link=# ]
Styled List Shortcode
[list_group, item1='First Item in the list', item2='Second item in this list', item3='Third item in the list']
Modal/Popup Shortcode
[modal, title="THIS IS A MODAL"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam nec condimentum dolor. Ut cursus molestie nisl, nec tincidunt lectus sollicitudin ut. Suspendisse potenti. Vivamus sem augue, pellentesque vel blandit nec, dictum a turpis. Quisque tincidunt orci euismod ultricies consectetur. Proin condimentum a eros eu cursus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur ligula ipsum, bibendum a pellentesque ut, tincidunt non mauris. Integer ut elementum ligula. Nulla facilisis lorem a varius pulvinar. Aliquam vel urna non tortor tempus sodales ut eget lorem.
[/modal]
Progress Bar Shortcode
[progress_bar, percentage=50]
[progress_bar, percentage=30]
[progress_bar, percentage=95]
[progress_bar, percentage=12]
Icons Shortcode
Can display any icon from Font Awesome
[icon, code="fa-glass"][icon, code="fa-music"][icon, code="fa-search"][icon, code="fa-envelope-o"][icon, code="fa-heart"][icon, code="fa-star"][icon, code="fa-star-o"][icon, code="fa-user"][icon, code="fa-film"][icon, code="fa-th-large"][icon, code="fa-th"][icon, code="fa-th-list"][icon, code="fa-check"][icon, code="fa-remove"][icon, code="fa-close"][icon, code="fa-times"][icon, code="fa-search-plus"][icon, code="fa-search-minus"][icon, code="fa-power-off"][icon, code="fa-signal"][icon, code="fa-gear"][icon, code="fa-cog"][icon, code="fa-trash-o"][icon, code="fa-home"][icon, code="fa-file-o"][icon, code="fa-clock-o"][icon, code="fa-road"][icon, code="fa-download"][icon, code="fa-arrow-circle-o-down"][icon, code="fa-arrow-circle-o-up"][icon, code="fa-inbox"][icon, code="fa-play-circle-o"][icon, code="fa-rotate-right"][icon, code="fa-repeat"][icon, code="fa-refresh"][icon, code="fa-list-alt"][icon, code="fa-lock"][icon, code="fa-flag"][icon, code="fa-headphones"][icon, code="fa-volume-off"][icon, code="fa-volume-down"][icon, code="fa-volume-up"][icon, code="fa-qrcode"][icon, code="fa-barcode"][icon, code="fa-tag"][icon, code="fa-tags"][icon, code="fa-book"][icon, code="fa-bookmark"][icon, code="fa-print"][icon, code="fa-camera"][icon, code="fa-font"][icon, code="fa-bold"][icon, code="fa-italic"][icon, code="fa-text-height"][icon, code="fa-text-width"][icon, code="fa-align-left"][icon, code="fa-align-center"][icon, code="fa-align-right"][icon, code="fa-align-justify"][icon, code="fa-list"][icon, code="fa-dedent"][icon, code="fa-outdent"][icon, code="fa-indent"][icon, code="fa-video-camera"][icon, code="fa-photo"][icon, code="fa-image"][icon, code="fa-picture-o"][icon, code="fa-pencil"][icon, code="fa-map-marker"][icon, code="fa-adjust"][icon, code="fa-tint"][icon, code="fa-edit"][icon, code="fa-pencil-square-o"][icon, code="fa-share-square-o"][icon, code="fa-check-square-o"][icon, code="fa-arrows"][icon, code="fa-step-backward"][icon, code="fa-fast-backward"][icon, code="fa-backward"][icon, code="fa-play"][icon, code="fa-pause"][icon, code="fa-stop"][icon, code="fa-forward"][icon, code="fa-fast-forward"][icon, code="fa-step-forward"][icon, code="fa-eject"][icon, code="fa-chevron-left"][icon, code="fa-chevron-right"][icon, code="fa-plus-circle"][icon, code="fa-minus-circle"][icon, code="fa-times-circle"][icon, code="fa-check-circle"][icon, code="fa-question-circle"][icon, code="fa-info-circle"][icon, code="fa-crosshairs"][icon, code="fa-times-circle-o"][icon, code="fa-check-circle-o"][icon, code="fa-ban"][icon, code="fa-arrow-left"][icon, code="fa-arrow-right"][icon, code="fa-arrow-up"][icon, code="fa-arrow-down"][icon, code="fa-mail-forward"][icon, code="fa-share"][icon, code="fa-expand"][icon, code="fa-compress"][icon, code="fa-plus"][icon, code="fa-minus"][icon, code="fa-asterisk"][icon, code="fa-exclamation-circle"][icon, code="fa-gift"][icon, code="fa-leaf"][icon, code="fa-fire"][icon, code="fa-eye"][icon, code="fa-eye-slash"][icon, code="fa-warning"][icon, code="fa-exclamation-triangle"][icon, code="fa-plane"][icon, code="fa-calendar"][icon, code="fa-random"][icon, code="fa-comment"][icon, code="fa-magnet"][icon, code="fa-chevron-up"][icon, code="fa-chevron-down"][icon, code="fa-retweet"][icon, code="fa-shopping-cart"][icon, code="fa-folder"][icon, code="fa-folder-open"][icon, code="fa-arrows-v"][icon, code="fa-arrows-h"][icon, code="fa-bar-chart-o"][icon, code="fa-bar-chart"][icon, code="fa-twitter-square"][icon, code="fa-facebook-square"][icon, code="fa-camera-retro"][icon, code="fa-key"][icon, code="fa-gears"][icon, code="fa-cogs"][icon, code="fa-comments"][icon, code="fa-thumbs-o-up"][icon, code="fa-thumbs-o-down"][icon, code="fa-star-half"][icon, code="fa-heart-o"][icon, code="fa-sign-out"][icon, code="fa-linkedin-square"][icon, code="fa-thumb-tack"][icon, code="fa-external-link"][icon, code="fa-sign-in"][icon, code="fa-trophy"][icon, code="fa-github-square"][icon, code="fa-upload"][icon, code="fa-lemon-o"][icon, code="fa-phone"][icon, code="fa-square-o"][icon, code="fa-bookmark-o"][icon, code="fa-phone-square"][icon, code="fa-twitter"][icon, code="fa-facebook-f"][icon, code="fa-facebook"][icon, code="fa-github"][icon, code="fa-unlock"][icon, code="fa-credit-card"][icon, code="fa-feed"][icon, code="fa-rss"][icon, code="fa-hdd-o"][icon, code="fa-bullhorn"][icon, code="fa-bell"][icon, code="fa-certificate"][icon, code="fa-hand-o-right"][icon, code="fa-hand-o-left"][icon, code="fa-hand-o-up"][icon, code="fa-hand-o-down"][icon, code="fa-arrow-circle-left"][icon, code="fa-arrow-circle-right"][icon, code="fa-arrow-circle-up"][icon, code="fa-arrow-circle-down"][icon, code="fa-globe"][icon, code="fa-wrench"][icon, code="fa-tasks"][icon, code="fa-filter"][icon, code="fa-briefcase"][icon, code="fa-arrows-alt"][icon, code="fa-group"][icon, code="fa-users"][icon, code="fa-chain"][icon, code="fa-link"][icon, code="fa-cloud"][icon, code="fa-flask"][icon, code="fa-cut"][icon, code="fa-scissors"][icon, code="fa-copy"][icon, code="fa-files-o"][icon, code="fa-paperclip"][icon, code="fa-save"][icon, code="fa-floppy-o"][icon, code="fa-square"][icon, code="fa-navicon"][icon, code="fa-reorder"][icon, code="fa-bars"][icon, code="fa-list-ul"][icon, code="fa-list-ol"][icon, code="fa-strikethrough"][icon, code="fa-underline"][icon, code="fa-table"][icon, code="fa-magic"][icon, code="fa-truck"][icon, code="fa-pinterest"][icon, code="fa-pinterest-square"][icon, code="fa-google-plus-square"][icon, code="fa-google-plus"][icon, code="fa-money"][icon, code="fa-caret-down"][icon, code="fa-caret-up"][icon, code="fa-caret-left"][icon, code="fa-caret-right"][icon, code="fa-columns"][icon, code="fa-unsorted"][icon, code="fa-sort"][icon, code="fa-sort-down"][icon, code="fa-sort-desc"][icon, code="fa-sort-up"][icon, code="fa-sort-asc"][icon, code="fa-envelope"][icon, code="fa-linkedin"][icon, code="fa-rotate-left"][icon, code="fa-undo"][icon, code="fa-legal"][icon, code="fa-gavel"][icon, code="fa-dashboard"][icon, code="fa-tachometer"][icon, code="fa-comment-o"][icon, code="fa-comments-o"][icon, code="fa-flash"][icon, code="fa-bolt"][icon, code="fa-sitemap"][icon, code="fa-umbrella"][icon, code="fa-paste"][icon, code="fa-clipboard"][icon, code="fa-lightbulb-o"][icon, code="fa-exchange"][icon, code="fa-cloud-download"][icon, code="fa-cloud-upload"][icon, code="fa-user-md"][icon, code="fa-stethoscope"][icon, code="fa-suitcase"][icon, code="fa-bell-o"][icon, code="fa-coffee"][icon, code="fa-cutlery"][icon, code="fa-file-text-o"][icon, code="fa-building-o"][icon, code="fa-hospital-o"][icon, code="fa-ambulance"][icon, code="fa-medkit"][icon, code="fa-fighter-jet"][icon, code="fa-beer"][icon, code="fa-h-square"][icon, code="fa-plus-square"][icon, code="fa-angle-double-left"][icon, code="fa-angle-double-right"][icon, code="fa-angle-double-up"][icon, code="fa-angle-double-down"][icon, code="fa-angle-left"][icon, code="fa-angle-right"][icon, code="fa-angle-up"][icon, code="fa-angle-down"][icon, code="fa-desktop"][icon, code="fa-laptop"][icon, code="fa-tablet"][icon, code="fa-mobile-phone"][icon, code="fa-mobile"][icon, code="fa-circle-o"][icon, code="fa-quote-left"][icon, code="fa-quote-right"][icon, code="fa-spinner"][icon, code="fa-circle"][icon, code="fa-mail-reply"][icon, code="fa-reply"][icon, code="fa-github-alt"][icon, code="fa-folder-o"][icon, code="fa-folder-open-o"][icon, code="fa-smile-o"][icon, code="fa-frown-o"][icon, code="fa-meh-o"][icon, code="fa-gamepad"][icon, code="fa-keyboard-o"][icon, code="fa-flag-o"][icon, code="fa-flag-checkered"][icon, code="fa-terminal"][icon, code="fa-code"][icon, code="fa-mail-reply-all"][icon, code="fa-reply-all"][icon, code="fa-star-half-empty"][icon, code="fa-star-half-full"][icon, code="fa-star-half-o"][icon, code="fa-location-arrow"][icon, code="fa-crop"][icon, code="fa-code-fork"][icon, code="fa-unlink"][icon, code="fa-chain-broken"][icon, code="fa-question"][icon, code="fa-info"][icon, code="fa-exclamation"][icon, code="fa-superscript"][icon, code="fa-subscript"][icon, code="fa-eraser"][icon, code="fa-puzzle-piece"][icon, code="fa-microphone"][icon, code="fa-microphone-slash"][icon, code="fa-shield"][icon, code="fa-calendar-o"][icon, code="fa-fire-extinguisher"][icon, code="fa-rocket"][icon, code="fa-maxcdn"][icon, code="fa-chevron-circle-left"][icon, code="fa-chevron-circle-right"][icon, code="fa-chevron-circle-up"][icon, code="fa-chevron-circle-down"][icon, code="fa-html5"][icon, code="fa-css3"][icon, code="fa-anchor"][icon, code="fa-unlock-alt"][icon, code="fa-bullseye"][icon, code="fa-ellipsis-h"][icon, code="fa-ellipsis-v"][icon, code="fa-rss-square"][icon, code="fa-play-circle"][icon, code="fa-ticket"][icon, code="fa-minus-square"][icon, code="fa-minus-square-o"][icon, code="fa-level-up"][icon, code="fa-level-down"][icon, code="fa-check-square"][icon, code="fa-pencil-square"][icon, code="fa-external-link-square"][icon, code="fa-share-square"][icon, code="fa-compass"][icon, code="fa-toggle-down"][icon, code="fa-caret-square-o-down"][icon, code="fa-toggle-up"][icon, code="fa-caret-square-o-up"][icon, code="fa-toggle-right"][icon, code="fa-caret-square-o-right"][icon, code="fa-euro"][icon, code="fa-eur"][icon, code="fa-gbp"][icon, code="fa-dollar"][icon, code="fa-usd"][icon, code="fa-rupee"][icon, code="fa-inr"][icon, code="fa-cny"][icon, code="fa-rmb"][icon, code="fa-yen"][icon, code="fa-jpy"][icon, code="fa-ruble"][icon, code="fa-rouble"][icon, code="fa-rub"][icon, code="fa-won"][icon, code="fa-krw"][icon, code="fa-bitcoin"][icon, code="fa-btc"][icon, code="fa-file"][icon, code="fa-file-text"][icon, code="fa-sort-alpha-asc"][icon, code="fa-sort-alpha-desc"][icon, code="fa-sort-amount-asc"][icon, code="fa-sort-amount-desc"][icon, code="fa-sort-numeric-asc"][icon, code="fa-sort-numeric-desc"][icon, code="fa-thumbs-up"][icon, code="fa-thumbs-down"][icon, code="fa-youtube-square"][icon, code="fa-youtube"][icon, code="fa-xing"][icon, code="fa-xing-square"][icon, code="fa-youtube-play"][icon, code="fa-dropbox"][icon, code="fa-stack-overflow"][icon, code="fa-instagram"][icon, code="fa-flickr"][icon, code="fa-adn"][icon, code="fa-bitbucket"][icon, code="fa-bitbucket-square"][icon, code="fa-tumblr"][icon, code="fa-tumblr-square"][icon, code="fa-long-arrow-down"][icon, code="fa-long-arrow-up"][icon, code="fa-long-arrow-left"][icon, code="fa-long-arrow-right"][icon, code="fa-apple"][icon, code="fa-windows"][icon, code="fa-android"][icon, code="fa-linux"][icon, code="fa-dribbble"][icon, code="fa-skype"][icon, code="fa-foursquare"][icon, code="fa-trello"][icon, code="fa-female"][icon, code="fa-male"][icon, code="fa-gittip"][icon, code="fa-gratipay"][icon, code="fa-sun-o"][icon, code="fa-moon-o"][icon, code="fa-archive"][icon, code="fa-bug"][icon, code="fa-vk"][icon, code="fa-weibo"][icon, code="fa-renren"][icon, code="fa-pagelines"][icon, code="fa-stack-exchange"][icon, code="fa-arrow-circle-o-right"][icon, code="fa-arrow-circle-o-left"][icon, code="fa-toggle-left"][icon, code="fa-caret-square-o-left"][icon, code="fa-dot-circle-o"][icon, code="fa-wheelchair"][icon, code="fa-vimeo-square"][icon, code="fa-turkish-lira"][icon, code="fa-try"][icon, code="fa-plus-square-o"][icon, code="fa-space-shuttle"][icon, code="fa-slack"][icon, code="fa-envelope-square"][icon, code="fa-wordpress"][icon, code="fa-openid"][icon, code="fa-institution"][icon, code="fa-bank"][icon, code="fa-university"][icon, code="fa-mortar-board"][icon, code="fa-graduation-cap"][icon, code="fa-yahoo"][icon, code="fa-google"][icon, code="fa-reddit"][icon, code="fa-reddit-square"][icon, code="fa-stumbleupon-circle"][icon, code="fa-stumbleupon"][icon, code="fa-delicious"][icon, code="fa-digg"][icon, code="fa-pied-piper"][icon, code="fa-pied-piper-alt"][icon, code="fa-drupal"][icon, code="fa-joomla"][icon, code="fa-language"][icon, code="fa-fax"][icon, code="fa-building"][icon, code="fa-child"][icon, code="fa-paw"][icon, code="fa-spoon"][icon, code="fa-cube"][icon, code="fa-cubes"][icon, code="fa-behance"][icon, code="fa-behance-square"][icon, code="fa-steam"][icon, code="fa-steam-square"][icon, code="fa-recycle"][icon, code="fa-automobile"][icon, code="fa-car"][icon, code="fa-cab"][icon, code="fa-taxi"][icon, code="fa-tree"][icon, code="fa-spotify"][icon, code="fa-deviantart"][icon, code="fa-soundcloud"][icon, code="fa-database"][icon, code="fa-file-pdf-o"][icon, code="fa-file-word-o"][icon, code="fa-file-excel-o"][icon, code="fa-file-powerpoint-o"][icon, code="fa-file-photo-o"][icon, code="fa-file-picture-o"][icon, code="fa-file-image-o"][icon, code="fa-file-zip-o"][icon, code="fa-file-archive-o"][icon, code="fa-file-sound-o"][icon, code="fa-file-audio-o"][icon, code="fa-file-movie-o"][icon, code="fa-file-video-o"][icon, code="fa-file-code-o"][icon, code="fa-vine"][icon, code="fa-codepen"][icon, code="fa-jsfiddle"][icon, code="fa-life-bouy"][icon, code="fa-life-buoy"][icon, code="fa-life-saver"][icon, code="fa-support"][icon, code="fa-life-ring"][icon, code="fa-circle-o-notch"][icon, code="fa-ra"][icon, code="fa-rebel"][icon, code="fa-ge"][icon, code="fa-empire"][icon, code="fa-git-square"][icon, code="fa-git"][icon, code="fa-y-combinator-square"][icon, code="fa-yc-square"][icon, code="fa-hacker-news"][icon, code="fa-tencent-weibo"][icon, code="fa-qq"][icon, code="fa-wechat"][icon, code="fa-weixin"][icon, code="fa-send"][icon, code="fa-paper-plane"][icon, code="fa-send-o"][icon, code="fa-paper-plane-o"][icon, code="fa-history"][icon, code="fa-circle-thin"][icon, code="fa-header"][icon, code="fa-paragraph"][icon, code="fa-sliders"][icon, code="fa-share-alt"][icon, code="fa-share-alt-square"][icon, code="fa-bomb"][icon, code="fa-soccer-ball-o"][icon, code="fa-futbol-o"][icon, code="fa-tty"][icon, code="fa-binoculars"][icon, code="fa-plug"][icon, code="fa-slideshare"][icon, code="fa-twitch"][icon, code="fa-yelp"][icon, code="fa-newspaper-o"][icon, code="fa-wifi"][icon, code="fa-calculator"][icon, code="fa-paypal"][icon, code="fa-google-wallet"][icon, code="fa-cc-visa"][icon, code="fa-cc-mastercard"][icon, code="fa-cc-discover"][icon, code="fa-cc-amex"][icon, code="fa-cc-paypal"][icon, code="fa-cc-stripe"][icon, code="fa-bell-slash"][icon, code="fa-bell-slash-o"][icon, code="fa-trash"][icon, code="fa-copyright"][icon, code="fa-at"][icon, code="fa-eyedropper"][icon, code="fa-paint-brush"][icon, code="fa-birthday-cake"][icon, code="fa-area-chart"][icon, code="fa-pie-chart"][icon, code="fa-line-chart"][icon, code="fa-lastfm"][icon, code="fa-lastfm-square"][icon, code="fa-toggle-off"][icon, code="fa-toggle-on"][icon, code="fa-bicycle"][icon, code="fa-bus"][icon, code="fa-ioxhost"][icon, code="fa-angellist"][icon, code="fa-cc"][icon, code="fa-shekel"][icon, code="fa-sheqel"][icon, code="fa-ils"][icon, code="fa-meanpath"][icon, code="fa-buysellads"][icon, code="fa-connectdevelop"][icon, code="fa-dashcube"][icon, code="fa-forumbee"][icon, code="fa-leanpub"][icon, code="fa-sellsy"][icon, code="fa-shirtsinbulk"][icon, code="fa-simplybuilt"][icon, code="fa-skyatlas"][icon, code="fa-cart-plus"][icon, code="fa-cart-arrow-down"][icon, code="fa-diamond"][icon, code="fa-ship"][icon, code="fa-user-secret"][icon, code="fa-motorcycle"][icon, code="fa-street-view"][icon, code="fa-heartbeat"][icon, code="fa-venus"][icon, code="fa-mars"][icon, code="fa-mercury"][icon, code="fa-intersex"][icon, code="fa-transgender"][icon, code="fa-transgender-alt"][icon, code="fa-venus-double"][icon, code="fa-mars-double"][icon, code="fa-venus-mars"][icon, code="fa-mars-stroke"][icon, code="fa-mars-stroke-v"][icon, code="fa-mars-stroke-h"][icon, code="fa-neuter"][icon, code="fa-genderless"][icon, code="fa-facebook-official"][icon, code="fa-pinterest-p"][icon, code="fa-whatsapp"][icon, code="fa-server"][icon, code="fa-user-plus"][icon, code="fa-user-times"][icon, code="fa-hotel"][icon, code="fa-bed"][icon, code="fa-viacoin"][icon, code="fa-train"][icon, code="fa-subway"][icon, code="fa-medium"][icon, code="fa-yc"][icon, code="fa-y-combinator"][icon, code="fa-optin-monster"][icon, code="fa-opencart"][icon, code="fa-expeditedssl"][icon, code="fa-battery-4"][icon, code="fa-battery-full"][icon, code="fa-battery-3"][icon, code="fa-battery-three-quarters"][icon, code="fa-battery-2"][icon, code="fa-battery-half"][icon, code="fa-battery-1"][icon, code="fa-battery-quarter"][icon, code="fa-battery-0"][icon, code="fa-battery-empty"][icon, code="fa-mouse-pointer"][icon, code="fa-i-cursor"][icon, code="fa-object-group"][icon, code="fa-object-ungroup"][icon, code="fa-sticky-note"][icon, code="fa-sticky-note-o"][icon, code="fa-cc-jcb"][icon, code="fa-cc-diners-club"][icon, code="fa-clone"][icon, code="fa-balance-scale"][icon, code="fa-hourglass-o"][icon, code="fa-hourglass-1"][icon, code="fa-hourglass-start"][icon, code="fa-hourglass-2"][icon, code="fa-hourglass-half"][icon, code="fa-hourglass-3"][icon, code="fa-hourglass-end"][icon, code="fa-hourglass"][icon, code="fa-hand-grab-o"][icon, code="fa-hand-rock-o"][icon, code="fa-hand-stop-o"][icon, code="fa-hand-paper-o"][icon, code="fa-hand-scissors-o"][icon, code="fa-hand-lizard-o"][icon, code="fa-hand-spock-o"][icon, code="fa-hand-pointer-o"][icon, code="fa-hand-peace-o"][icon, code="fa-trademark"][icon, code="fa-registered"][icon, code="fa-creative-commons"][icon, code="fa-gg"][icon, code="fa-gg-circle"][icon, code="fa-tripadvisor"][icon, code="fa-odnoklassniki"][icon, code="fa-odnoklassniki-square"][icon, code="fa-get-pocket"][icon, code="fa-wikipedia-w"][icon, code="fa-safari"][icon, code="fa-chrome"][icon, code="fa-firefox"][icon, code="fa-opera"][icon, code="fa-internet-explorer"][icon, code="fa-tv"][icon, code="fa-television"][icon, code="fa-contao"][icon, code="fa-500px"][icon, code="fa-amazon"][icon, code="fa-calendar-plus-o"][icon, code="fa-calendar-minus-o"][icon, code="fa-calendar-times-o"][icon, code="fa-calendar-check-o"][icon, code="fa-industry"][icon, code="fa-map-pin"][icon, code="fa-map-signs"][icon, code="fa-map-o"][icon, code="fa-map"][icon, code="fa-commenting"][icon, code="fa-commenting-o"][icon, code="fa-houzz"][icon, code="fa-vimeo"][icon, code="fa-black-tie"][icon, code="fa-fonticons"][icon, code="fa-reddit-alien"][icon, code="fa-edge"][icon, code="fa-credit-card-alt"][icon, code="fa-codiepie"][icon, code="fa-modx"][icon, code="fa-fort-awesome"][icon, code="fa-usb"][icon, code="fa-product-hunt"][icon, code="fa-mixcloud"][icon, code="fa-scribd"][icon, code="fa-pause-circle"][icon, code="fa-pause-circle-o"][icon, code="fa-stop-circle"][icon, code="fa-stop-circle-o"][icon, code="fa-shopping-bag"][icon, code="fa-shopping-basket"][icon, code="fa-hashtag"][icon, code="fa-bluetooth"][icon, code="fa-bluetooth-b"][icon, code="fa-percent"]