How to use the system and add content

Styles and instructions

The following standard styles have been used within the site and most editors will allow you to use them

H1 (Header 1)

Sample of text in style

H2 (Header 2)

Sample of text in style

H3 (Header 3)

Sample of text in style

H4 (Header 4)

Sample of text in style

H5 (Header 5)

Sample of text in style

H6 (Header 6)

Sample of text in style

H6 (Header 6) with a hyperlink (so it can be used to create buttons on pages)

Test link

Standard (no style applied = p tag)

Sample of text in style

Custom styles

For the General Information pages there is a "Page class" input box at the bottom of the backend for that page. If you add any of the following class names they will change the page for specific styling. You can add more than one with a space between them if you want a combination of effects.

  • video
    • This is for when you add YouTube videos to the main content. Forces the video to display to the correct size with any changes being made to the embed code from YouTube
  • right
    • use to make the Product logo position to the right if it crashes into the image.

If you want a button in the main content area on information pages add a link as normal and apply H6. This will apply styling like buttons in other places.

Test image

Italic

Instructions

All content added to the site is done under the menu option of "Content Manager" in the back-end

Content Manager

  • Publish entries

    • All new pages and elements are started here. But using the "Clone" option in the Edit section is easier for most
      • Ask us how
        • Set up of the FAQ section. Don't touch
      • Brand pages
        • Already set-up and only required if a new Brand is added
      • Contacts
        • For adding different offices of Finishing Brands. These can then be pulled into other areas of the site
      • Distributors
        • Add here any new contact / distributor. This is for external and internal contacts
        • See instructions below on how to edit and manage
      • General
        • This is where you add new standard pages to the site
      • Global Footer
        • Don't use
      • Global Header
        • Don't use
      • Home slide
        • Don't use
      • Library
        • Create a new documents library new products. Or edit existing ones.
      • News
        • Add here any new stories for the following subjects
          • General News
          • General News - Industrial & Refinishing
          • General News - Refinishing
          • Stay up to date
          • Testimonials
          • Tip of the Week
      • Products
        • Add here new products. But using the "Clone" option in the existing products list is easier and quicker
  • Edit entries

    • This is where you edit all content once they have been added to the system
    • All as above. Key points:
      • Ask us how
        • Where you add and edit FAQ's
      • Brands
        • Where you edit/add content to the main brand landing pages
      • Contacts
        • Where you edit main information on head office / main company information. Plus other company locations around the world
      • Distributor
        • When first adding an entry please go to link via "Publish Entries"
        • From then on go to "Edit Entries"
        • Title
          • Name you want for the contact, company, person or both
        • URL
          • Should be added by system and is the address Google sees
        • Categories
          • Add Brands this person/company handles enquiries for
          • Division for that person/company
          • Distributor type
            • Distributor - likely to be independent companies of CFT
            • Agent - CFT companies and people from arrange the world
        • Address
          • Add the address of the distributor in both the Distributor and Agent address boxes
        • Telephone and Email
          • Add contact details in appropriate boxes
        • Location
          • Add address into Geocoder in map
        • Country
          • Select country of where distributor is located
        • Region
          • If distributor is in UK, select region (County) of distributor's location
  • General
    • All non dynamic standard pages are added here
      • Categories
        • Company pages - these will appear in the Information menu drop down
        • General pages - do not appear in main menu. Used for pages like T&C
      • Title - main page name. Very Important for Google
      • Sub heading - sub heading for the page. Important for Google
      • Background image
        • This is if you want a background image running right across the page behind the Title and sub heading
      • Toogle Header Colour
        • If you add an image in background decide what the colour of the text should be. Dark backgrounds obviously require white
      • Main Content image
        • If you want an image added at the top of the page above the main content. You can still add images in the text in the editor
      • General Content
        • The main content that you want on the page
      • Call to action
        • If you want a nice panel at the bottom of the page to draw attention to something. Can have an image, title, text and URL
      • Sidebar
        • This is where you can add content into the right hand column. Can include:
          • Links to other pages. Please make sure you ONLY add the local address ie do not add the domain. Should be /structure/pagename
          • Pre added addresses to Finishing Brand companies
          • HTML content. Probably will need DSM
      • Page Class - This is where you can add the following to get the page to style itself differently. Add the class exactly as written
        • wide-page = hides the right hand column and makes the main content 100% wide
    • All pages have tabs at the top
      • Date - to allow you to set a date when page will go live
      • Options - probably not required
      • SEO - Very important for search engines
        • Title - Very important for Google. Don't just copy the page title
        • Keywords - Not required for most search engines. Style used in some countries like Russia
        • Description - Add hear your marketing message that will appear in search engines. Does not affect the search engines results
          • Author information - not needed now for Google
          • Open graph - these sections are worth setting up as it can help SEO
          • Twitter - these sections could also be worth doing
  • Library
    • All documents need to be added here. For products add a library for each product and then add all documents that that product has. Also the following categories are already in system.
      • General
      • Then add document to that entry in the section "Library items". This is what makes the system add the correct document into the right place of the front end library
      • As mentioned later for these to appear on Product pages, search by library name which will then add all in that library. Hence also searching for "general" will add these also to page
  • News
    • Add news stories
  • Products
    • Where all products are edited and cloned to create new ones.
      • Page displays a list of all products in system, Main or Accessory.
      • Hover over ID number # to get Clone icon which is best option to add new product.
      • To edit that new product or existing just click title:
        • Categories - where you add the appropriate settings for product.
          • Product type - only select one.
        • Title - Very important as Google searches this.
        • Sub header - Also very important for Google, describes product.
        • Product Images - main images required for product, suggest no more than 5 are added. An ALT tag must be added for each to describe the image.
        • Product Logo - if required.
        • Tabs.
          • Product overview - full description and information on product please use h4 - h6 for headings.
            • If adding small amount of text in product overview.
              • Go to page class at bottom of page.
              • type in 'override', this will disable the two column template originally put in place.
          • Product 360 view - add at least one using the Plus symbol.
            • One image required for each rotation view.
              • Add image - main large image .
              • Must add ALT tag.
              • Image (L) - image that appears in circle to left of main image.
              • Text Field (L) - Text that appears under circular image.
                • Please use H5 for first line of copy.
                • Followed by normal (no style) for next lines.
              • Image (R) - image that appears in circle to right of main image.
              • Text Field (R) - Text that appears under circular image.
                • Please use H5 for first line of copy.
                • Followed by normal (no style) for next lines.
              • Using grid references on main image please add the grid reference to the next four columns for each Circular image.
          • Product Tech Specs - add using a table for each specification table you want to add. When adding table:
            • Add number of rows and columns you require.
            • Headers - First row.
            • Width - remove value.
            • OK.
            • If using multiple tables but the columns do not line up, go to bottom of page to page class, type table50 and save
          • Product Docs / Literature - select all documents you need.
          • Product Materials - Select correct materials.
          • Product Accessories - select all accessories you want on page.
          • Product videos - add either a YouTube or Vimeo URL.
          • Related products - all other related products you want to show need to be selected.
        • All product pages have tabs at the top. See general page content above.
  • Files & Assets

    • File Manager - all images required are added here.
      • Click "Upload File" top right.
      • Choose directory to add image.
        • Content images - for standard content pages
        • Global images -
        • Library -
        • Library Thumbnails - used for the document listing in library.
        • News images - for news stories.
        • Product images - for all product images. This must be used for any images you require on Product pages.
        • Slider images - used for the moving header.
      • Choose image from your computer.
      • Upload.
      • You then can choose to either.
        • Edit file - this is to change the file parameters.
          • This is important to do as a ALT tag must be added.
          • You can also change the File Title to something more meaningful for your own information.
          • Also try and upload images with good file names for SEO, i.e. including words for search in Google as it reads them.
        • Edit image - leave this one at this point, see info below in next point.
      • Once the image is loaded into the backend library you will see all the images in a table.
        • Icons to the right allow you to edit/change.
          • Picture icon - this is where you can use basic image adjustment software to edit size of image.
            • Click crop mode, drag across the image to select the area you want. You can add preset sizes to width and height.
            • Drag selected area over image.
            • Save image.
        • To see an image in library just click file name
        • Image sizes - All images need to be added at the correct size and the above instructions on editing will allow you to do this without having to use programs like Photoshop. If the images are loaded too large the site will display them correctly but the page will slow done on slower connections like mobiles. The following sizes are required for the site:
          • Product main and 360 main image = 550 pixels wide.
          • 360 detail image (in circle) = 220 pixels wide.
          • Product logos = 220 pixels wide.
          • Header images = 1920 pixels wide. Suggest no more than 230 pixels in height. Any more will be hidden.
          • Main Content image, general pages = up to 790 pixels wide.
          • Call to action = 140 pixels wide.
          • Library Document thumbnail images + 120 pixels wide.
          • News Stories = 770 x 600 pixels is the ideal image size.
          • Home page slide images = 1100 pixels x 460 pixels.  NB take into account text at top and bottom of slide, "letterbox" the main part of the image horizontally within the image frame
        • Each product has a library. Match the product to the library by adding the file. It will have the same name as the product with 'documents' at the end.
        • To add the product to the library go to the library. Content Manager >  Edit Entries > Library.
        • Find the library for the product and click the title to edit.
        • Go to library items and click the green plus symbol.
        • Click add file under file or thumbnail. Add the image first so you can see the product you're adding.
        • If the file is not already in the library select upload file in the top right corner and upload it. The click save at the bottom.
  • Overview

    • This lists all of the elements and assets listed above in another method of finding them

