Differences

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

--- styles_and_script [2022/12/02 10:53] – removed - external edit (Unknown date) 127.0.0.1
+++ styles_and_script [2023/09/26 08:22] (current) – [Use JS to add a link to the project footer] jsmith
@@ Line 1: / Line 1: @@
+====== Styles and Script ======
+Xerte has been created so that people with no web development knowledge can create web based learning objects.  However, it also provides the ability for those with some web development experience to adapt their Xerte projects, through the use of CSS (Cascading Style Sheets) and/or JavaScript to change the way the Xerte project displays and/or functions.
+The Styles and Script optional properties are available at project and page level.
+If you want to learn more about CSS or JavaScript for web development, there are reliable resources at the following sites.
+  * [[https://www.w3schools.com/css/|https://www.w3schools.com/css/]] - CSS Tutorial
+  * [[https://www.w3schools.com/js/default.asp|https://www.w3schools.com/js/default.asp]] - JavaScript Tutorial
+===== CSS =====
+The aim of CSS is often to apply style changes (such as colour, fonts sizes) across several areas, in fewer steps than having to make those changes manually using the text-editor options.  It can also provide a means to create more space around objects on the page, such as panels or images. There are three ways to add CSS to a Xerte project, to change its appearance.
+  - In the HTML Source of the Page, from any text editor by clicking the HTML toggle button <>.  The changes will apply only to the page to which it is added
+  - In the optional property Styles box:
+    - at project, where the changes will apply to all relevant pages in the project
+    - page level, where the changes will apply only to the page to which it is added
+  - As a separate stylesheet file (saved in .css format), uploaded to the Media Browser, and applied at project level using the Stylesheet optional property.
+===== Script =====
+JavaScript (JS or JQuery) is described as the programming language of the web and can be used to introduce new functions to your project.  This usually requires previous experience or knowledge with programming, although it is possible to find code snippets on the web that can be adapted for use in a Xerte project.  There are two ways to add JavaScript to a Xerte project, to change its functionality.
+  - In the HTML [[source_view|source view]] of the Page, from any text editor by clicking the HTML toggle button <>.  The new function(s) will apply only to the page to which it is added
+  - In the optional property Script box:
+    - at project, where the function(s) will apply to all relevant pages in the project
+    - page level, where the function(s) will apply only to the page to which it is added
+===== Examples =====
+==== Add CSS to make a responsive iframe ====
+  * Add the Styles optional property to your project's page.
+  * Add this CSS code to the Styles box, to create a container class to go around the iframe code: <code css>.container {position: relative;overflow: hidden:width: 100%;padding-top: 56.25%;}</code>
+  * Then add this CSS to style the iframe so that it fits inside the container with full height and width: <code css>.responsive-iframe {position: absolute;top: 0;left: 0;bottom: 0;right: 0;width: 100%;height: 100%;}</code>
+  * In HTML view in your Xerte page text editor:
+    * Paste in the iframe embed code
+    * Surround the iframe embed code with: <code css><div class="container">  </div></code>
+    * Add this class to the iframe code: <code css>class="responsive-iframe"</code>
+  * It should look like this: <code css><div class="container"><iframe class="responsive-iframe" frameborder="0" scrolling="no" src="url"></iframe></div></code>
+==== Add CSS to format the Page Timer ====
+  * Add the Styles optional property to your project's page.
+  * Add this CSS code to the Styles box, to format the timer.  You can adjust the pixel sizes and colours to suit your project. <code css>#x_pageTimer {position:relative;margin:0px 0px 50px 50px; padding: 20px;border: 1px solid #ffa500;border-radius: 10px;background-color: #ffa500;font-size: 3em;width:450px;}</code>
+==== Use JS to add a link to the project footer ====
+  * Add the Script optional property to your project.
+  * Add this code to the Script box, replacing the "add url here" with the link you want to add: <code javascript>$('#x_footerBlock').append('<a href=“add url here” target="_self"><span style="color:#fff; position:relative; bottom:20px;">Link</span></a>');</code>
+{{tag>pagetype customisation}}