{"id":24633,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/css-interface-1\/"},"modified":"2025-02-17T17:46:31","modified_gmt":"2025-02-18T01:46:31","slug":"css-interface-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/","title":{"rendered":"CSS Interface"},"content":{"rendered":"

There are occasions when it is useful to apply your own styles to specific elements within a form on the add<\/em> or edit<\/em> screen.\u00a0 An understanding of Cascading Style Sheets is essential to use this feature.\u00a0 You can use most browsers “inspect” mode to determine the element names to which you want to apply a style.<\/p>\n

To accommodate this, there is a file within the directory structure evj<\/em>\\stylesheets\\user_stylesheets<\/code> named user_stylesheet.css<\/code>.\u00a0 evj is the location of your installation within your server.<\/p>\n

You may place any valid CSS within this file to augment the styles on your add<\/em> and edit<\/em> screens.\u00a0 Not every style may be overridden, but it is likely that those you want to alter can be adjusted within this file.<\/p>\n

Example<\/h3>\n

You have an HTML Area field named kb_article<\/code> on an edit <\/em>screen.\u00a0 This is read-only but you want to restrict its width to fit neatly on the screen.\u00a0 Layout cell attributes such as SIZE and STYLE only work with writable fields so are not a solution.<\/p>\n

An inspection of the browser’s DOM shows the field structure as this:<\/p>\n

\"\"<\/p>\n

The field is rendered within the row with the ID of f_kb_article<\/code>.\u00a0 To limit the width of this field, but not alter the CSS class named isolateInnerText<\/code> which may be used elsewhere on the same form, create an entry within the user_stylesheet.css<\/code> file like this:<\/p>\n

#f_kb_article .isolateInnerText {
\nmax-width:500px;
\n}<\/code><\/p>\n

This will limit the field to have a maximum width of 500 pixels without altering any other field rendered on the form.<\/p>\n

Hints<\/h3>\n
    \n
  • If you want to replace a style within a form, you can use the !important <\/code>modifier, unless this is already used on style.\u00a0 This is usually going to work within add<\/em> and edit<\/em> screens<\/li>\n
  • The top level identifier within both add<\/em> and edit<\/em> screens is a table with the ID of top_lvl_table<\/code>.\u00a0 You can refer to this within CSS as #top_lvl_table<\/code><\/li>\n
  • The labels of fields are preceded with an ID of t_<\/code>.\u00a0 For example the ID of the field label in the above example is t_kb_article<\/code><\/li>\n
  • The values of fields are preceded with an ID of f_<\/code>.\u00a0 For example, the ID of the field value in the above example is f_kb_article<\/code>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

    There are occasions when it is useful to apply your own styles to specific elements within a form on the add or edit screen.\u00a0 An understanding of Cascading Style Sheets is essential to use this feature.\u00a0 You can use most browsers “inspect” mode to determine the element names to which you want to apply a…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":24479,"menu_order":5,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-24633","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"\nCSS Interface - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Interface - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"There are occasions when it is useful to apply your own styles to specific elements within a form on the add or edit screen.\u00a0 An understanding of Cascading Style Sheets is essential to use this feature.\u00a0 You can use most browsers “inspect” mode to determine the element names to which you want to apply a...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-18T01:46:31+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/\",\"name\":\"CSS Interface - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-02-18T01:46:31+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ExtraView 25\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"User Custom Guide\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"CSS Interface\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Interface - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/","og_locale":"en_US","og_type":"article","og_title":"CSS Interface - Product Documentation","og_description":"There are occasions when it is useful to apply your own styles to specific elements within a form on the add or edit screen.\u00a0 An understanding of Cascading Style Sheets is essential to use this feature.\u00a0 You can use most browsers “inspect” mode to determine the element names to which you want to apply a...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-02-18T01:46:31+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/","name":"CSS Interface - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-02-18T01:46:31+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/css-interface-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"ExtraView 25","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":3,"name":"User Custom Guide","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/user-custom-guide-1\/"},{"@type":"ListItem","position":4,"name":"CSS Interface"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=24633"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24633\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/24479"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=24633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}