Differences

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

--- styles_and_script [2022/12/08 10:39] – [Add CSS to make a responsive iframe] Added CSS codeblocks syntax tadachi
+++ styles_and_script [2023/09/26 08:22] (current) – [Use JS to add a link to the project footer] jsmith
@@ Line 24: / Line 24: @@
 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 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 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
@@ Line 45: / Line 45: @@
   * 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.
+  * 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>
-    * #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;}
 ==== 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:
+  * 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>
-    * %%$('#x_footerBlock').append('<a href=“add url here” target="_self"><span style="color:#fff; position:relative; bottom:20px;">Link</span></a>');%%
+{{tag>pagetype customisation}}