{"id":203,"date":"2011-10-27T14:18:05","date_gmt":"2011-10-27T18:18:05","guid":{"rendered":"https:\/\/havalite.com\/?p=203"},"modified":"2022-11-26T14:37:07","modified_gmt":"2022-11-26T19:37:07","slug":"style-sheet-generation-ssg","status":"publish","type":"post","link":"https:\/\/havalite.com\/?p=203","title":{"rendered":"Style Sheet Generation (SSG)"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-204 alignleft\" src=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-300x201.png\" alt=\"\" width=\"190\" height=\"127\" srcset=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-300x201.png 300w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg.png 322w\" sizes=\"auto, (max-width: 190px) 100vw, 190px\" \/><big>SSG <em>(StyleSheet Generation)<\/em> is a online CSS Generator for visual designing stylesheets directly on your browser and without the need of external CSS-Editors. HTML5 and CSS3 are although considered as an important part of the Editor.<br \/>\n<\/big><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-205 size-large\" src=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-1024x550.jpg\" alt=\"\" width=\"525\" height=\"282\" srcset=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-1024x550.jpg 1024w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-300x161.jpg 300w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-768x412.jpg 768w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg-1536x824.jpg 1536w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssg.jpg 1705w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/p>\n<p>The idea behind SSG is to save time while designer edit there own stylesheet\/s. We all know the procedure to start browser, start CSS-Editor, open stylesheet, edit stylesheet, go back to the browser, refresh it and than back to editor&#8230;&#8230; all these steps take a plenty of time and we can not concentrate our self on the actual work and the precission that designer need by choosing the right colors or dimenssions.<\/p>\n<h2>Requirement<\/h2>\n<ul>\n<li>A powerfull Browser such as Firefox or Google Chrome<\/li>\n<li>and some knowledge about css<\/li>\n<\/ul>\n<h2>How to<\/h2>\n<p>You can watch the tutorial or read the explanation<\/p>\n<ol>\n<li>Go to SSG -&gt; <a href=\"https:\/\/havalite.com\/SSG\/\">HERE<\/a><\/li>\n<li>SSG will automatically load:<br \/>\nthe HTML Sheet which includes the <strong>most used HTML-Tags<\/strong><br \/>\nand one of the 4 ready <strong>Layouts for Havalite CMS<\/strong><\/li>\n<li>Now we can start by experimenting and see what SSG can do<\/li>\n<\/ol>\n<h2>Explanation<\/h2>\n<p>We don&#8217;t need to know every thing at the beginnig but we should understand the 3 important small windows which appear by starting SSG:<\/p>\n<p><strong><big>1. Tag Selector Window<\/big><\/strong>: Here we can assign a name for our project in case we want to save every step we do.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-207\" src=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool-300x190.png\" alt=\"\" width=\"300\" height=\"190\" srcset=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool-300x190.png 300w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool.png 363w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<ul>\n<li><strong>NAME<\/strong>: Type a<strong> project name<\/strong> (if you did not assign a name, nothing will be saved! )<\/li>\n<li><strong>LAY<\/strong>: Choose a <strong>layout <\/strong>(remove the layout name and <strong>double click<\/strong> on the field, choose one, than press<strong> refresh project<\/strong> button)<\/li>\n<li><strong>TAGS <\/strong>(Remove the tag BODY and double click or press arrow-down to see the list of all html tags. Select the one you want to design)<\/li>\n<li><strong>CSS <\/strong>(double click on the field to see a list of all <strong>ID or Class Elements<\/strong> used in the html file)<\/li>\n<li><strong>PSEU<\/strong>: (These are the pseudo elements for hover, first-letter&#8230;&#8230; effects. double click to see the list)<\/li>\n<\/ul>\n<p><strong><big>2. Data Window<\/big><\/strong>: Here you can see all saved TagNames or Elements colored and well formated. You can click any Tag\/Element to edit it.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-208\" src=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool1-286x300.png\" alt=\"\" width=\"286\" height=\"300\" srcset=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool1-286x300.png 286w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool1.png 476w\" sizes=\"auto, (max-width: 286px) 100vw, 286px\" \/><\/p>\n<p><strong><big>3. CSS Designer Window<\/big><\/strong>: This does not need to be explained. Set the values for your Tag\/Element and watch how it changes!<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-medium wp-image-209\" src=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool2-147x300.png\" alt=\"\" width=\"147\" height=\"300\" srcset=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool2-147x300.png 147w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool2.png 283w\" sizes=\"auto, (max-width: 147px) 100vw, 147px\" \/><\/p>\n<p><strong><big>The Statusbar:<\/big><\/strong> has the buttons to open the 3 windows include:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-210 size-full\" src=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool3.png\" alt=\"\" width=\"592\" height=\"78\" srcset=\"https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool3.png 592w, https:\/\/havalite.com\/wp-content\/uploads\/2022\/11\/ssgtool3-300x40.png 300w\" sizes=\"auto, (max-width: 592px) 100vw, 592px\" \/><\/p>\n<ul>\n<li><strong>Mouse Coordinations<\/strong> can be helpful by messuring width\/height or positioning<\/li>\n<li><strong>Mouse Over<\/strong> on any area of the html file will show the Name of the Tag or Element (<span style=\"color: #f00;\">important<\/span>: Double Click the area to edit)<\/li>\n<li><strong>Download CSS<\/strong>: After finishing your template click on the button to save your css<\/li>\n<\/ul>\n<p><strong><big>Last<br \/>\n<\/big><\/strong><\/p>\n<p><big>If you are designing a Template for<strong> Havalite CMS<\/strong>, please go to our site and download the layout you want from: <a href=\"https:\/\/havalite.com\/?p=49\">HERE<\/a><br \/>\n<\/big><\/p>\n<p><a href=\"http:\/\/www.youtube.com\/watch?v=xdhFLV7demU\">Watch SSG on Youtube<\/a><\/p>\n<hr \/>\n<p><strong><big>FAQ<\/big><\/strong><\/p>\n<p>1. How can i\u00a0 integrate and use my own fonts in my stylesheet?<\/p>\n<blockquote><p>CSS3 allows designer to integrate their own font\/s by using the At-Rule <strong>@font-face<\/strong>. In SSG you only need the url adress of your font.<\/p>\n<p>&#8211; Click on the Font section of the CSS Window to open it<br \/>\n&#8211; Click on (<strong>Create a new font-family<\/strong>)<br \/>\n&#8211; Paste in the url adress of the font and click <strong>Create<\/strong><br \/>\n&#8211; Now you have the name of the font in the<strong> list of the font-family <\/strong>and you can use for any tag<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>SSG (StyleSheet Generation) is a online CSS Generator for visual designing stylesheets directly on your browser and without the need of external CSS-Editors. HTML5 and CSS3 are although considered as an important part of the Editor. The idea behind SSG is to save time while designer edit there own stylesheet\/s. We all know the procedure [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[68,67],"tags":[77,73,33,74,86,78,82,76,75,79,72,17,27,7,80,59,87,61,84,83,85,81,88],"class_list":["post-203","post","type-post","status-publish","format-standard","hentry","category-download","category-projects","tag-code","tag-css","tag-css3","tag-editor","tag-element","tag-firefox","tag-free-download","tag-generate","tag-generator","tag-google-chrome","tag-html","tag-html5","tag-javascript","tag-jquery","tag-layouts","tag-php","tag-prototype","tag-sqlite","tag-styles","tag-stylesheet","tag-tag","tag-templates","tag-window"],"_links":{"self":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/203","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=203"}],"version-history":[{"count":3,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/203\/revisions"}],"predecessor-version":[{"id":212,"href":"https:\/\/havalite.com\/index.php?rest_route=\/wp\/v2\/posts\/203\/revisions\/212"}],"wp:attachment":[{"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=203"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=203"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/havalite.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=203"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}