{"id":3177,"date":"2020-07-17T10:27:10","date_gmt":"2020-07-17T08:27:10","guid":{"rendered":"https:\/\/da-software.net\/?p=3177"},"modified":"2020-07-17T10:27:10","modified_gmt":"2020-07-17T08:27:10","slug":"w3-css-define-your-own-colors","status":"publish","type":"post","link":"https:\/\/da-software.net\/en\/2020\/07\/w3-css-define-your-own-colors\/","title":{"rendered":"W3.CSS define your own colors"},"content":{"rendered":"<p>How can I define my own colors in the W3.CSS design?<\/p>\n<p><!--more--><\/p>\n<p>In W3.CSS forms the colors can be defined by preselection.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/07\/w3css_color_1.png\" alt=\"\" width=\"402\" height=\"294\" class=\"aligncenter size-full wp-image-3170\" srcset=\"\/wp-content\/uploads\/2020\/07\/w3css_color_1.png 402w, \/wp-content\/uploads\/2020\/07\/w3css_color_1-300x219.png 300w, \/wp-content\/uploads\/2020\/07\/w3css_color_1-90x65.png 90w\" sizes=\"auto, (max-width: 402px) 100vw, 402px\" \/><\/p>\n<p>This results, for example, in a fixed background color:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/07\/w3css_color_3.png\" alt=\"\" width=\"829\" height=\"606\" class=\"aligncenter size-full wp-image-3172\" srcset=\"\/wp-content\/uploads\/2020\/07\/w3css_color_3.png 829w, \/wp-content\/uploads\/2020\/07\/w3css_color_3-300x219.png 300w, \/wp-content\/uploads\/2020\/07\/w3css_color_3-768x561.png 768w, \/wp-content\/uploads\/2020\/07\/w3css_color_3-90x65.png 90w, \/wp-content\/uploads\/2020\/07\/w3css_color_3-600x439.png 600w\" sizes=\"auto, (max-width: 829px) 100vw, 829px\" \/><\/p>\n<p>The color can be overridden with CSS in the advanced form settings:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/07\/w3css_color_2.png\" alt=\"\" width=\"565\" height=\"358\" class=\"aligncenter size-full wp-image-3174\" srcset=\"\/wp-content\/uploads\/2020\/07\/w3css_color_2.png 565w, \/wp-content\/uploads\/2020\/07\/w3css_color_2-300x190.png 300w\" sizes=\"auto, (max-width: 565px) 100vw, 565px\" \/><\/p>\n<p>Example<\/p>\n<p>In the example we overwrite the color for &#8220;w3-dark-grey&#8221;. We can set the foreground color and the background color.<\/p>\n<pre>\r\n&lt;style type=&quot;text\/css&quot;&gt;\r\n.w3-dark-grey {\r\n    color:#fff!important; background-color:#FF0000!important;\r\n}\r\n&lt;\/style&gt;<\/pre>\n<p>This ensures that the original color is overwritten. The new color is retained even if the export is repeated.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"\/wp-content\/uploads\/2020\/07\/w3css_color_4.png\" alt=\"\" width=\"333\" height=\"250\" class=\"aligncenter size-full wp-image-3176\" srcset=\"\/wp-content\/uploads\/2020\/07\/w3css_color_4.png 333w, \/wp-content\/uploads\/2020\/07\/w3css_color_4-300x225.png 300w\" sizes=\"auto, (max-width: 333px) 100vw, 333px\" \/>7<\/p>","protected":false},"excerpt":{"rendered":"<p>How can I define my own colors in the W3.CSS design?<\/p>\n","protected":false},"author":1,"featured_media":662,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_links_to":"","_links_to_target":""},"categories":[202],"tags":[92,210,211],"class_list":["post-3177","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-faq-and-support","tag-da-formmaker-en","tag-faq-en","tag-w3-css-en"],"_links":{"self":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/3177","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/comments?post=3177"}],"version-history":[{"count":0,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/posts\/3177\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media\/662"}],"wp:attachment":[{"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/media?parent=3177"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/categories?post=3177"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/da-software.net\/en\/wp-json\/wp\/v2\/tags?post=3177"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}