{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-guides/sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["tabs","tab"]},"type":"markdown"},"seo":{"title":"CSS Customization","description":"Accelerate E&P application development and protect your innovation by consuming our Data and Domain APIs / Platform APIs.","lang":"en-US","meta":[{"name":"robots","content":"noindex"}],"llmstxt":{"hide":true,"excludeFiles":[]}},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"css-customization","__idx":0},"children":["CSS Customization"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog CSS Customization tutorial demonstrates how to apply CSS (Cascading Style Sheet) rules to the WellLog widget in order to customize the WellLog visualization. The CSS properties section under each class documentation lists all the properties that can be used to customize."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-css-styles","__idx":1},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/CssCustomization/cssCustomization#createWidgetWithCss"},"children":["#"]}," Using CSS Styles"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to customize the WellLog Widget using CSS styles."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { HeaderType as LogAxisVisualHeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { KnownColors } from \"@int/geotoolkit/util/ColorUtil.ts\";\nimport { configureHeaders, createCurve, createTestData } from \"/src/code/WellLog/AdditionalFunctionality/CssCustomization/cssCustomizationCommon.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createWidgetWithCss() {\n  const widget = createWellLogWidget().setAxisHeaderType(LogAxisVisualHeaderType.Simple);\n  configureHeaders(widget);\n  const css = `\n        .geotoolkit.axis.Axis[cssclass=\"indexTrack\"] {\n            tickgenerator-labelformat-type : number;\n            tickgenerator-labelformat-grouplength : 0;\n        }\n        *[cssclass=\"horizontalGrid\"] {\n           tickgenerator-major-tickstyle-color: #5b9bd5;\n           tickgenerator-minor-tickstyle-color: #5b9bd5;\n        }\n        *[cssclass=\"verticalGrid\"] {\n           linestyle: #5b9bd5;\n        }\n        *[cssclass=\"indexTrack\"] {\n           tickgenerator-major-labelstyle-color: #5b9bd5;\n           tickgenerator-edge-labelstyle-color: #5b9bd5;\n        }\n        .geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\n           element-scalefrom-radius : 2;\n           element-scalefrom-linestyle: #DFE0E3;\n           element-scalefrom-fillstyle: #DFE0E319;\n           element-scalefrom-paddingstyle : 2px;\n\n           element-tracking-radius : 2;\n           element-tracking-linestyle: #DFE0E3;\n           element-tracking-fillstyle: #DFE0E319;\n           element-tracking-paddingstyle : 2px;\n\n           element-scaleto-radius : 2;\n           element-scaleto-linestyle: #DFE0E3;\n           element-scaleto-fillstyle: #DFE0E319;\n           element-scaleto-paddingstyle : 2px;\n        }\n    `;\n  widget.setCss(css);\n  widget.addTrack(WellLogTrackType.IndexTrack);\n  widget.addTrack(WellLogTrackType.LinearTrack).addChild([\n    createCurve(createTestData(4500, 10, \"GR\")).setLineStyle(KnownColors.Green),\n    createCurve(createTestData(4500, 10, \"CALI\")).setLineStyle(KnownColors.Orange)\n  ]);\n  return widget;\n}\nfunction createScene(canvas) {\n  const widget = createWidgetWithCss();\n  const plot = new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n  widget.setHeaderHeight(\"auto\");\n  return plot;\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/AdditionalFunctionality/CssCustomization/cssCustomization?section=createWidgetWithCss&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"using-css-styles-with-custom-headers","__idx":2},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/CssCustomization/cssCustomization#createCustomWidget"},"children":["#"]}," Using CSS Styles with Custom Headers"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This WellLog CSS Customization tutorial demonstrates how to customize headers for the WellLog widget and apply CSS rules to customize header display."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { ButtonManipulator } from \"/src/code/WellLog/AdditionalFunctionality/CssCustomization/buttonManipulator.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { AdaptiveLogCurveVisualHeader, Elements } from \"@int/geotoolkit/welllog/header/AdaptiveLogCurveVisualHeader.ts\";\nimport { LogCurve } from \"@int/geotoolkit/welllog/LogCurve.ts\";\nimport { LogAxis } from \"@int/geotoolkit/welllog/LogAxis.ts\";\nimport { CustomLogAxisVisualHeader } from \"/src/code/WellLog/AdditionalFunctionality/CssCustomization/customLogAxisVisualHeader.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { Sections } from \"@int/geotoolkit/welllog/header/AdaptiveLogVisualHeader.ts\";\nimport { createCurve, createTestData } from \"/src/code/WellLog/AdditionalFunctionality/CssCustomization/cssCustomizationCommon.ts\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createCustomWidget() {\n  const widget = createWellLogWidget({\n    \"horizontalscrollable\": false,\n    \"verticalscrollable\": true,\n    \"highlight\": {\n      \"linestyle\": {\n        \"color\": \"#FFFFFF\",\n        \"pixelsnapmode\": true\n      },\n      \"fillstyle\": \"rgba(117, 117,117, 0.2)\"\n    },\n    \"footer\": {\n      \"visible\": true\n    },\n    \"trackcontainer\": {\n      \"border\": {\n        \"visible\": false,\n        \"color\": \"lightgray\"\n      }\n    },\n    \"border\": {\n      \"visible\": false,\n      \"color\": \"lightgray\"\n    }\n  });\n  configureCustomHeaders(widget);\n  widget.addTrack(WellLogTrackType.IndexTrack);\n  widget.addTrack(WellLogTrackType.LinearTrack).addChild([\n    createCurve(createTestData(4500, 10, \"GR\")).setLineStyle(\"#81D4FA\"),\n    createCurve(createTestData(4500, 10, \"CALI\")).setLineStyle(\"#FFF176\")\n  ]);\n  widget.addTrack(WellLogTrackType.LinearTrack).addChild([\n    createCurve(createTestData(4500, 10, \"RHOB\")).setLineStyle(\"#FFFFFF\")\n  ]);\n  widget.getToolByName(\"cross-hair\").setProperties({\n    \"horizontal\": {\n      \"color\": \"#FFFFFF\",\n      \"pattern\": [4, 2]\n    }\n  });\n  widget.setHeaderHeight(\"auto\").setFooterHeight(\"auto\");\n  applyBlackThemeCSS(widget);\n  return widget;\n}\nfunction applyBlackThemeCSS(widget) {\n  widget.setCss(\n    generateBlackThemeCSS()\n  );\n}\nfunction generateBlackThemeCSS() {\n  const DEFAULT_WLW_CLASSES = `\n        *[cssclass=\"horizontalGrid\"] {\n           tickgenerator-major-tickstyle-color: #FFD180;\n           tickgenerator-minor-tickstyle-color: #EFEFEF;\n        }\n        *[cssclass=\"verticalGrid\"] {\n           linestyle-color: #EFEFEF;\n        }\n    `;\n  const DEFAULT_CARNAC_CLASSES = `\n        * {\n          textstyle-font : 11px Roboto;\n          textstyle-color : #FFFFFF;\n        }\n    `;\n  const DEFAULT_CONTAINERS_CLASS = `\n        *[cssclass=\"headerPlotControl\"] {\n           fillstyle: #303030;\n        }\n        *[cssclass=\"footerPlotControl\"] {\n           fillstyle: #303030;\n        }\n        *[cssclass=\"trackPlotControl\"] {\n           fillstyle: #303030;\n        }\n    `;\n  const DEFAULT_INDEXTRACK_HEADER = `\n        .geotoolkit.welllog.header {\n           displayvaluetextstyle-color: #FFFFFF;\n           displayvaluetextstyle-font: bold 12px Roboto;\n           fillStyle: #303030;\n           borderlinestyle: #303030;\n        }\n        .CustomLogAxisVisualHeader {\n           displayvaluetextstyle-color: #FFFFFF;\n           displayvaluetextstyle-font: bold 12px Roboto;\n           fillStyle: #303030;\n           borderlinestyle: #303030;\n        }\n        .CustomLogAxisVisualHeader[cssclass=\"FooterAxis\"] {\n           valuetypestyle: text;\n           headertype: simple;\n        }\n    `;\n  const DEFAULT_LOGCURVE_ADAPTIVE_HEADER = `\n        .geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\n           element-tracking-textstyle-font : bold 14px Roboto;\n           element-tracking-textstyle-color : #FFFFFF;\n           fillStyle : #303030;\n           textstyle-color : #FFFFFF;\n           textstyle-font : 12px Roboto;\n        }\n    `;\n  const EXAMPLE_BY_NAME = `\n        *[name=\"Track # 2\"] {\n           backgroundcolor-color : #5D4037;\n        }\n    `;\n  const EXAMPLE_BY_ID = `\n        *[id=\"AXIS\"] {\n           tickgenerator-major-tickstyle-color: #FFD180;\n           tickgenerator-major-tickstyle-width: 2;\n           tickgenerator-major-labelstyle-color: #EFEFEF;\n           tickgenerator-major-labelstyle-font: 12px Roboto;\n           tickgenerator-minor-tickstyle-color: #EFEFEF;\n           tickgenerator-edge-tickstyle-color: #EFEFEF;\n           tickgenerator-edge-labelstyle-color: #EFEFEF;\n           tickgenerator-edge-labelstyle-font: 12px Roboto;\n        }\n    `;\n  const SCROLL_BAR_CSSCLASS = `\n        *[cssclass=\"headerverticalscroll\"] {\n           fillstyle: darkgray;\n           caretfillstyle: #303030;\n           arrowlinestyle: black;\n        }\n        *[cssclass=\"trackhorizontalscroll\"] {\n           fillstyle: darkgray;\n           caretfillstyle: #303030;\n           arrowlinestyle: black;\n        }\n        *[cssclass=\"trackverticalscroll\"] {\n           fillstyle: darkgray;\n           caretfillstyle: #303030;\n           arrowlinestyle: black;\n        }\n        *[cssclass=\"footerverticalscroll\"] {\n           fillstyle: darkgray;\n           caretfillstyle: #303030;\n           arrowlinestyle: black;\n        }\n    `;\n  const SPLITTER_CSSCLASS = `\n        *[cssclass=\"containersplitter\"] {\n           fillStyle: white;\n           linestyle: white;\n        }\n        *[cssclass=\"tracksplitter\"] {\n           fillStyle: white;\n           linestyle: white;\n        }\n    `;\n  return [\n    DEFAULT_WLW_CLASSES,\n    DEFAULT_CARNAC_CLASSES,\n    DEFAULT_CONTAINERS_CLASS,\n    DEFAULT_INDEXTRACK_HEADER,\n    DEFAULT_LOGCURVE_ADAPTIVE_HEADER,\n    EXAMPLE_BY_NAME,\n    EXAMPLE_BY_ID,\n    SCROLL_BAR_CSSCLASS,\n    SPLITTER_CSSCLASS\n  ].join(\"\");\n}\nfunction configureCustomHeaders(widget) {\n  const header = new AdaptiveLogCurveVisualHeader().setElement({\n    [Elements.ScaleTo]: { \"section\": Sections.Top },\n    [Elements.ScaleFrom]: { \"section\": Sections.Top },\n    [Elements.Name]: { \"section\": Sections.Top },\n    [Elements.Unit]: { \"section\": Sections.Bottom },\n    [Elements.Tracking]: { \"section\": Sections.Bottom }\n  });\n  widget.getHeaderContainer().getHeaderProvider().registerHeaderProvider(LogCurve.getClassName(), header).registerHeaderProvider(LogAxis.getClassName(), new CustomLogAxisVisualHeader());\n  widget.getFooterContainer().getHeaderProvider().registerHeaderProvider(LogCurve.getClassName(), header).registerHeaderProvider(LogAxis.getClassName(), new CustomLogAxisVisualHeader().setCssClass(\"FooterAxis\"));\n}\nfunction createScene(canvas, tooltip) {\n  const widget = createCustomWidget();\n  widget.getTool().insert(0, new ButtonManipulator(widget, tooltip));\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget\n  });\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'), document.querySelector('[ref=\"tooltip\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/AdditionalFunctionality/CssCustomization/cssCustomization?section=createCustomWidget&extract=true","width":"100%","height":"482.5px","style":{"border":"none"}},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"advanced-styling","__idx":3},"children":[{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"#/WellLog/AdditionalFunctionality/CssCustomization/cssCustomization#createModernWidget"},"children":["#"]}," Advanced Styling"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows how to apply complex customizations like the CSS pseudo-class hover and selection styles. Please note that it is necessary to activate the DOM support tool for using hover and highlight."]},{"$$mdtype":"Tag","name":"Tabs","attributes":{"size":"medium"},"children":[{"$$mdtype":"Tag","name":"div","attributes":{"label":"main","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"ts","header":{"controls":{"copy":{}}},"source":"import { HeaderType as LogAxisVisualHeaderType } from \"@int/geotoolkit/welllog/header/LogAxisVisualHeader.ts\";\nimport { TrackType as WellLogTrackType } from \"@int/geotoolkit/welllog/TrackType.ts\";\nimport { Plot } from \"@int/geotoolkit/plot/Plot.ts\";\nimport { PatternFactory } from \"@int/geotoolkit/attributes/PatternFactory.ts\";\nimport { configureHeaders, createCurve, createTestData } from \"/src/code/WellLog/AdditionalFunctionality/CssCustomization/cssCustomizationCommon.ts\";\nimport modernPng from \"/src/assets/images/modern.png?import\";\nimport { createWellLogWidget } from \"/src/code/WellLog/utils/common.ts\";\nfunction createModernWidget() {\n  const widget = createWellLogWidget({\n    \"viewcache\": false,\n    \"indent\": 10,\n    \"highlight\": {\n      \"cssclass\": \"highlight\"\n    }\n  }).setAxisHeaderType(LogAxisVisualHeaderType.Simple);\n  configureHeaders(widget);\n  applyModernThemeCSS(widget);\n  widget.addTrack(WellLogTrackType.IndexTrack);\n  widget.addTrack(WellLogTrackType.LinearTrack).setWidth(150).addChild([\n    createCurve(createTestData(4500, 10, \"GR\")).setLineStyle(\"#81D4FA\"),\n    createCurve(createTestData(4500, 10, \"CALI\")).setLineStyle(\"#FFF176\")\n  ]);\n  widget.addTrack(WellLogTrackType.LinearTrack).setWidth(150).addChild([\n    createCurve(createTestData(4500, 10, \"RHOB\")).setLineStyle(\"#18CEDB\")\n  ]);\n  widget.addTrack(WellLogTrackType.AnnotationTrack).setSelectable(false).setWidth(20).setFillStyle(null).getBorder().setLineStyle(null);\n  widget.addTrack(WellLogTrackType.LinearTrack).setWidth(150).addChild([\n    createCurve(createTestData(4500, 10, \"SP\")).setLineStyle(\"#F4F133\")\n  ]);\n  widget.addTrack(WellLogTrackType.IndexTrack);\n  widget.getToolByName(\"cross-hair\").setProperties({\n    \"horizontal\": {\n      \"color\": \"#FFFFFF\",\n      \"pattern\": [4, 2],\n      \"pixelsnapmode\": true\n    }\n  });\n  widget.getToolByName(\"splitter\").setEnabled(false);\n  widget.getToolByName(\"horizontal-splitter\").setEnabled(false);\n  widget.setHeaderHeight(\"auto\");\n  return widget;\n}\nfunction applyModernThemeCSS(widget) {\n  const css = `\n        * {\n          textstyle-font : 10px Roboto;\n          textstyle-color : #C8C8C8;\n        }\n        .geotoolkit.welllog.header.AdaptiveLogCurveVisualHeader {\n           element-tracking-textstyle-font : bold 10px Roboto;\n           element-tracking-textstyle-color : #C8C8C8;\n        }\n        .geotoolkit.welllog.header.LogTrackHeader {\n           borderfillstyle-style: lineargradient;\n           borderfillstyle-unittype: absoluteCoordinates;\n           borderfillstyle-startpoint-x: 0;\n           borderfillstyle-startpoint-y: 0;\n           borderfillstyle-startcolor: rgba(39, 42, 136, 1);\n           borderfillstyle-endpoint-x: 0;\n           borderfillstyle-endpoint-y: 500;\n           borderfillstyle-endcolor: rgba(39, 42, 136, 0);\n\n           borderlinestyle: null;\n\n           border-visible: true;\n           border-left: true;\n           border-top: true;\n           border-right: true;\n           border-bottom: false;\n        }\n\n        .geotoolkit.welllog.LogTrack {\n           backgroundcolor-style: lineargradient;\n           backgroundcolor-unittype: absoluteCoordinates;\n           backgroundcolor-startpoint-x: 0;\n           backgroundcolor-startpoint-y: 0;\n           backgroundcolor-startcolor: rgba(39, 42, 136, 1);\n           backgroundcolor-endpoint-x: 0;\n           backgroundcolor-endpoint-y: 500;\n           backgroundcolor-endcolor: rgba(39, 42, 136, 0.1);\n\n           clipping : true;\n           borderstrategy: top;\n           border-visible : true;\n           border-borderstyle: VisibleBounds;\n\n           border-linestyle: 1px #C8C8C8;\n           border-left : true;\n           border-right : true;\n           border-top : false;\n           border-bottom : true;\n        }\n\n        .geotoolkit.welllog.LogAxis {\n           tickgenerator-major-labelstyle-color: #C8C8C8;\n           tickgenerator-major-labelstyle-font: 10px Roboto;\n           tickgenerator-major-tickstyle-color: #C8C8C8;\n\n           tickgenerator-minor-tickstyle-color: #646464;\n\n           tickgenerator-edge-labelstyle-color: #C8C8C8;\n           tickgenerator-edge-labelstyle-font: 10px Roboto;\n           tickgenerator-edge-tickstyle-color: #EFFFFF;\n        }\n        *[cssclass=\"horizontalGrid\"] {\n           tickgenerator-major-tickstyle-color: #C8C8C8;\n\n           tickgenerator-minor-tickstyle-color: #646464;\n        }\n        *[cssclass=\"verticalGrid\"] {\n           linestyle: 1px #646464;\n        }\n        .geotoolkit.welllog.LogCurve:hover {\n           linestyle-width: 2;\n           linestyle-shadow-enable: true;\n           linestyle-shadow-blur: 5;\n           linestyle-shadow-offsetx: 0;\n           linestyle-shadow-offsety: 0;\n        }\n        .geotoolkit.welllog.LogCurve:highlight {\n           linestyle-width: 3;\n           linestyle-shadow-enable: true;\n           linestyle-shadow-blur: 10;\n           linestyle-shadow-offsetx: 0;\n           linestyle-shadow-offsety: 0;\n        }\n        .geotoolkit.welllog.LogTrack:hover {\n           linestyle-color: #FFD800;\n           linestyle-width: 2;\n           linestyle-shadow-enable: true;\n           linestyle-shadow-blur: 5;\n           linestyle-shadow-offsetx: 0;\n           linestyle-shadow-offsety: 0;\n        }\n        .geotoolkit.welllog.LogTrack:highlight {\n           linestyle-color: #FFD800;\n           linestyle-width: 3;\n           linestyle-shadow-enable: true;\n           linestyle-shadow-blur: 10;\n           linestyle-shadow-offsetx: 0;\n           linestyle-shadow-offsety: 0;\n        }\n    `;\n  widget.setCss(css);\n}\nfunction addWidgetToCanvasWithBackGround(canvas, widget) {\n  return new Plot({\n    \"canvaselement\": canvas,\n    \"root\": widget.setFillStyle({\n      \"pattern\": PatternFactory.getInstance().createPattern(modernPng)\n    }).setPaddingStyle(10)\n  });\n}\nfunction createScene(canvas) {\n  const widget = createModernWidget();\n  return addWidgetToCanvasWithBackGround(canvas, widget);\n}\nexport { createScene };\n\ncreateScene(document.querySelector('[ref=\"plot\"]'));\n\n","lang":"ts"},"children":[]}]},{"$$mdtype":"Tag","name":"div","attributes":{"label":"css","disable":false},"children":[{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"css","header":{"controls":{"copy":{}}},"source":"\n.cg-tooltip-holder {\n  position: relative;\n}\n\n.cg-tooltip {\n  position: absolute;\n  display: block;\n  padding: 2px 12px 3px 7px;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 13px;\n  background: white !important;\n  opacity: 0.9;\n  color: #333333;\n  border: solid 1px gray;\n  border-radius: 5px;\n  text-align: left;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);\n  border-radius: 5px;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n}\n/* Default setting for tooltip */\n.cg-tooltip-container {\n  position: absolute;\n  display: block;\n  overflow: visible !important;\n  font-family: Roboto, Helvetica, Arial, sans-serif;\n  font-size: 12px;\n  padding: 3px 7px;\n  background: #f7f7f7;\n  color: #333333;\n  border: 1px solid #938e8e;\n  opacity: 0.8;\n  text-align: left;\n  box-shadow: 3px 3px 10px #888;\n  margin: 0 !important;\n  z-index: 10000;\n  max-width: 400px;\n  text-wrap: normal !important;\n  white-space: normal !important;\n  user-select: none;\n}\n@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {\n  .cg-tooltip-container {\n    border-radius: 0;\n  }\n}\n/* Default left arrow for tooltip */\n.cg-tooltip-arrow-left::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-left: 0;\n  border-right: 5px solid  #938e8e;\n  transform: translate(calc(-100%), -50%);\n}\n.cg-tooltip-arrow-left::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-left: 0;\n  border-right: 4px solid #f7f7f7;\n  transform: translate(calc(-100%), -50%);\n}\n/* Default top arrow for tooltip */\n.cg-tooltip-arrow-top::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 5px solid transparent;\n  border-top: 0;\n  border-bottom: 5px solid #938e8e;\n  transform: translate(-50%, -100%);\n}\n.cg-tooltip-arrow-top::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  top: 0;\n  border: 4px solid transparent;\n  border-top: 0;\n  border-bottom: 4px solid #f7f7f7;\n  transform: translate(-50%, -100%);\n}\n/* Default right arrow for tooltip */\n.cg-tooltip-arrow-right::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 5px solid transparent;\n  border-right: 0;\n  border-left: 5px solid #938e8e;\n  transform: translate(100%, -50%);\n}\n.cg-tooltip-arrow-right::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  right: 0;\n  top: 50%;\n  border: 4px solid transparent;\n  border-right: 0;\n  border-left: 4px solid #f7f7f7;\n  transform: translate(100%, -50%);\n}\n/* Default bottom arrow for tooltip */\n.cg-tooltip-arrow-bottom::before {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0px;\n  border: 5px solid transparent;\n  border-bottom: 0;\n  border-top: 5px solid #938e8e;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n.cg-tooltip-arrow-bottom::after {\n  content: '';\n  position: absolute;\n  display: block;\n  width: 0px;\n  left: 50%;\n  bottom: 0;\n  border: 4px solid transparent;\n  border-bottom: 0;\n  border-top: 4px solid #f7f7f7;\n  transform: translate(-50%, 100%);\n  z-index: 10000;\n}\n/* Tooltip item name */\n/* Tooltip item value */\n/* .cg-tooltip-item-value */\n/* Tooltip item value */\n.cg-tooltip-item-unit {\n  text-transform: none;\n}\n\n.cg-tooltip-item-name {\n    text-transform: capitalize;\n    white-space: nowrap;\n    vertical-align: middle;\n    font-size: 13px;\n}\n.cg-tooltip-row {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  white-space: pre-wrap;\n  font-size: 12px;\n  line-height: 100%;\n  margin: 1px 0;\n}\n.cg-tooltip-title {\n  font-size: 13px;\n  height: 14px;\n  text-transform: capitalize;\n}\n.cg-tooltip-title .cg-tooltip-symbol {\n  margin-right: 0 !important;\n}\n.cg-tooltip-title-name {\n  vertical-align: middle;\n}\n.cg-tooltip-row + .cg-tooltip-row {\n  margin-top: 4px;\n}\n.cg-tooltip-row.cg-tooltip-title + .cg-tooltip-row {\n  margin-top: 5px;\n}\n.cg-tooltip-item-value + .cg-tooltip-item-unit {\n    margin-left: 1px;\n}\n/* Tooltip symbol */\n.cg-tooltip-symbol-cell {\n  display: inline-flex;\n  min-width: 13px; /* 10px size + 3px margin */\n}\n.cg-tooltip-symbol {\n  margin-right: 3px;\n  background-color: transparent;\n  display: block;\n}\n.cg-tooltip-symbol > img {\n  display: block;\n}\n.cg-tooltip-list-cell {\n  display: inline-flex;\n}\n.cg-tooltip-list-symbol {\n  display: block;\n  margin-right: 3px;\n  width: 6px;\n  height: 6px;\n  vertical-align: middle;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n.cg-tooltip-symbol-legacy {\n  border-radius: 4px;\n  margin-right: 5px;\n  height: 8px;\n  width: 8px;\n  display: inline-block;\n}\n.cg-tooltip-title-legacy {\n  font-weight: 900;\n}\n\n/* Tooltip symbol circle */\n.cg-tooltip-symbol.circle {\n  height: 10px;\n  width: 10px;\n  display: inline-block;\n  border-radius: 50%;\n  border: 1px solid rgba(0,0,0,.4);\n}\n/* Tooltip symbol line */\n.cg-tooltip-symbol.line {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: scale(1.2, 0.2);\n}\n/* Tooltip symbol diamond */\n.cg-tooltip-symbol.diamond {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    transform: rotate(45deg);\n    border-radius: 0px;\n}\n/* Tooltip symbol square */\n.cg-tooltip-symbol.square {\n    height: 10px;\n    width: 10px;\n    display: inline-block;\n    border-radius: 0px;\n    border: 1px solid rgba(0,0,0,.4);\n}\n\n","lang":"css"},"children":[]}]}]},{"$$mdtype":"Tag","name":"iframe","attributes":{"src":"https://dc2-documentation.s3.amazonaws.com/documentation/slb-docs-test/5.0/examples/vue/tutorials/index.html#/WellLog/AdditionalFunctionality/CssCustomization/cssCustomization?section=createModernWidget&extract=true","width":"100%","height":"777.5px","style":{"border":"none"}},"children":[]}]},"headings":[{"value":"CSS Customization","id":"css-customization","depth":1},{"value":"Using CSS Styles","id":"using-css-styles","depth":3},{"value":"Using CSS Styles with Custom Headers","id":"using-css-styles-with-custom-headers","depth":3},{"value":"Advanced Styling","id":"advanced-styling","depth":3}],"frontmatter":{"title":"CSS Customization","seo":{"title":"CSS Customization"}},"lastModified":"2026-02-11T19:54:32.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/solutions/geotoolkit/tutorials/well-log/additional-functionality/css-customization","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}