Xerte Community Documentation

User Tools

Site Tools

Trace:
bootstrap

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
bootstrap [2025/01/23 08:36] – [Project: Optional Properties] jsmithbootstrap [2025/02/19 14:55] (current) – [Bootstrap] jsmith
Line 3: Line 3:
 The** Bootstrap Template** enables you to create a simple website, which you could use, for example, to organise and present learning materials for a course or course module.  If you are able to author a range of page types using **Xerte Online Toolkit **(XOT), then using the Bootstrap Template should be fairly easy, as many of the basic principles are the same. Many of the resources created by the Xerte community have been produced using the Bootstrap Template. The** Bootstrap Template** enables you to create a simple website, which you could use, for example, to organise and present learning materials for a course or course module.  If you are able to author a range of page types using **Xerte Online Toolkit **(XOT), then using the Bootstrap Template should be fairly easy, as many of the basic principles are the same. Many of the resources created by the Xerte community have been produced using the Bootstrap Template.
  
 +:!: **New in 3.13**  You can create a Simple mode for Bootstrap using a sub-template, in the same way as you can for XOT.  This has to be set up through the management.php page. \\ [[central_templates_management.php| More information on sub-templates]].
 ===== Example demo ===== ===== Example demo =====
  
Line 46: Line 47:
 | Disable Theme url | If you set access to Public in the Project Properties a Learning Object's theme can be overridden __in the browser__ by adding a url parameter (i.e. a string of characters) to the url.  For example, this url parameter, //&theme=flatblue// , changes the theme to the Flat Blue theme. The theme can only be changed to one of those available in the host installation. The theme url parameter to use, when changing a theme by this method, is shown in each theme's description in the Project Settings, and is often shorter and not the same as the display name of the theme. However, as an author you can tick this optional property, if you wish, to disable this feature. This stops learners and other users changing the theme you have chosen. | | Disable Theme url | If you set access to Public in the Project Properties a Learning Object's theme can be overridden __in the browser__ by adding a url parameter (i.e. a string of characters) to the url.  For example, this url parameter, //&theme=flatblue// , changes the theme to the Flat Blue theme. The theme can only be changed to one of those available in the host installation. The theme url parameter to use, when changing a theme by this method, is shown in each theme's description in the Project Settings, and is often shorter and not the same as the display name of the theme. However, as an author you can tick this optional property, if you wish, to disable this feature. This stops learners and other users changing the theme you have chosen. |
 | Footer | Hides the footer, allows you to customise the footer, and change the footer background colour. | | Footer | Hides the footer, allows you to customise the footer, and change the footer background colour. |
-| Full Screen Button... | This property is only visible if you have selected **Fixed Size** from the **Display Mode** drop-down in the core properties for the project (the toolbar button that toggles between full screen and fixed size is now hidden by default and will only be shown if the **Display Mode** is set to **Fixed Size**).  You can customise the icon and the text displayed on mouseover for both **Fixed Size** and **Full Screen**.:?: //Delete, only applies to XOT?// | 
 | [[bootstrapprojop_glossary|Glossary]] | Adds a table to the root page of the project, where terms and definitions can be added. Wherever these terms are used in the project they will be highlighted by a dashed underline. Hovering the mouse over the term will reveal a tooltip with the definition.  An icon will also be added to the footer of the project.   The icon can be customised, and the text of the tooltip can be edited.  Individual page types have the optional property to 'Disable Glossary' where this support would interfere with student activity. | | [[bootstrapprojop_glossary|Glossary]] | Adds a table to the root page of the project, where terms and definitions can be added. Wherever these terms are used in the project they will be highlighted by a dashed underline. Hovering the mouse over the term will reveal a tooltip with the definition.  An icon will also be added to the footer of the project.   The icon can be customised, and the text of the tooltip can be edited.  Individual page types have the optional property to 'Disable Glossary' where this support would interfere with student activity. |
