{"id":35806,"date":"2017-10-22T23:52:59","date_gmt":"2017-10-23T06:52:59","guid":{"rendered":"http:\/\/www.technosolutions.com\/kb\/?p=35806"},"modified":"2017-12-02T00:50:07","modified_gmt":"2017-12-02T08:50:07","slug":"using-screen-mockup-stylesheets","status":"publish","type":"post","link":"http:\/\/www.technosolutions.com\/kb\/35806\/using-screen-mockup-stylesheets\/","title":{"rendered":"Using Screen Mockup Stylesheets"},"content":{"rendered":"<p>\t\t\t\t<!-- Start ScreenSteps Content --><\/p>\n<div class=\"LessonContent\">\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\" style=\"font-size:20px;\">What is Screen Mockup Stylesheets editor?<\/h3>\n<div class=\"StepInstructions\">\n<p><i>Screen Mockup Stylesheet <\/i>editor<i> <\/i>enables you to create a variety of <i>Stylesheets <\/i>in a <i>Screen Mockup<\/i>. You can create multiple styles in a single <i>Stylesheet<\/i>, e.g. you can define styles for <i>Background color<\/i>,<i> Buttons<\/i>,<i> Links<\/i>, <i>Toolbar Buttons, <\/i>etc.<\/p>\n<p>You can access this editor from <i>Repository Explorer &gt; Screen Mockup Stylesheets  &gt; New Screen Mockup Stylesheet.<\/i> Refer to the image below.<\/p>\n<\/div><\/div>\n<div class=\"LessonStep top\">\n<div class=\"StepImage\" style=\"margin:10px 0px;\">\n<img loading=\"lazy\" decoding=\"async\" style=\"padding:3px; border: 1px solid #ccc;\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"http:\/\/www.technosolutions.com\/kb\/wp-content\/uploads\/2017\/12\/media_1512204499251.png\" width=\"798\" height=\"478\" alt=\"media_1512204499251.png\" \/>\n<\/div>\n<div class=\"StepInstructions\">\n<p><i>Screen Mockup Stylesheets <\/i>editor<\/p>\n<\/div><\/div>\n<div class=\"LessonStep top\">\n<div class=\"StepImage\" style=\"margin:10px 0px;\">\n<img loading=\"lazy\" decoding=\"async\" style=\"padding:3px; border: 1px solid #ccc;\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" data-layzr=\"http:\/\/www.technosolutions.com\/kb\/wp-content\/uploads\/2017\/12\/wpid35848-media_1508325843126.png\" width=\"800\" height=\"765\" alt=\"wpid35848-media_1508325843126.png\" \/>\n<\/div>\n<\/p><\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\" style=\"font-size:20px;\">When to use it?<\/h3>\n<div class=\"StepInstructions\">\n<p><font color=\"#000000\">When you are creating<i> Screen Mockups <\/i>or <i>Screen Mockup Master Pages<\/i> for your application, you use widgets or screens. To ensure consistency across your application, you want to give a certain look and feel (color, font, size, etc.) to it.<\/font><\/p>\n<p><font color=\"#000000\">Using this editor you can create a collection of styles &#8211; Stylesheet, to create theme based styles for your application.<\/font><\/p>\n<p><font color=\"#000000\">These styles can then be applied to the widgets or screens of your application.<\/font><\/p>\n<\/div><\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\" style=\"font-size:20px;\">Getting Started<\/h3>\n<div class=\"StepInstructions\">\n<p>You can access online help for <i>Screen Mockup<\/i> <i>Stylesheets <\/i>from the link below:<\/p>\n<p><a href=\"http:\/\/www.technosolutions.com\/kb\/3107\/video-getting-started-with-screen-mockup-stylesheets\/\" target=\"_blank\">Video &ndash; Getting Started with Screen Mockup Stylesheets<\/a><\/p>\n<\/div><\/div>\n<div class=\"LessonStep top\">\n<h3 class=\"StepTitle\" style=\"font-size:20px;\">See Also<\/h3>\n<div class=\"StepInstructions\">\n<p><a href=\"http:\/\/www.technosolutions.com\/kb\/4515\/using-screen-mockups-editor\/\" target=\"_blank\">Using Screen Mockups Editor<\/a><\/p>\n<\/div><\/div>\n<\/p><\/div>\n<p><!-- End ScreenSteps Content --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is Screen Mockup Stylesheets editor? Screen Mockup Stylesheet editor enables you to create a variety of Stylesheets in a Screen Mockup. You can create multiple styles in a single Stylesheet, e.g. you can define styles for Background color, Buttons, Links, Toolbar Buttons, etc. You can access this editor from Repository Explorer &gt; Screen Mockup Stylesheets &gt; New Screen Mockup Stylesheet. Refer to the image below. Screen Mockup Stylesheets editor When to use it? When you are creating Screen Mockups or Screen Mockup Master Pages for your application, you use widgets or screens. To ensure consistency across your application, you <\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[54],"tags":[94,194],"class_list":["post-35806","post","type-post","status-publish","format-standard","hentry","category-screen-mockups","tag-mockups","tag-stylesheets"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paoaNA-9jw","_links":{"self":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/35806","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/comments?post=35806"}],"version-history":[{"count":3,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/35806\/revisions"}],"predecessor-version":[{"id":36882,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/posts\/35806\/revisions\/36882"}],"wp:attachment":[{"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/media?parent=35806"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/categories?post=35806"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.technosolutions.com\/kb\/wp-json\/wp\/v2\/tags?post=35806"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}