skip to Main Content

(This page is unreferenced but not secret.)

Here we explain only some things we deem either interesting or less than obvious.

ASIBA site editors are encouraged to edit this page, and add things that are less than easy to master — so that future editors have an easier time.

Background

This website is built using the open-source WordPress Content Management System (CMS).

  • Open source: means it’s free
  • CMS: an environment/application that enables non-computer experts to easily create, modify and organise website content via a browser
  • WordPress: one of several globally well-used CMSs.

A CMS gives you control over your own content!

According to Wikipedia, “WordPress was used by more than 23% of the top 10 million websites as of January 2015”. That is a lot, irrespective of what “top” might mean in this context. Other well-used and respected CMSs include Joomla, Drupal and Typo3.

This website uses a customised off-the-shelf purchased theme. A theme here means a design, including structural elements like the content being dynamic and fluid. While viewing ASIBA site content on your computer browser, try changing your browser window width and see what happens

The theme used here is called TOTAL.

This site is

  • optimised also for mobile devices like smart-phones
  • intentionally simple in look and structure: less is often more.

Levels of website users

The system defines various user Roles, as follows

  • Casual visitor: somebody who visits the site, but who is not logged in
  • Subscriber: can additionally (to visiting the site) see privileged contend, which is material that a casual visitor cannot see
  • Contributor: can write and manage their own posts but cannot publish them
  • Author: can publish and manage their own posts
  • Editor: can publish and manage content including the content of other users
  • Administrator: has additionally access to all the administration features within the site.

Most site editors will be — well — Editors.

Administrator rights are needed to manage the menus, and to add new users, which an Editor cannot do. The Administrator interface is more cluttered/complex than that of the Editor. Furthermore, using the Administrator role is potentially dangerous because it is easy to change something by mistake.

So, log in using an Editor account, unless you actually need the Administrator rights.

Editing this website

Important: [carriage return] is for a new paragraph; [shift]+[carriage return] is for a new line. (This works also for other things like a Word document.)

Nice typography: a short dash “-” is different to a long dash “—”. The short dash is used either for a double-barrelled word, or for “to” like in 12-15km/h. The long dash is for “air” in a sentance, or instead of a comma — like here for example.

Note the thin black menu stripe at the top of this page…

  • On the left you have some site menu items: rollover ASIBA and you have the option to see the site dashboard, which you can try. To get back (from the dashboard to the site), rollover ASIBA again, and you will see “Visit site”.
  • On the right is your personal account “Howdy, XYZ”: from here you can edit your account details — and from here you can also change your account password. (Your password should always be difficult and not obvious. Your spouse’s name or any first name, or a date of birth for a password is not difficult, and a better password is something like “d49&hT=?!.Q)“.

Editing photos: in February 2022 our favourite online image editor is edit.photo — use this for image cropping, resizing and saving for the web.

Creating a new Page (or Post)

Really easy: roll over “+ New”, and you will see this…

new

  • Post: an item of content that goes automatically into the news section when published.
  • Page: normal non-news content.

You can create a page to test your skills, and if you mark it as for logged in users only, and do not create a menu item, the page is yours to play with (with little risk of being an interference).

So try: go »New »Page — and an edit screen opens, including the rich-text-editor window (the space with the icons above it). Most of what you see is obvious, and here we explain just some items which might not be obvious.

  • Until you have more experience, ignore the blue “BACKEND EDITOR / FRONTEND EDITOR” buttons.
  • To see more icons above the rich-text-editor window, click here — this is the most common thing missed with new users (!)move
  • To activate “distraction free” mode, click heredistractions
  • You can see what each button does by rolling over, and reading the explanatory texts.
  • On the rest of the page all the default actions are fine, and what you will use most of the time.
  • When creating a hyperlink (text that links to a new webpage), mark “Open link in a new tab” if this is a link to a page outside of the website.
  • Click on “Paragraph” to see the levels of headings (titles) — you will most often use Headings 2 and 3. Heading 1 is already used for the page title. Mark the text that you want as a heading before you click “Paragraph”h
  • To inset a down-loadable document like a PDF, put your cursor to where you want the link on the page, then click on Add Media (left, just above the icon bar), and add the say PDF by either dragging into the window or navigating to the file; then in the info window make the “Title” the text that you want, like “Click here to download the ABC document”; then click on the button “Insert into post”, and there you have it. Better still is to have this link open in a separate window, so roll over the link and press the pencil icon, and this opensopen…and click on “Open link in a new window/tab, shown above
  • To insert an image into a text without using the more complex Visual Editor, simply click on the Add Media button; upload the image to the media library (same way as for a PDF in the above), make any size adjustments you want in the info menu, and click the “Insert…” button
  • To have a document thumbnail image click-able for opening a PDF — for example for a handbook, one way to accomplish this is to
    1. create an image of the front page in an image editor like Photoshop (or if lazy just create a screenshot of the front page)
    2. upload the PDF to the server via »Media »Add new; copy the media item URL, as you will need this below
    3. go to the page where you want to place this content; add the thumbnail image for example with “Single Image” in the visual composer; in the “General” settings set the “On click action” to “Open custom link” and the “Link Target” to a “New window” — and set any other settings like for a border and for rollover.
    See this example in »ASIBA »Documents »OIB Handbook
  • Etc.
  • One makes a page in its entirety before translating.
  • When you are done, click the “Publish” button, and then the “View page” button near the top.

