To insert a link which skips to an another page in the website, use the URL button and simply enter the ID of the web page you wish to load. *(find the ID either by a search for CMS Web Pages - open another browser tab to carry out the search - or by editing the site structure - button at top left in website edit more - and looking at hte menu pages which are connected to the CMS Home page)* [](https://docs.heuristref.net/uploads/images/gallery/2026-08/Euiimage.png)
#### Filter The *Filter* widget create a search box (as in the Explore menu) which can be used : - To perform a simple search in the database (for example from a keyword) - To write a query using the Heurist JSON Query Langage (see documentation chapter 7) - To display a Filter builder button to allow your visitors to build their own queries. This widget has to be completed with the *Standard filter results* widget. ##### Filters Tab The *Saved filters* allows you to display a selection of filters previously created and saved using the *Facets Builder* function described in chapter 7 (*Explore* menu), to enable your visitors to search your database by facet. This widget has to be completed with the *Standard filter results* widget. #####  ##### Connect Tab  **Search group:** Name the search realm that the widget belongs to. *By default, all widgets belong to 'search\_group\_1*'. *If you choose to use this feature, do ensure that you type the names of each different search realm **exactly**. Any typo will prevent the feature from working.* **Info directs to** **page**: Use this feature if you wish to direct visitors to a different page on the site when they select a record on the map. **Unique widget id:** A name for the map widget on this page. This feature is only useful if you are using custom Javascript or CSS in your website. ------------------------------------------------------------------------------------------------------------------------- ### Standard filter results This widget allows you to display a Filtered Results pane, displaying the records in your current 'result set'. The current 'result set' is the set of records retrieved by the filter you have most recently applied. (see chapter 7). ##### Setup Tab \[to be described\] [](https://docs.heuristref.net/uploads/images/gallery/2026-07/BHrimage.png) ##### Controls tab \[to be described\] [](https://docs.heuristref.net/uploads/images/gallery/2026-07/UXWimage.png) ##### Images/blog tab \[to be described\]  ##### Messages Tab \[to be described\] ##### [](https://docs.heuristref.net/uploads/images/gallery/2026-07/YRSimage.png) The messages accept fairly basic html such as <b> <i> <u> They can also use simple styles such as: <p style="text-align:center;width:98%;border:2px solid green"> Please make a selection on the left</p>We recommend spacing the messages down from the top and in from the left using simple inline CSS for a more attractive appearance. They should only be left in teh default position when space is at a premium.
##### Connect Tab \[to be described\]  #### Custom report The *Custom Report* widget lets you display the record selected in the results list in the form of a a custom template that allows you to display the results of a search in the desired format (see chapter 8a : the custom report template must first be built using the editor available in the Record view pane, via the “Report” tab.) ##### Setup Tab \[to be described\]  ##### Tools Tab \[to be described\]  ##### Messages Tab \[to be described\]  ##### Connect Tab \[to be described\]  #### Table format The *Table format* widget lets you display the results of a query in a table format. ##### The Table Tab \[to be described\]  ##### Messages Tab \[to be described\]  ##### Connect Tab \[to be described\]  \---------------------------------------------------------------------------------------------------- ### Map and Timeline There are many options for controlling the appearance and functionality of the map widget.  ##### Controls Tab *General behaviours:* - - Show timeline: Choose whether to include the timeline at the bottom of the map - Markerclusters: Choose whether records clump together when the map is zoomed out (recommended) - Show rollover: Should tooltips appear when users hover over buttons on the map? - Allow modify symbology: Enable custom symbology (only relevant if using a Map Document) - *Controls to* *show*: - Legend: Allow visitors to change the base map, and turn on or off any result sets or map documents currently affecting the map. The legend appears in the top right corner of the map. Other controls appear down the left hand side. - Bookmark: Allow visitors to drop pins on the map - Geocoder: Allow visitors to search for places on the map - Print: Allow visitors to print an image of the map - *Visible in Legend:* If you have enabled the legend under *Controls to Show*, then you can choose which controls are available in the legend here. - *Expand at start* - *Zoom limits:* Prevent users from zooming too far in or out on the map. ##### Layers Tab  **Default global base map:** Choose the 'basemap' that is used to create the image of the earth's surface. Heurist comes with many base maps. Advanced users can apply 'filters' to the base map to e.g. invert the colours or make the map sepia. **Superimpose map document:** Select a Map Document from the database to govern the appearance of the map. ##### Infobox Tab  **Click map item for info:** You have three options for how record data will be displayed when a record is clicked on the map. **Map info popup format:** If you don't wish to use the default format, you can define an alternative format using Heurist's [Custom Report builder](https://heuristref.net/h6-alpha/Heurist_Help_System/view/588). If you do this, you will probably wish to change the **Map popup size** using. ##### Cluster tab [](https://docs.heuristref.net/uploads/images/gallery/2026-07/JfTimage.png) ##### Connect Tab  **Link to custom style:** If you wish to inject custom CSS into the map, provide the <link> element here. **Search group:** Name the search realm that the widget belongs to. *By default, all widgets belong to 'search\_group\_1*'. *If you choose to use this feature, do ensure that you type the names of each different search realm **exactly**. Any typo will prevent the feature from working.* **Info directs to** **page**: Use this feature if you wish to direct visitors to a different page on the site when they select a record on the map. **Unique widget id:** A name for the map widget on this page. This feature is only useful if you are using custom Javascript or CSS in your website. \----------------------------------------------------------------------------------------------------------------------------- #### Story Map \[TO DO\] \----------------------------------------------------------------------------------------------------------------------------- #### Network Graph \[TO DO\] \----------------------------------------------------------------------------------------------------------------------------- #### Menu \[TO DO\] #### Add record This widget display a button to add contributions to the database : it open a form to fill in, in the same way as in the populate menu. The administrator has to define the Record Type in which the data will be created :  #### Email Us Form The "email us form" widget allows you to add a contact form to your page, so that visitors can email you without you revealing your email address publicly on the internet. The form will send emails to the owner of the database. [](https://docs.heuristref.net/uploads/images/gallery/2026-07/uwIimage.png) [](https://docs.heuristref.net/uploads/images/gallery/2026-07/m4Dimage.png) #### ====13/05/2025 - reprendre ici===== ### **2.2.4. Using CSS (=== Styling**) #### **Adding CSS to your Heurist website** [Publish](https://heuristref.net/h6-alpha/?db=Heurist_Help_System&website&id=39&pageid=673) > [Website](https://heuristref.net/h6-alpha/?db=Heurist_Help_System&website&id=39&pageid=667) Cascading Style Sheets (CSS) is a programming language used to format webpages on the internet. **If you arrange the appropriate authorisation with your server administrator**, then you will be able to write CSS code to adjust the appearance of your website. If you are willing learn some basic CSS, then you will be able to powerfully customise your Heurist site, changing its appearance significantly. If you choose to go further with CSS, you can even introduce animations and mobile-friendly layouts to your site. It can be daunting when you get started with CSS, but the best approach is trial-and-error. Edit the CSS, see how the website looks, then keep tinkering until you get the appearance you want. You can use the developer tools in [Chrome](https://developer.chrome.com/docs/devtools/) or [Firefox](https://firefox-dev.tools/) to explore the structure of your website, and to see exactly how the CSS is applying to it. For a brief introduction to the fundamental concepts of CSS, and links to some useful resources, see our [Publish Menu Tutorial](https://heuristnetwork.org/tutorial-7-publish-menu/#tutorial-walkthrough%7C1). There are five main ways you can incorporate custom CSS into your website. You can: - Add a global stylesheet to the website - Add individual stylesheets to particular webpages - Add custom CSS into a Custom Report (see the Custom Reports [Advanced Usage](https://heuristref.net/h6-alpha/?db=Heurist_Help_System&website&id=39&pageid=737) page). - Add CSS to individual page elements (not recommended) - Import CSS from elsewhere Before we cover these topics, however, you need to know how the custom CSS you write will link up with your website. #### **Controlling how CSS affects your website** A CSS file is made up of a series of **selectors** and **declaration blocks** . The **selector** says which elements of a page you would like to format, and the **declaration block** says what formatting you would like to apply to the selected element. For example, let's say you wanted all paragraphs on your website to have blue text and two lines of space above and below them. You could write the following code: p { color: blue; margin-block-start: 2em; margin-block-end: 2em; } In this example, the selector is p . It will apply to all p tags – i.e. it will apply to all paragraphs. But what if you only want to apply your formatting to some elements? For example, perhaps you are writing an internet novel with two narrators. You want all the paragraphs spoken by Narrator One to be in blue, and all paragraphs spoken by Narrator Two to be in red. To achieve this, you can use CSS classes . Take a look at the code below: p.narrator-one { color: blue; } p.narrator-two { color: red; } In this example, we use a period "." to select only paragraphs that have a certain class. "p.narrator-one" selects all paragraphs with the class "narrator-one", and "p.narrator-two" selects all paragraphs with the class "narrator-two". You can actually use a class selector on its own. In this case, it will have a slightly different meaning: .narrator-one { color: blue; } This example will select all elements with the class .narrator-two, whether they are paragraphs or divisions or headings or any other element. Though this particular example will only have an effect if the element contains some text, since the 'color' declaration only affect the colour of text. There are different CSS declaration for the colour of the element's border or background. If you just want to style one particular element on a page, you can select it by id using the hash "#" symbol. For example: \#my-special-element { border: solid green 5px; } This will select the element on the page with the id 'my-special-element', and give it a green border 5 pixels thick. If you want to be more specific, you could also write something like h1#my-special-element, which would select just the heading level 1 that has the id 'my-special-element.' We could go into much more depth about CSS selectors and declaration blocks, but if you really want to learn all the details, then you should do one of the many excellent [CSS Tutorials ](https://www.w3schools.com/css/default.asp)available on the internet. The key question here is: #### **How do I assign a class or id to an element on my Heurist website?** **Assign classes** To assign one or more classes to an element on a Heurist page, click on the element in the treeview and open the 'Classes' section. You can add as many classes as you like, seperated by spaces. NB: Obviously this means that class names cannot have spaces in them. The convention in CSS is to replace spaces with hyphens. Hence in the example image, the classes are narrator-one, highlighted-element and blue-background.  **Assign an id or add element CSS (right image)** Every element you insert in the Heurist treeview is given an ID automatically. If you click 'Edit source', you will see the automatically assigned id in the ID field. You can change this as you wish. You will also see a box for applying CSS directly to this particular element. This box is only for special cases – as much as possible, you should use stylesheets that apply to entire pages or entire websites, as described below. **Editing the source (advanced; right image)** If you wish to apply CSS to particular elements *inside* one of the element in the treeview, then you will need to click 'Edit HTML source' under the 'Edit source' heading, and assign classes or an id to the relevant elements directly. There are good explanations about how to [assign a class](https://www.w3schools.com/html/html_classes.asp) or [give an id](https://www.w3schools.com/html/html_id.asp) to an HTML element on W3Schools.  ### **Some useful selectors (advanced)** If you are ambitious, and wish to develop a CSS template that thoroughly formats your whole website, it can be useful to know some of Heurist's key selectors. Click below to expand the list. Useful selectors for Heurist websites **\#main-content:** All Heurist sites by default are packaged into three main div elements. The #main-content element occupies most of the screen, and is where the content of the webpage is loaded. To apply formatting to elements inside #main-content, you can use a [child or sibling selector ](https://css-tricks.com/child-and-sibling-selectors/). For example, the selector #main-content p {/\* some formatting \*/} will apply formatting to all paragraphs *inside* the #main-content division. **\#main-header:** The #main-header element appears at the top of the screen. **NB:** If you wish to change the appearance of the #main-header using CSS, then you are strongly advised to define your own custom header in the 'custom header' field of the website record. Make sure to include all the named elements below (#main-title etc.), if you want Heurist to automatically generate the website's title, menu and so on. **\#main-footer:**The #main-footer element appears at the bottom of the screen. **\#main-logo:** The #main-logo is a div element in the left of the #main-header, which contains the site logo. **\#alt-logo:** The #alt-logo is a div to the right of the #main-header, which contains the site's second logo, if there is one. **\#main-title:** The #main-title div contains an <h1> element with the main title of the site **\#main-menu:** The #main-menu is a div in the #main-header containing an unordered list (a <ul> with <li> tags for each menu item). **.smarty-report:** This class is assigned to the main-content of any custom reports embedded in your site. Any styles that you apply to your website will automatically be applied to custom reports as well. If you would like to define special styles that only apply to items inside a custom report, then you can use the **.smarty-report** selector. E.g. **.smarty-report p {** ***some styles*** **}** would apply to any paragraphs *inside* a custom report, but would not affect paragraphs in the rest of your site. **heurist-searchFaceted-header**. define it in custom css. This is the header which appears above the facet searches #### Where do I put my CSS? As mentioned above, there are five main ways you can incorporate CSS into your website. ##### As a global stylesheet in the website record The best place to put your CSS is in the database record for your website. Any CSS that you place here will be loaded when visitors first visit your site, and will be applied to every page of your website. This allows you to create a consistent look and feel for the entire website, with a coherent colour scheme, fonts, and layout. To add CSS to your entire website, click 'Menu' in the top left of the treeview in the web editor, and then click 'configure website layout'. Go to the 'Advanced' tab, and you will see the textbox where you can type in your custom CSS.  You can also access the website record in the Explore Menu, just like any other record. To find the website record, type 'website' in the searchbox, or filter by Entities in the Explore Tray, and choose 'CMS\_Home' as the Record Type. Any websites you have created will appear as records in the Results Pane.  ##### **As a page stylesheet in a webpage record** You can also create page-specific CSS. This is a good idea when one particular page of your site has a special layout or functionality. That particular page may need a special set of CSS classes, and may have many special elements with particular ids. To add CSS to a particular webpage, click 'Menu' in the treeview of the web editor, and find the relevant page in the treeview. Click the pencil icon to open the database record for that webpage. Under the 'Advanced Customisation' tab, you will find the text field for 'Page CSS'.  As with the website record, you can also locate page records through the Explore Menu. Simply look for the 'CMS Menu Entry' record type, or search for the name of the page you wish to add CSS to.  ##### Add CSS to a Custom Report If you wish to style a Custom Report, then you can add CSS at the top of the report, as described in the Custom Report [Advanced Usage](https://heuristref.net/h6-alpha/?db=Heurist_Help_System&website&id=39&pageid=737) page. ##### Add CSS to a particular element Your final option for writing your own CSS is to use '[inline styles](https://www.w3schools.com/CSS/css_howto.asp)'. There are two ways to do this. As depicted above, when you edit an element of a webpage in the Treeview, you can find a box for 'CSS' in the 'Edit Source' section. Any CSS you insert here will be applied to that element of the page. If you wish to provide inline CSS for elements within the page element (e.g. paragraphs in a textbox), then you can click 'Edit HTML Source', and type the inline styles into the screen. Generally we do not advise this use of CSS. It should only be used when you encounter problems with [specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), and cannot override a global style any other way. ##### External CSS/JS You can also import CSS from an external source, using the 'External Scripts and Styles' field in either the Website record or the record for a particular Webpage. The most likely use case is if you wish to use [Bootstrap ](https://getbootstrap.com/)in your website. If you wish to use this feature, you should certainly get in touch with the Heurist team for more detailed advice. To link to an external CSS or JS to your site, you need to write the relevant html tag in the 'External Scripts and Styles' field. For a CSS file you need to use a link tag. For JS, you need to use a script tag. So, for example, if you wish to use the Bootstrap on your site, you would need to insert something like the following into the 'External Scripts and Styles' field: <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> If you have written CSS on your own machine, and wish to upload the stylesheet, then you can choose to do this as an 'External Stylesheet' using Heurist's 'Manage Files' tool. You may find this more convenient than copying-and-pasting the CSS into the 'Custom CSS' field, particularly if you have mulitple websites using the same CSS in your database. If you wish to take this option, upload the CSS file using 'Manage Files', and then copy-and-paste the URL for the file using the built-in URL-copying tool. Then paste the URL using the below template into 'External Scripts and Styles': <link href=<copied url> rel="stylesheet"> === A REPRENDRE A PARTIR D’ICI !=== ##### Changing header styles <to be written, please contact Heurist team for instructions / assistance> ##### Loading record view or custom format in a panel The aim is to carry out a search, click on a record in the results panel, and display the data for the selected record in a separate panel. This is achieved in two steps: - Add the panel in which you want to display the record view as a *custom report* widget. This is automatically tied (by default) to the search results on the same page; - Set the results panel widget parameters to *Click to view record = disable* and choosing an appropriate record view template in the *Record view template* dropdown (record view format can be either the default format used in the standard interface or any of the custom report formats defined in the Custim format tab of the Explore pages).   **Link/button to pop up edit form** To popup a new record form in a large window rather than a new tab (note that this also makes the record owned by the current user) <a href="#" onclick="{window.hWin.HEURIST4.ui.openRecordEdit(-1, null, {new\_record\_params:{rt:54,ro:'current\_user',rv:'public'}}); return false;}" **Running Javascript** To avoid the risks of out-of-control websites, this requires authorisation by the system adminstrator. Contact the system adminstrator / Heurist team to have your website added. **Editing pages in standard edit form** Although it is possible to edit the content of a web page directly in the standard Heurist record edit form, we recommend editing it within the CMS editor, as this provides additional capabilites including the insertion of images and database widgets (filters, visualisations and layouts).  However direct editing in the standard data entry form can be useful if you are only dealing with entering text or fixing up text in existing records. # FAQ ## \[Custom style for Standard Record view ?\] This issue can be resolved by setting custom styles for desired elements. I've added the following styles for your page: .heurist-widget{ font-size:18px !important; } .recordTitle{ font-size:20px !important; } All font-size are relative to body font size Font-size is being taken from CSS for custom report widget  20px 10px If it is not defined it takes font-size from user preferences If both values above not defined it takes body.popup.font-size from h4styles.css 11px ##### Examples of how to lay out a web page using DIVs ##### Heurist blog page (with widgets removed) Defines lefthand panel for saved filters or search widget and rfull height righthand panel for blog entries (a resutkls list in full content mode) <div style="**position:absolute;left:5px;width:315px;height:100%**"> <p style="padding:0 5px;"></p> <div … style="**position: absolute;top:70px; bottom:5px; width: 315px;**"… > </div> </div> <div … style="**position: absolute; border: none; left:322; right:0;top:0;bottom:5px**"… > </div> #### Cardinal view layout <div id="cardinal1" style="background: white; position: relative; border: 1px solid gray; height: 100%; width: 100%;"> <div id="westpane">WEST</div> <div id="centerpane">CENTER</div> <div id="eastpane">EAST</div> </div> <div id="mywidget\_2203" class="mceNonEditable" data-heurist-app-id="heurist\_Cardinals"> {"container":"cardinal1", "tabs": {"west":{"id":"westpane","size":"300","minSize":"150"},"center":{"id":"centerpane"},"east": {"id":"eastpane","initClosed":true}}} </div> #### **Strategy** 1. Create the widgets you need without worrying too much where they are located 2. Open the page in source edit and copy the source to a text editor such as notepad 3. Return to WYSIWYG and add Cardinal layout widget 4. Open source editor again and add the widgets within the cardinal layout divs, for example: <div id="mywidget\_6801" class="mceNonEditable" style="width:100;heigth:100;border: 1px solid gray;" data-heurist-app-id="heurist\_Cardinals">{"container":"cont","tabs":{"west":{"id":"west","initClosed":true},"center":{"id":"center"},"east":{"id":"east","size":300,"minSize":200}}}</div> Parameters for each panel can be found here https://plugins.jquery.com/layout/ Most important are: size, minSize, maxSize, resizable, closable, initClosed - Any link on the page with parameters "id" (for the website) and "pageid "(for a menu-page) will navigate to the desired page without reloading. <a href="?db=abc&website&id=123&pageid=456">Open page 456 of website 123</a> - Website URL with &pageid=xx will init this page on load - Loaded page reflects in URL #### Table View widget - There is global variable datatable\_custom\_render - In custom js filed assign render function to this variable datatable\_custom\_render = function(data, type) { if (type === 'display') { return '<span style="color: red; font-style: italic;">'+ data + '</span>'; } return data; }; - In widget properties assign this variable for desired column {"columns": \[{ "data":"rec\_ID","title":"ID"},{"data":"1","title":"Title","render":datatable\_custom\_render}\]} It is possible to define a particular function for every column. In this case define this variable as array of function datatable\_custom\_render=\[foo1{}, foo2{}, foo3{}\] and refer them on “column” by index: "render":datatable\_custom\_render\[2\] Load arbitrary style files To enable bootstrap styles - Define 3 external files to be added to page (in field 2-939) <link rel="stylesheet" type="text/css" href="[https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css"/](https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css%22/)> <link rel="stylesheet" type="text/css" href="[https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/](https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css%22/)> - Define “classes” parameter for widget options {"classes":"table table-striped table-bordered","columns": \[{ …... #### ==== à relire ==== ##### Treeview Navigation widget This is an extension of the Navigation widget. Now it has 3 modes: horizontal, vertical and treeview. It loads a page depending on “target” field 1. “Inline” with usage of target field from menu/page record. By default this is #main-content - page will be overloaded 2. “Inline into #page-content div” (target field from menu/page record will be ignored). You have to add <div id=”page-content”></div> next to widget div. In order they will be next to each other either use table or 3. Float:left for menu widget and display:inline-block for page-content. Or display:inline-block for both <div id="mywidget\_879" class="mceNonEditable" style="background: none; position: relative; border: 1px solid green; height: 500px; width: 200px; float: left;" data-heurist-app-id="heurist\_Navigation">{"menu\_recIDs":"1092,1091,1090","use\_next\_level":false,"orientation":"treeview","target":"inline\_page\_content","init\_at\_once":true,"search\_realm":"sr1"}</div> <div id="page-content" style="display: inline-block; width: 400px; height: 500px; border: 1px solid red;"> </div> - “Popup” (target field from menu/page record will be ignored). - Heurist sanitises content to remove javascript which users migth have inserted in html, for security reasons. You can disable this by listing the name of the database in ..../HEURIST/js\_in\_database\_authorised.txt Example: // Sep 2019: This file lists databases on this server which may include JS code in the CMS Home Page or CMS Menu records // All other databases are excluded from executing such code. Order is unimportant. balipaintings ExpertNation etc. - The register dataset link on the Discover page is still doing nothing (Chrome, logged in) TinyMCE erases all javascript from elements. So the only opportunity to assign event listeners is in custom js field. The same issue for Login on mapspaces. We need to document the way to do this based on the JS in TLCMap\_Clearinghosue website - Make a link (or button) popup a new record form in a large window rather than a new tab. Note that this also makes the record owned by the current user. <a href="#" onclick="{window.hWin.HEURIST4.ui.openRecordEdit(-1, null, {new\_record\_params:{rt:54,ro:'current\_user',rv:'public'}}); return false;}" rel="noopener"> - Besides storing page content in database fields, we have an opportunity to load content for site and pages either from uploaded html files or as smarty output. CSS is responsible for colors and positions only. All other properties are set via widget options, although we define some color/appearance styles per every widget (border, background). I believe it would be better to apply our color scheme dialog for CMS website. I’ve added DT\_SYMBOLOGY field to CMS\_HOME in Heurist\_Core\_Definitions - need to synchronise CMS\_HOME structure for existing databases (prior to ~21 Nov) using Structure > Browse templates. So user can set these colors via color scheme dialog. In summary, the style of the website is defined through: 1. Color scheme per CMS website - defined in color scheme dialog; 2. Widget options - defined in widget properties dialog; 3. Widget css - position styles (and optionally special color scheme) - defined in widget properties dialog; 4. Header elements (#main-xxxx) position/visibility and optional colors - defined in “website css” field in “CMS home record”. Use “heurist-header” class for CMS header. Parameter “style” for map widget layout\_param. For example: "style":{"color":"#00ff00","fillOpacity":0}. It takes precedence over style defined in 1) top most mapspace 2) user preferences Further documentation is in the header of websiteRecord.php \#main\_header.ent\_header is hardcoded in websiteRecord.php. It has the following elements \#main-logo - content defined via field "Site logo" (99-51.2-38). On click it reloads main page \#main-logo-alt - content defined via field "Supplementary logo image" (99-51.2-926) \#main-title>h2 - field "Website title" (99-51.2-1) \#main-host - information about host and heurist. Content defined in Heurist settings \#main-menu - generated based on linked Menu/Page records (99-52) \#main-pagetitle>.webpageheading - loaded Page title "Menu label" (99-52.2-1) - Header and menu colour colour. Top level menu takes color from #main-header \#main-header{ background:rgb(112,146,190); } - Getting a logo on the top right of a generated web page using CSS: \#main-logo-alt {float:right; display:block !important; min-height: 73px; min-width: 130px; background:url('./?db=johns\_hamburg&file=0b7475713789fb09e30334c7ae8e094b32e6bd71'); margin: 7px 4px 0 0; background-size: contain; } - Default layout for Heurist CMS web site consists of 3 divs with absolute positions main\_header.ent\_wrapper main\_header.ent\_header #main\_header main\_header.ent\_content\_full #main-content-container Main setting for these elements is height of header. To change it set: main\_header.ent\_header{height:180px} .ent\_content\_full{top:190px} HEADER: \#main\_header.ent\_header is hardcoded in websiteRecord.php. It has the following elements #main-logo - content defined via field "Site logo" (99-51.2-38). On click it reloads main page #main-logo-alt - content defined via field "Supplementary logo image" (99-51.2-926) #main-title>h2 - field "Website title" (99-51.2-1) #main-host - information about host and heurist. Content defined in Heurist settings #main-menu - generated based on linked Menu/Page records (99-52) #main-pagetitle>.webpageheading - loaded page title "Menu label" (99-52.2-1) You may overwrite default styles for these elements in field "Website CSS" (99-51.99-46). Background image for #main\_header is defined in field "Banner image" (99-51.99-951). CONTENT: \#main-content-container.ent\_content\_full cosist of one element #main-content This element is emptied and reloaded for every page of website. Its content is arbitrary and defined via CMS editor or direcееly via record editor in field "Website home page content"/"HTML content". (2-4) After load, Heurist invokes window.hWin.HAPI4.LayoutMgr.appInitFromContainer( document, "#main-content" ) This method replaces all div elements with attribute data-heurist-app-id to appropriate Heurist widgets (search, map, result list etc) There are 2 fields per menu/page record "target css" and "target element". They are reserved for future use. At the moment page content is always loaded into #main-content and applied general Heurist color scheme unless the style is overdefined for particular widget. Content of website can be defined as custom smarty template in field 99-51.2-922. In this case designer has to define at least one element with id #main-content. Element with this name will be used as layout container for widget initialization. All other elements (#main-xxx) are optional. ##### INITIALIZATION workflow: On server side: 1. It loads Home page record 2. If there is DT\_POPUP\_TEMPLATE field, it executes smarty template, otherwise page html structure and cotent of #main-header is generated in websiteRecord.php On client side 1. HAPI initialization, DB defintions load -> onHapiInit -> onPageInit 2. onPageInit: init LayoutMgr, init main menu in #main-menu element 3. loadHomePageContent(pageid): Loads content of page into #main-content and calls widget initialization width LayoutMgr.appInitFromContainer 4. If database configuration permits only: After widgets initialization it loads javascript (field 2-927) and incapsulate this code into afterPageLoad function. The purpose of this script is additional configuration of widgets on page (that can not be set via cms editor) - mainly addition of event listeners. ToDo: This will need an explanation of how to set styles of target element - please could you give me a couple of examples here that I can expand upon: For popup use can specify jquery dialog options: width:400px;height:200px;title:"Kuku";resizable:true;position:{ "my": "left top", "at": "left+100 top+200"},[modal](https://api.jqueryui.com/dialog/#option-modal) [draggable](https://api.jqueryui.com/dialog/#option-draggable) Position is relative to window. User can define “of” param { "my": "left top", "at": "left+100 top+200", of:”#id-of-element”} css for content: background:red;font-size:4em and others For non-pop this is usual css. After loading the different content to the same container, the original style will be restored. Target style and popup option are applied on publishing only. In CMS editor it is difficult to cope with popups. ----------- Open websiteRecord.php. If main page is not generated via smarty template the structure of page is defined in this php script: main-header with elements: main-logo, main-title, main-host, main-menu, main-pagetitle And container for current page main-content. All other style selectors (such as .hie-result-list) are defined in tinymce editor and can vary from page to page. If using a custom report (Smarty report), none of these selectors is applicable since user can define their own custom website with arbitrary html elements. # === à relire (fin)=== For detailed instructions and tips on configuring a website, please refer to the top level **CMS websites** menu entry. Heurist is tailored to publish data in the form of a website, using its core functions to present and organise data for the public. The website editor screen consists of a **Website editor** panel on the left, and the current page being edited (**"This page"**) on the right. ##### **Editing this page** ##### Applying CSS The website can be styled through CSS files which may be stored in Heurist uploaded files, accessed through records containing uploaded files <check>, placed within custom reports or entered in the custom CSS fields of the website definition record (CMS\_Home)