Styling the output of a field - Wikidot - Free and Pro Wiki Hosting

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Styling the output of a field - Wikidot - Free and Pro Wiki Hosting</title> <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/init.combined.js"></script> <script type="text/javascript"> var URL_HOST = 'www.wikidot.com'; var URL_DOMAIN = 'wikidot.com'; var USE_SSL = true ; var URL_STATIC = 'http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327'; // global request information var WIKIREQUEST = {}; WIKIREQUEST.info = {}; WIKIREQUEST.info.domain = "www.wikidot.com"; WIKIREQUEST.info.siteId = 648902; WIKIREQUEST.info.siteUnixName = "www"; WIKIREQUEST.info.categoryId = 4388023; WIKIREQUEST.info.themeId = 192065; WIKIREQUEST.info.requestPageName = "doc-data-forms:output-style"; OZONE.request.timestamp = 1732515753; OZONE.request.date = new Date(); WIKIREQUEST.info.lang = 'en'; WIKIREQUEST.info.pageUnixName = "doc-data-forms:output-style"; WIKIREQUEST.info.pageId = 22129655; WIKIREQUEST.info.lang = "en"; OZONE.lang = "en"; var isUAMobile = !!/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); </script> <script type="text/javascript"> require.config({ baseUrl: URL_STATIC + '/common--javascript', paths: { 'jquery.ui': 'jquery-ui.min', 'jquery.form': 'jquery.form' } }); </script> <meta http-equiv="content-type" content="text/html;charset=UTF-8"/> <meta http-equiv="content-language" content="en"/> <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/WIKIDOT.combined.js"></script> <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.0.0/bootstrap.min.js"></script>  <link href="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--fonts/awesome/3.2.1/font-awesome.min.css" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css" id="internal-style"> /* modules */ /* bootstrap */ @import url(http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--bootstrap/3.0.0/bootstrap.min.css); /* theme */ @import url(http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--theme/bootstrap-base/css/style.css); @import url(http://www.wdfiles.com/local--theme/wikidot-3-0-content/style.css); </style>   <script type="text/javascript" src="http://d3g0gp89917ko0.cloudfront.net/v--4b961b7cc327/common--javascript/skrollr.min.js"></script> <link rel="shortcut icon" href="/local--favicon/favicon.gif"/> <link rel="icon" type="image/gif" href="/local--favicon/favicon.gif"/> <link rel="apple-touch-icon" href="/common--images/apple-touch-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/common--images/apple-touch-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/common--images/apple-touch-icon-114x114.png" /> <link rel="alternate" type="application/wiki" title="Edit this page" href="javascript:WIKIDOT.page.listeners.editClick()"/> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-18234656-1']); _gaq.push(['_setDomainName', 'none']); _gaq.push(['_setAllowLinker', true]); _gaq.push(['_trackPageview']); _gaq.push(['old._setAccount', 'UA-68540-5']); _gaq.push(['old._setDomainName', 'none']); _gaq.push(['old._setAllowLinker', true]); _gaq.push(['old._trackPageview']); </script> <script type="text/javascript"> window.google_analytics_uacct = 'UA-18234656-1'; window.google_analytics_domain_name = 'none'; </script> <link rel="manifest" href="/onesignal/manifest.json" /> <script src="https://cdn.onesignal.com/sdks/OneSignalSDK.js" acync=""></script> <script> var OneSignal = window.OneSignal || []; OneSignal.push(function() { OneSignal.init({ appId: null, }); }); </script> </head> <body id="html-body"> <div id="skrollr-body"> <script type="text/javascript"> jQuery(document).ready(function() { if(!(/Android|iPhone|iPad|iPod|BlackBerry|Windows Phone/i).test(navigator.userAgent || navigator.vendor || window.opera)) { var s = skrollr.init(); } }); </script> <div class="topbar"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".wikidot-menu-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="site-name"> <a class="navbar-brand" href="/"></a> </div> <div class="site-subtitle"> your place on the web </div> <div class="loginStatus"> <a href="javascript:;" onclick="WIKIDOT.page.listeners.createAccount(event)" class="login-status-create-account btn">Create account</a> <span>or</span> <a href="javascript:;" onclick="WIKIDOT.page.listeners.loginClick(event)" class="login-status-sign-in btn btn-primary">Sign in</a> </div> </div> <div class="collapse navbar-collapse wikidot-menu-collapse"> <ul class="nav navbar-nav navbar-right"> <li class="dropdown"><a class="dropdown-toggle" href="" data-toggle="dropdown">Documentation <span class="caret"><span style="white-space: pre-wrap;"> </span></span><br /></a> <ul class="dropdown-menu"> <li><a href="/doc-wiki-syntax:start">Wiki syntax</a></li> <li><a href="/doc:quick-reference">Quick reference</a></li> <li><a href="/doc-modules:start">Modules</a></li> <li><a href="/doc-data-forms:start">Data forms</a></li> <li><a href="/doc:embedding">Embedding services</a></li> <li><a href="/doc:templates">Templates</a></li> <li><a href="/doc:searching">Searching</a></li> <li><a href="/doc:site-structure">Site structure</a></li> <li><a href="/doc:users">Managing users</a></li> <li><a href="/doc:layout-reference">Layout reference</a></li> <li><a href="/doc:video">Video tutorials</a></li> <li><a href="/doc:advertising">Advertising</a></li> <li><a href="/doc:api">Wikidot API</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" href="" data-toggle="dropdown">Community sites <span class="caret"><span style="white-space: pre-wrap;"> </span></span></a> <ul class="dropdown-menu"> <li><a href="http://community.wikidot.com">Wikidot Community</a></li> <li><a href="http://handbook.wikidot.com">Wikidot Handbook</a></li> <li><a href="http://snippets.wikidot.com">Code snippets</a></li> </ul> </li> <li class="dropdown"><a class="dropdown-toggle" href="" data-toggle="dropdown">FAQ <span class="caret"><span style="white-space: pre-wrap;"> </span></span></a> <ul class="dropdown-menu"> <li><a href="/faq:user-accounts">User accounts</a></li> <li><a href="/faq:upgrades">Upgrades</a></li> <li><a href="/faq:site-features">Site features</a></li> <li><a href="/faq:private-sites">Private Sites</a></li> <li><a href="/faq:editing-pages">Editing Pages</a></li> <li><a href="/faq:technical">Technical</a></li> <li><a href="/faq:watching">Watching</a></li> </ul> </li> </ul> </div> </div> <div class="horizontal-scrollbar" data-start="width: 0%;" data-end="width: 100%"></div> </nav> </div> <div class="content-wrap"> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="search-box"> <div id="search-top-box" class="form-search"> <form id="search-top-box-form" action="dummy" class="input-append"> <input id="search-top-box-input" class="text empty search-query" type="text" size="15" name="query" value="Search this site" onfocus="if(YAHOO.util.Dom.hasClass(this, 'empty')){YAHOO.util.Dom.removeClass(this,'empty'); this.value='';}"/><input class="button btn" type="submit" name="search" value="Search"/> </form> </div> </div> <nav role="navigation"> <div class="container"> <div class="navbar-header docs-navigation"> <a type="button" class="btn btn-default navbar-toggle docs-navigation-toggle" data-toggle="collapse" data-target=".doc-menu-collapse"> Table of Contents </a> </div> <div class="collapse navbar-collapse doc-menu-collapse doc-navigation-sidebar"> <ul> <li><a href="/doc-data-forms:howto">How to create a new data form</a></li> <li><a href="/doc-data-forms:creating-new-page">Creating a new page</a></li> <li><a href="/doc-data-forms:displaying">Displaying the results</a></li> <li><a href="/doc-data-forms:dataforms-and-listpages">DataForms and ListPages</a></li> <li><a href="/doc-data-forms:selecting-and-sorting">Selecting & Sorting</a> <ul> <li><a href="/doc-data-forms:selecting-and-sorting#selecting">Selecting</a></li> <li><a href="/doc-data-forms:selecting-and-sorting#sorting">Sorting</a></li> </ul> </li> <li><a href="/doc-data-forms:images">Images in Data Forms</a></li> <li><a href="/doc-data-forms:youtube">YouTube and external content</a></li> <li><a href="/doc-data-forms:tags">Tags</a></li> <li><a href="/doc-data-forms:links">Links</a> <ul> <li><a href="/doc-data-forms:links#external">External</a></li> <li><a href="/doc-data-forms:links#internal">Internal</a></li> </ul> </li> <li><a href="/doc-data-forms:output-style">Styling the output of a field</a></li> <li><a href="/doc-data-forms:pagepath">Pagepath concept</a></li> <li><a href="/doc-data-forms:deleting-form">Deleting a form</a></li> </ul> <hr /> <ul> <li><a href="/doc-data-forms:reference">Reference</a></li> </ul> <p><strong>Field Properties</strong></p> <ul> <li><a href="/doc-data-forms:field-properties#label">The 'label' property</a></li> <li><a href="/doc-data-forms:field-properties#join">The 'join' property</a></li> <li><a href="/doc-data-forms:field-properties#before">The 'before' property</a></li> <li><a href="/doc-data-forms:field-properties#after">The 'after' property</a></li> </ul> <p><strong>Field Types</strong></p> <ul> <li><a href="/doc-data-forms:text-field">The 'text' field type</a></li> <li><a href="/doc-data-forms:select-field">The 'select' field type</a></li> <li><a href="/doc-data-forms:checkbox-field">The 'checkbox' field type</a></li> <li><a href="/doc-data-forms:pagepath-field">The 'pagepath' field type</a></li> <li><a href="/doc-data-forms:hidden-field">The 'hidden' field type</a></li> <li><a href="/doc-data-forms:wiki-field">The 'wiki' field type</a></li> <li><a href="/doc-data-forms:static-field">The 'static' field type</a></li> <li><a href="/doc-data-forms:file-field">The 'file' field type</a></li> <li><a href="/doc-data-forms:url-field">The 'url' field type</a></li> <li><a href="/doc-data-forms:password-field">The 'password' field type</a></li> <li><a href="/doc-data-forms:date-field">The 'date' field type</a></li> </ul> <hr /> <ul> <li><a href="/doc-data-forms:css-styling">CSS Styling</a></li> <li><a href="/doc-data-forms:hints">Hints & Tips</a></li> <li><a href="/doc-data-forms:thanks">Thanks</a></li> </ul> </div> </div> </nav> </div> <div class="col-md-9"> <div class="page-title"> Styling the output of a field </div> <div class="breadcrumb"> <a href="/doc:start">Documentation</a> » <a href="/doc-data-forms:start">Data Forms</a> » Styling the output of a field </div> <div id="page-content"> <p>You can set the color and other styles of a field on the form after it is saved. Create the field in your data form in the normal way as follows:</p> <div class="code"> <pre> <code>[[form] fields ... ... priority: label: Priority type: select values: normal: Normal urgent: Urgent critical: Critical .... [[/form]]</code> </pre></div> <p>Above the <span style="white-space: pre-wrap;">====</span> separator add a CSS module:</p> <div class="code"> <pre> <code>[[module css]] .normal { color: green; } .urgent { color: red; } .critical { color: red; font-weight: bold;} [[/module]]</code> </pre></div> <p>Then use a css span class and a combination of form_raw and form_data to display the field in the relevant color:</p> <p><span style="white-space: pre-wrap;">[[span class="%%form_raw{priority}%%"]]%%form_data{priority}%%[[/span]]</span></p> </div><div id="action-area" style="display: none;"></div> </div> </div> </div> <div class="page-options-container container"> </div> </div> <div class="footer"> <div class="container"> <div class="row"> <div class="col-sm-6"><img src="https://www.wikidot.com/common--theme/wikidot30/images/amazon.png" alt="amazon.png" class="image" /></div> <div class="col-sm-3"> <p><a href="http://blog.wikidot.com">Official Wikidot blog</a></p> <p><a href="http://community.wikidot.com">Community</a></p> <p><a href="/doc">Documentation</a></p> </div> <div class="col-sm-3"> <p><a href="/about">About Wikidot</a></p> <p><a href="http://shop.wikidot.com">Gift Shop</a></p> <p><a href="/legal:terms-of-service">Terms of Service</a></p> <p><a href="/legal:privacy-policy">Privacy policy</a></p> </div> </div> </div> <div class="container license-area"> Copyright 漏 All Rights Reserved, Wikidot Inc. 2024 </div> </div> </div> <div id="dummy-ondomready-block" style="display: none;" ></div>  <script type="text/javascript"> (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <div id="page-options-bottom-tips" style="display: none;"> <div id="edit-button-hovertip"> Click here to edit contents of this page. </div> </div> <div id="page-options-bottom-2-tips" style="display: none;"> <div id="edit-sections-button-hovertip"> Click here to toggle editing of individual sections of the page (if possible). Watch headings for an "edit" link when available. </div> <div id="edit-append-button-hovertip"> Append content without editing the whole page source. </div> <div id="history-button-hovertip"> Check out how this page has evolved in the past. </div> <div id="discuss-button-hovertip"> If you want to discuss contents of this page - this is the easiest way to do it. </div> <div id="files-button-hovertip"> View and manage file attachments for this page. </div> <div id="site-tools-button-hovertip"> A few useful tools to manage this Site. </div> <div id="backlinks-button-hovertip"> See pages that link to and include this page. </div> <div id="rename-move-button-hovertip"> Change the name (also URL address, possibly the category) of the page. </div> <div id="view-source-button-hovertip"> View wiki source for this page without editing. </div> <div id="parent-page-button-hovertip"> View/set parent page (used for creating breadcrumbs and structured layout). </div> </div> </body> </html>

CINXE.COM

Styling the output of a field - Wikidot - Free and Pro Wiki Hosting