Member Manager

Used to control all users to the system. Not all users can see this section, subject to permission level

Tools & Accessories

Used to manage menus in the web site. Not all users can see this section, subject to permission level

  • Taxonomy

    • Make sure any custom URL added does not have the domain pasted in. ie "/site structure/page"
    • This is manage the content of the following menus
      • Main navigation

Languages - how to set up and add translations

The items below are what are used to add a language to the system.

To see what you are adding to a new language replace the ISO code as shown below with the one you require. Once you are finished and reading to go live inform DSM who will change the link in the language selection drop down top right on the page.

The following is the order/process that needs doing

  1. Edit menu of the language required. DSM have added the main ones required.
  2. Edit footer for language. Also header but only if you want different ALT tags
  3. All of the elements and system use the ISO codes for each site
    1. France = FR
    2. Germany = DE
    3. Spanish = ES
    4. Italian = IT
    5. Turkish = TR
    6. Russian = RU
    7. Polish = PL
    8. Arabic = AR
  4. Add translations to "Transcribe"
  5. Add translations to "Transcribe Categories"
  6. Start duplicating the following for the language as described below
    1. Ask us how
    2. Brands
    3. Contact
    4. Distributors
    5. General
    6. Holding page (Only "Auto Holding page" until Phase 2 Global site is ready
    7. News
    8. Products

Headers and Footers

To create headers and footers for the different languages

  1. First go to the list review page that shows all headers an footers in "Global Headers" and "Global Footers"

  2. Clone the item you want in another language

  3. Replace title with translation

  4. URL will auto change to include ISO code usually but sometimes will need the URL to be edited. If you are viewing the front end you will need to add this new URL when viewing with the country code in the URL

  5. Click "Save" at bottom of page

  6. Go to "Transcribe" in tabs at top of page

  7. Select from drop down the "Language Association" that you want for the new cloned page

  8. Save at bottom of page

  9. and then select English page it relates to in "Relate this entry to an existing entry". This is very important

  10. Save at bottom of page

Note: Headers it is worth creating a header for a language if the "Alt Tag" needs to be changed. DO NOT touch anything else. Probably only for none Germanic languages

Pages, products and other elements that need languages

To create a page or product in a different language:

  1. As above

System takes you back to the main entry page for that language so you can now carry on editing. Or you will find it as a child page on the page or product listing.

Menus

All menus are listed in "Taxonomy" and can be edited as before with English. Go to the "Overview" page to see all language versions.

  • Main menu

  • Footer menu

  • News category menu

  • Menu Overview "Edit settings" - only available to "Global Admin" users

    • To allow "Editors" to have access to the menu go to "Edit settings for the Menu 

    • In the "Member groups..." section, select Both "Global admins" and "Global editors"

DO NOT touch class fields. Only edit URL's if they have a fill custom path and not #.

Transcribe

This new section is for controlling the translations of all text displayed on pages that is not controlled with the usual edit controls. Go to "Transcribe" in the main top menu and select. This is only available to users with the right permissions. This is where you will find a list of all text elements that appear on pages that are not controlled by the normal edit methods

  • The English language versions is only required if you change the name or want to edit an element. DO NOT add new ones with “Add row”

  • Select language in drop down at the top of the grid and click “View”

  • This will give you a grid of elements

  • Find the one you want and edit text in “Translate” column. DO NOT touch other parts.

  • If you don’t find it click “Add Row” at bottom of grid

    • Leave as “textfield”

    • Add “Variable” exactly the same as “English” version. Or French which has initially been added.

    • Click Save at bottom

    • For category page descriptions add:

      • category_description_aircraft-aerospace = for the Text field variable

      • One is required for each category and needs the same as above but with the correct description name

    • For all "category" names and "Countries" see "Transcribe Categories" below. Do not touch these in the Transcribe main section

Transcribe Categories

All categories are added as before for primary English language

  • Any new ones added to Primary (English) site will automatically appear in “Transcribe Categories” for translation
  • Any changes to names for English can also be done here.

To then add a translation of each one go to “Transcribe Category”. The only ones that you need to go to from the menu are:

  • Category Groups
    • Product Categories
    • Industry markets
    • Technology
  • Taxonomy
    • Countries

Library

What to do in this section:

  1. Make sure all libraries are first set up to make it easy for all users. ie for products we suggest "Name of product - Literature" and "Name of product - Service". Then inside these libraries you add all the correct items that are required.
  2. This will include all the different languages required but not languages that are to have their own sites.
  3. For languages that have their own sites:
    1. In the library listing page find the English version of the library you need
    2. Use the duplicate icon to create a copy
    3. As before with pages go to "Transcribe" tab and select the correct language.
    4. Save
    5. Change the title for the language
    6. Use this title also for the URL or something suitable
    7. Library items ( this is to be done for each library item)
      1. Delete the file in the first column and replace with the correct PDF of the language.
      2. Replace the test in "File name"
      3. Replace the text in "File Description"
      4. You do not need to replace the thumbnail unless it looks different
    8. Save

Once this is done you will be able to add on the product pages:

  1. Different languages for the English site
    1. Instructions to be added

The Library pages will take care of themselves

Distributors

The "Where to buy" section works in a similar way to the products and pages.

  1. Clone the Agent or Distributor you want in another language

  2. Replace title with translation. Do not add ISO code on the end as these titles appear on the front end

  3. Click "Save" at bottom of page

  4. Go to "Transcribe" in tabs at top of page

  5. Select from drop down the "Language Association" that you want for the new cloned page

  6. Save at bottom of page

  7. and then select English page it relates to in "Relate this entry to an existing entry". This is very important

  8. Save at bottom of page

  9. Then you can add the translations which are only needed in:

    1. Distributors address

    2. Agents address

    3. Check URL changed

  10. The following need translations in the Transcribe grid
    1. Page title
    2. Introduction copy
    3. Submit for button
    4. Continents and Regions
    5. Address
    6. Telephone
    7. Web
    8. Contact us button text
    9. Form items:
      1. Name:
      2. Your name
      3. Email:
      4. Your email
      5. Your Country:
      6. What country are you from?
      7. Your Region:
      8. What region do you need a distributor for?
      9. Message:
  11. Countries
    1. The search drop downs of Countries are in “Taxonomy” for the master list. This should only be touched if a Country needs adding or re-named. Level 1 users only

    2. To edit the country names for languages go to “Transcribe” and add “Variable” for each one for the language

Forms

The forms all need to be duplicated as per other content. And then pages that require forms need the new translated version adding to the page

FAQ's (Ask us how)

Here you can add all the FAQ's required.

  1. Go to the Ask us how section and add all the question groups that you need. These are likely to be the same as the category
  2. In each group:
    1. Add title for group - this is used for the button on the front end to get to the questions and answers
    2. URL will generate itself
    3. Add all the questions and answers. images can be used but don't use in the question as it will break styling
    4. Add a FAQ description for the question group
    5. Go to "Categories" tab and select category required. Level 2 users can add new categories.
  3. Languages work like all other sections using Transcribe.

 

Image optimisation

Image for test using WebP compression

Test link

Another test link

logo.png - Carlisle Fluid Technology

Expression Engine Help site

Contains a lot of information of CMS but some is very technical and not required

Read More

Our UK office

Carlisle Fluid Technologies, UK

Ringwood Road, Bournemouth, Dorset, BH11 9LH

+44 (0)1202 571111

Other links

Cookies / Market Switch

We have added now "Switches" so that you can choose the market you wish to see.

By clicking the main CFT logo at the top left of the page you can clear the switch (cookie).

Also by clicking the following buttons CFT staff can change the preference of what they are trying to see