{"id":22615,"date":"2025-09-29T16:08:23","date_gmt":"2025-09-29T14:08:23","guid":{"rendered":"https:\/\/www.smartrace.de\/?page_id=22615"},"modified":"2025-09-29T16:15:36","modified_gmt":"2025-09-29T14:15:36","slug":"racescreen-designer","status":"publish","type":"page","link":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/","title":{"rendered":"Race screen designer"},"content":{"rendered":"\n

Race screen designer<\/h1>\n\n\n\n

What is the race screen designer?<\/h3>\n\n\n\n

Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created in SmartRace. CSS (Cascading Style Sheets) is a design description language used for designing websites. It is also used in SmartRace.<\/p>\n\n\n\n

The Race Screen Designer provides you with a graphical interface that you can use to develop your own CSS for SmartRace. You can then insert your CSS into SmartRace and use it.<\/p>\n\n\n\n

How to use the race screen designer<\/h3>\n\n\n\n

First, open the race screen designer by clicking the button below. You should definitely use a PC or laptop for this. You cannot use the designer effectively on devices without a keyboard and mouse.<\/p>\n\n\n\nOpen Race Screen Designer<\/a>\n\n\n\n

The following screen will now open in your browser:<\/p>\n\n\n\n\"\"\n\n\n\n

    \n
  1. First, you should adjust the sample screen displayed so that it matches what you have set in SmartRace in the \u201cTime Table\u201d widget. To do this, you can use the switches at the top left of the \u201cTime Table Settings\u201d box.<\/li>\n\n\n\n
  2. Then, using your browser’s developer tools (usually accessed via F12, Ctrl + Shift + J (Windows\/Linux) or Cmd + Option + I (macOS)), you can examine the time table and find out which elements can be styled using which CSS selectors. You can find a few tips on how to write suitable CSS under \u201cCSS tricks\u201d at the top right of the designer.<\/li>\n\n\n\n
  3. Every time you change the CSS in the small editor on the left, the preview on the right is updated.<\/li>\n\n\n\n
  4. You can interrupt your work at any time and continue later. The designer always automatically loads the latest version (as long as you access it again from the same device). Once you have reached a certain stage, you can also use the \u201cShare\u201d button at the bottom left to generate an ID that you can use to access your design again at any time.<\/li>\n\n\n\n
  5. When you are satisfied, you can copy your CSS to the clipboard using the \u201cCopy CSS\u201d button and then paste it into SmartRace on your race screen. To do this, press the button at the bottom left to manage your race screens, then \u201cManage race screens\u201d and then the edit button on the corresponding race screen. In the edit screen, paste your CSS into the \u201cCustom CSS\u201d field. Done!<\/li>\n<\/ol>\n\n\n\n

    If something is not working as desired, please contact support<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created in SmartRace. CSS (Cascading Style Sheets) is a design description language used for designing websites. It is also used in SmartRace. The Race Screen Designer provides you with … <\/p>\n

    Read full article<\/a><\/p>\n","protected":false},"author":1,"featured_media":22617,"parent":407,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"manual.php","meta":{"_acf_changed":false,"_uag_custom_page_level_css":"","footnotes":""},"class_list":{"0":"post-22615","1":"page","2":"type-page","3":"status-publish","4":"has-post-thumbnail","6":"infinite-scroll-item"},"acf":[],"yoast_head":"\nRace screen designer - SmartRace for Carrera Digital<\/title>\n<meta name=\"description\" content=\"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Race screen designer - SmartRace for Carrera Digital\" \/>\n<meta property=\"og:description\" content=\"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/\" \/>\n<meta property=\"og:site_name\" content=\"SmartRace for Carrera Digital\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/smartraceapp\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-29T14:15:36+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1995\" \/>\n\t<meta property=\"og:image:height\" content=\"1174\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@smartrace\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/\",\"name\":\"Race screen designer - SmartRace for Carrera Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Bildschirmfoto-2025-09-29-um-16.00.25.png\",\"datePublished\":\"2025-09-29T14:08:23+00:00\",\"dateModified\":\"2025-09-29T14:15:36+00:00\",\"description\":\"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Bildschirmfoto-2025-09-29-um-16.00.25.png\",\"contentUrl\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2025\\\/09\\\/Bildschirmfoto-2025-09-29-um-16.00.25.png\",\"width\":1995,\"height\":1174},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/racescreen-designer\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Manual\",\"item\":\"https:\\\/\\\/www.smartrace.de\\\/en\\\/the-smartrace-manual\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Race screen designer\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#website\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/\",\"name\":\"SmartRace for Carrera Digital\",\"description\":\"The Nr. 1-App for carrera digital slot racing\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.smartrace.de\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#organization\",\"name\":\"SmartRace f\u00fcr Carrera Digital\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/Heller-Hintergrund-1.png\",\"contentUrl\":\"https:\\\/\\\/www.smartrace.de\\\/wp-content\\\/uploads\\\/2018\\\/01\\\/Heller-Hintergrund-1.png\",\"width\":1233,\"height\":1266,\"caption\":\"SmartRace f\u00fcr Carrera Digital\"},\"image\":{\"@id\":\"https:\\\/\\\/www.smartrace.de\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"http:\\\/\\\/facebook.com\\\/smartraceapp\",\"https:\\\/\\\/x.com\\\/smartrace\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UChWBm_cFDXFe8Id2966bdMA\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Race screen designer - SmartRace for Carrera Digital","description":"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created","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:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/","og_locale":"en_US","og_type":"article","og_title":"Race screen designer - SmartRace for Carrera Digital","og_description":"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created","og_url":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/","og_site_name":"SmartRace for Carrera Digital","article_publisher":"http:\/\/facebook.com\/smartraceapp","article_modified_time":"2025-09-29T14:15:36+00:00","og_image":[{"width":1995,"height":1174,"url":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_site":"@smartrace","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/","url":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/","name":"Race screen designer - SmartRace for Carrera Digital","isPartOf":{"@id":"https:\/\/www.smartrace.de\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/#primaryimage"},"image":{"@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/#primaryimage"},"thumbnailUrl":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png","datePublished":"2025-09-29T14:08:23+00:00","dateModified":"2025-09-29T14:15:36+00:00","description":"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created","breadcrumb":{"@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/#primaryimage","url":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png","contentUrl":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png","width":1995,"height":1174},{"@type":"BreadcrumbList","@id":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/racescreen-designer\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.smartrace.de\/en\/"},{"@type":"ListItem","position":2,"name":"User Manual","item":"https:\/\/www.smartrace.de\/en\/the-smartrace-manual\/"},{"@type":"ListItem","position":3,"name":"Race screen designer"}]},{"@type":"WebSite","@id":"https:\/\/www.smartrace.de\/#website","url":"https:\/\/www.smartrace.de\/","name":"SmartRace for Carrera Digital","description":"The Nr. 1-App for carrera digital slot racing","publisher":{"@id":"https:\/\/www.smartrace.de\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.smartrace.de\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.smartrace.de\/#organization","name":"SmartRace f\u00fcr Carrera Digital","url":"https:\/\/www.smartrace.de\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.smartrace.de\/#\/schema\/logo\/image\/","url":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2018\/01\/Heller-Hintergrund-1.png","contentUrl":"https:\/\/www.smartrace.de\/wp-content\/uploads\/2018\/01\/Heller-Hintergrund-1.png","width":1233,"height":1266,"caption":"SmartRace f\u00fcr Carrera Digital"},"image":{"@id":"https:\/\/www.smartrace.de\/#\/schema\/logo\/image\/"},"sameAs":["http:\/\/facebook.com\/smartraceapp","https:\/\/x.com\/smartrace","https:\/\/www.youtube.com\/channel\/UChWBm_cFDXFe8Id2966bdMA"]}]}},"uagb_featured_image_src":{"full":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png",1995,1174,false],"thumbnail":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25-150x150.png",150,150,true],"medium":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25-300x177.png",300,177,true],"medium_large":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25-768x452.png",768,452,true],"large":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25-1024x603.png",1024,603,true],"1536x1536":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25-1536x904.png",1536,904,true],"2048x2048":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png",1995,1174,false],"gform-image-choice-sm":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png",300,177,false],"gform-image-choice-md":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png",400,235,false],"gform-image-choice-lg":["https:\/\/www.smartrace.de\/wp-content\/uploads\/2025\/09\/Bildschirmfoto-2025-09-29-um-16.00.25.png",600,353,false]},"uagb_author_info":{"display_name":"SmartRace","author_link":"https:\/\/www.smartrace.de\/en\/author\/trademarc_design\/"},"uagb_comment_info":0,"uagb_excerpt":"Race screen designer What is the race screen designer? Since SmartRace 7.0, you have the option of adding CSS code to race screens that you have created in SmartRace. CSS (Cascading Style Sheets) is a design description language used for designing websites. It is also used in SmartRace. The Race Screen Designer provides you with…","_links":{"self":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/22615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/comments?post=22615"}],"version-history":[{"count":3,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/22615\/revisions"}],"predecessor-version":[{"id":22624,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/22615\/revisions\/22624"}],"up":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/pages\/407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/media\/22617"}],"wp:attachment":[{"href":"https:\/\/www.smartrace.de\/en\/wp-json\/wp\/v2\/media?parent=22615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}