In time, click on-screen options top right…

so

…and remove all panels that you do not actually use. This reduces clutter, and makes the page load more quickly.

Creating a new Post (new news item)

This is the same as for making a new Page, except that you go »New »Post instead.

One extra setting: you should designate the Post category(s).

cat

 

New Post Categories created since this website went live include “job vacancy” and “masterclass”.

Creating a new Masterclass

To create a new upcoming Masterclass, an easy way is to duplicate an existing upcoming masterclass and then overwrite the duplicate to make a new Masterclass. By duplicating something that exists and works, you already have the correct settings.

Then…

  • Go » Dashboard » Posts » All Posts
  • Roll over the title of an existing upcoming Masterclass and click on “Duplicate This”
  • You will see another Post entry shown as “— Draft”: roll over this Draft Post title and click on “Edit”
  • The editing window of this new Masterclass opens — so overwrite:
    — note that in the title a “<br>” means new line; the title should be short
    — just under the title update the Permalink by clicking on “Edit”: the permalink should start as “masterclass” and then a short summary title, all lowercase, no spaces, for example “masterclass-careers-in-cyber”
    — update the main content, including having a correct link for the “Click here to register”
    — remember to add a “Featured image”: see bottom right; the feature image should be such that it works also with a square crop
    — when done “Publish”; then check.

Notes: the Category “masterclass” makes this a Masterclass, this being a Post like any other. The Tag “upcoming” tells the system that this event has not yet occurred. When a Masterclass has just occurred, you should remove the “upcoming” tag and the “Click here to register” button.

The Masterclasses are listed in the sequence of their published date. If you want to change a sequence then you need to edit (i.e. manipulate) publishing dates.

Editing an existing Page or Post

This is really easy: just navigate to the page that you want to change, and (from the top menu) click “Edit Page” or “Edit Post”.

Using the Visual Composer

You use the visual composer for more complex page setups, like columns, and for including more complex media, like slide-show or embedded video.

A simple way to start understanding how the visual composer works is to edit a page (without actually changing anything) that contains columns or media.

See some examples…

Good practice: always encase content in a row.

If you want similarly structured/styled content on a page, just clone a row. Consider the list of schools (to cite just one example): each school is in a row. if you want to add another school, just clone the row of an existing school, and then over-write the content.

Translating and Page or Post into French

Once a Page or Post is fully built-in English, to “convert” to French:

Near your browser space top right, mark “Duplicate”, and make sure that “Duplicate uploaded media to translations” is not switched off…

dup

…on marking “Duplicate”,  a “Duplicate” button appears just below. Click this button.

Then open the French version of the Page or Post from the flag on the top menu — roll over the English flag and then click on the French flag…

Screen Shot 2015-09-17 at 19.26.54

Then the French page opens. Click on the button “translate independently”.

Then simply overwrite the English texts into French.

And do not forget to save the page.

Administrating this website

In this section, we explain functions that only an Administrator can do (and not a site Editor).

We explain how to

  • create a new website user  — like a new Subscriber, Editor, or Administrator
  • edit the website main menu
  • edit the footer and right-side menu zone.

Creating a new user

Simply go »New »User

user

 

Editing the site menu

If the Dashboard (the menu on the left) is open, go to »Appearance »Menus.

If you are browsing the website, simply roll over ASIBA top left and click “Menu” in the drop-down.

To add a page menu item, click on the particular page(s) in “Pages”, and this will insert the page(s) within the “Menu Structure” section.

menu

From the “Menu Structure” section you can simply drag the menu item to its desired position.

When done, do not forget to press the “Save Menu” button.

You might need to empty the server cache in order to quickly see the result: in the top menu bar go »Performance »Empty all caches.

Editing the footer and right-side menu zones

With the dashboard open, simply go »Appearance »Widgets.

Work on the areas Main Sidebar and Footer Columns 1 to 3.


Sic itur ad astra.

Embedding a video from YouTube or Vimeo

This is the video title

Back To Top