-| Header Icon/Logo... | Provides the ability to upload an image to display (for example as a logo) in the project header.  The image dimensions should be small.  The image can be hidden/unhidden and positioned left or right in the header. |+| Header... | Provides the ability to upload an image to display (for example as a logo) in the project header.  The image dimensions should be small.  The image can be hidden/unhidden and positioned left or right in the header. |
 | JavaScript Libraries | Enter JavaScript library URLs in the table, with each URL in a new row, or upload a CSV file. | | JavaScript Libraries | Enter JavaScript library URLs in the table, with each URL in a new row, or upload a CSV file. |
 | Lightbox... | By default, clicked images will open in a lightbox (i.e. a pop up that overlays the main page). Use these properties to turn the lightbox functionality on/off for the whole project. A lightbox property is also available on each page.  You can also add a caption above or below the image. | | Lightbox... | By default, clicked images will open in a lightbox (i.e. a pop up that overlays the main page). Use these properties to turn the lightbox functionality on/off for the whole project. A lightbox property is also available on each page.  You can also add a caption above or below the image. |
 | Metadata... | Course: Label indicating the course this learning object is part of, used to create meta data in SCORM objects. This is also stored in xAPI events.\\ Module: Label indicating the module/subject of this learning object, used to create meta data in SCORM objects. This is also stored in xAPI events. | | Metadata... | Course: Label indicating the course this learning object is part of, used to create meta data in SCORM objects. This is also stored in xAPI events.\\ Module: Label indicating the module/subject of this learning object, used to create meta data in SCORM objects. This is also stored in xAPI events. |
-| Navigation bar | The Navigation bar may display as a bar across the screen, or a hamburger dropdown on smaller screen sizes. You can position the Navigation bar above or below the header, and change the colours of the background, the text and the text on hover. |+| Navigation bar... | The Navigation bar may display as a bar across the screen, or a hamburger dropdown on smaller screen sizes. You can position the Navigation bar above or below the header, and change the colours of the background, the text and the text on hover. |
 | Notes | Your notes for the project. These are not shown in the live project. | | Notes | Your notes for the project. These are not shown in the live project. |
 | Print Button | Adds a print button to the Navigation bar.  Pages can still be printed via the browser controls if this button is not added. | | Print Button | Adds a print button to the Navigation bar.  Pages can still be printed via the browser controls if this button is not added. |
-| Progress bar | Adds a graphical progress bar (with optional page counter) to the footer of the project.  This shows the percentage of the project completed as the user clicks through the project. | 
-| [[project_introduction|Project Introduction...]] | Adds a lightbox which can be displayed automatically when the Learning Object is launched by the learner, or opened by clicking on an icon in the footer or sidebar.   The icon can be customised, and the text of the tooltip displayed on mouseover of the icon can be edited.  This lightbox can be used to provide an introduction to the Learning Object. | 
 | Script | Provides the ability to add custom JavaScript to the project. | | Script | Provides the ability to add custom JavaScript to the project. |
 | Search... | This allows learners to search the Bootstrap, using filters.  Here you need add the Categories for the filters, and the Options in those Categories. You can also add some text, for example an explanation of the Search function, or instructions for using it.  You then need to allocate pages or sections in those pages to the Categories and Options, using the Filter Categories optional property at page and section level.   The [[https://xot.xerte.org.uk/USER-FILES/81-xerteproject-site/media/Bootstrap%20Search%20Documentation.pdf|Bootstrap Search Guide]] provides more information.  | | Search... | This allows learners to search the Bootstrap, using filters.  Here you need add the Categories for the filters, and the Options in those Categories. You can also add some text, for example an explanation of the Search function, or instructions for using it.  You then need to allocate pages or sections in those pages to the Categories and Options, using the Filter Categories optional property at page and section level.   The [[https://xot.xerte.org.uk/USER-FILES/81-xerteproject-site/media/Bootstrap%20Search%20Documentation.pdf|Bootstrap Search Guide]] provides more information.  |
Line 137: Line 135:
 Next you need to add content to the page; there are 8 different types of content you can add.  Click on the headings below to open up information about each one. Next you need to add content to the page; there are 8 different types of content you can add.  Click on the headings below to open up information about each one.
  
-**New in 3.13.** The automated footer is a sticky footer and will be shown at the bottom of the browser window on pages containing little content. If you don't require a footer, it can be hidden using the Project > Optional Properties > Footer setting.+:!: **New in 3.13.** The automated footer is a sticky footer and will be shown at the bottom of the browser window on pages containing little content. If you don't require a footer, it can be hidden using the Project > Optional Properties > Footer setting.
  
 ++++New Text...| ++++New Text...|
bootstrap.1737621410.txt.gz · Last modified: 2025/01/23 08:36 by jsmith