{"id":46,"date":"2010-07-12T05:46:00","date_gmt":"2010-07-12T05:46:00","guid":{"rendered":"http:\/\/blog2.efrontlearning.net\/2010\/07\/building-an-advanced-efront-theme-using-css3-elements.html"},"modified":"2012-04-05T09:30:20","modified_gmt":"2012-04-05T09:30:20","slug":"cssbuilding-advanced-efront-theme-using","status":"publish","type":"post","link":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html","title":{"rendered":"Building an advanced eFront theme using CSS3 elements"},"content":{"rendered":"
Although HTML5 and CSS3 are still under development (http:\/\/en.wikipedia.org\/wiki\/HTML5<\/a>) most current browsers support a reasonable portion of html5 and css3 elements (with the remarkable exception of IE 8 *)<\/p>\n

CSS3 introduces, among others, a way to create rounded boxes<\/span> and add shadow for letters and boxes<\/span>. Using just these 3 elements we can produce a high quality variation of an eFront theme with minimum changes and increased readability.<\/p>\n

Rounded corners<\/span><\/p>\n

Rounded corners produce a friendly look-and-feel for our page elements. Before CSS3 we would need to work with images or javascript to produce a round box effect. Actually, there are dozens of wide spread techniques to produce the round corner effect (for example, check http:\/\/www.devwebpro.com\/25-rounded-corners-techniques-with-css\/<\/a>) \u2013 which by its turn is a clear signal that there is no perfect solution.<\/p>\n

CSS3 introduces the border-radius element which comes to remedy this situation. In order to create a border effect on your themes just use the following css elements:<\/p>\n

-moz-border-radius: 3px;
\n-webkit-border-radius: 3px<\/span><\/p>\n

Shaded letters and boxes
\n<\/span>
\nShaded letters improves the text readability and they are a nice touch especially for headers. The same way, shaded boxes offer an easy stylish element for your pages.<\/p>\n

In order to create shaded boxes use:<\/p>\n

-moz-box-shadow: 3px 3px 3px #888;
\n-webkit-box-shadow: 3px 3px 3px #888;
\n<\/span><\/p>\n

In order to crated shaded text use something like:<\/p>\n

text-shadow:1px 1px 1px #000000;<\/span><\/p>\n

The theme<\/span><\/p>\n

We started from the standard blue theme extending it to be simpler (by removing the background header and adopting a neutral white background color). We also opt to use a high-contrast red header for boxes that improves readability.<\/p>\n

A typical modified theme element that includes CSS3 attributes is as follows:<\/p>\n

table.pageLayout td.header #path
\n{
\nclear:left;
\npadding-top:5px;
\npadding-bottom:3px;
\n-moz-box-shadow: 3px 3px 3px #888; \/\/new css3 element
\n-webkit-box-shadow: 3px 3px 3px #888; \/\/new css3 element
\n-moz-border-radius: 5px; \/\/new css3 element
\n-webkit-border-radius: 5px; \/\/new css3 element
\nbackground:url(‘..\/images\/css_images\/gradient.gif’) repeat-x top;
\nheight:25px;
\nborder-top: 0px solid #1f3349;
\nborder-bottom: 0px solid #1f3349
\n}<\/span><\/p>\n

Below you can find several screenshots from the theme (as is rendered on FireFox 3.6) describing the design choices. Don\u2019t forget to download the theme at the end of this post!<\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

\"\"<\/a><\/p>\n

Compatibility<\/span>
\nRounded corners are supported by Firefox and Safari. Shaded letters are supported by Safari, Firefox and Opera. Shaded boxes are supported by Firefox and Safari. Our theme will work without issues on other browsers as well but without the additional styling elements we introduced.<\/p>\n

Download<\/span>
\nDownload the theme!<\/a><\/p>\n

More ideas:<\/span>
\nFor more ideas and techniques for CSS3 you can check the following site:
\nhttp:\/\/www.css3.info\/<\/a><\/p>\n

* Note<\/span>: IE 9 is expected to support HTML5 to some degree (http:\/\/gizmodo.com\/5494574\/internet-explorer-9-a-fresh-start-with-html5<\/a>)<\/span><\/div>\n","protected":false},"excerpt":{"rendered":"

Although HTML5 and CSS3 are still under development (http:\/\/en.wikipedia.org\/wiki\/HTML5) most current browsers support a reasonable portion of html5 and css3 elements (with the remarkable exception of IE 8 *) CSS3 introduces, among others, a way to create rounded boxes and add shadow for letters and boxes. Using just these 3 elements we can produce a […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,39],"tags":[44],"class_list":["post-46","post","type-post","status-publish","format-standard","hentry","category-elearning","category-news","tag-lms"],"yoast_head":"\nBuilding an advanced eFront theme using CSS3 elements - eFront Blog<\/title>\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.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building an advanced eFront theme using CSS3 elements\" \/>\n<meta property=\"og:description\" content=\"Although HTML5 and CSS3 are still under development (http:\/\/en.wikipedia.org\/wiki\/HTML5) most current browsers support a reasonable portion of html5 and css3 elements (with the remarkable exception of IE 8 *) CSS3 introduces, among others, a way to create rounded boxes and add shadow for letters and boxes. Using just these 3 elements we can produce a […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\" \/>\n<meta property=\"og:site_name\" content=\"eFront Blog\" \/>\n<meta property=\"article:published_time\" content=\"2010-07-12T05:46:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2012-04-05T09:30:20+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png\" \/>\n<meta name=\"author\" content=\"Athanasios Papagelis\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Athanasios Papagelis\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\"},\"author\":{\"name\":\"Athanasios Papagelis\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965\"},\"headline\":\"Building an advanced eFront theme using CSS3 elements\",\"datePublished\":\"2010-07-12T05:46:00+00:00\",\"dateModified\":\"2012-04-05T09:30:20+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\"},\"wordCount\":454,\"commentCount\":0,\"image\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png\",\"keywords\":[\"LMS\"],\"articleSection\":[\"eLearning\",\"Product News\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\",\"url\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\",\"name\":\"Building an advanced eFront theme using CSS3 elements - eFront Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage\"},\"thumbnailUrl\":\"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png\",\"datePublished\":\"2010-07-12T05:46:00+00:00\",\"dateModified\":\"2012-04-05T09:30:20+00:00\",\"author\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage\",\"url\":\"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png\",\"contentUrl\":\"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/www.efrontlearning.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"eLearning\",\"item\":\"https:\/\/www.efrontlearning.com\/blog\/category\/elearning\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Building an advanced eFront theme using CSS3 elements\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#website\",\"url\":\"https:\/\/www.efrontlearning.com\/blog\/\",\"name\":\"eFront Blog\",\"description\":\"eLearning tips, news and resources\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.efrontlearning.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965\",\"name\":\"Athanasios Papagelis\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g\",\"caption\":\"Athanasios Papagelis\"},\"url\":\"https:\/\/www.efrontlearning.com\/blog\/author\/athanasios-papagelis\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building an advanced eFront theme using CSS3 elements - eFront Blog","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.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html","og_locale":"en_US","og_type":"article","og_title":"Building an advanced eFront theme using CSS3 elements","og_description":"Although HTML5 and CSS3 are still under development (http:\/\/en.wikipedia.org\/wiki\/HTML5) most current browsers support a reasonable portion of html5 and css3 elements (with the remarkable exception of IE 8 *) CSS3 introduces, among others, a way to create rounded boxes and add shadow for letters and boxes. Using just these 3 elements we can produce a […]","og_url":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html","og_site_name":"eFront Blog","article_published_time":"2010-07-12T05:46:00+00:00","article_modified_time":"2012-04-05T09:30:20+00:00","og_image":[{"url":"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png","type":"","width":"","height":""}],"author":"Athanasios Papagelis","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Athanasios Papagelis","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#article","isPartOf":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html"},"author":{"name":"Athanasios Papagelis","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965"},"headline":"Building an advanced eFront theme using CSS3 elements","datePublished":"2010-07-12T05:46:00+00:00","dateModified":"2012-04-05T09:30:20+00:00","mainEntityOfPage":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html"},"wordCount":454,"commentCount":0,"image":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage"},"thumbnailUrl":"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png","keywords":["LMS"],"articleSection":["eLearning","Product News"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html","url":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html","name":"Building an advanced eFront theme using CSS3 elements - eFront Blog","isPartOf":{"@id":"https:\/\/www.efrontlearning.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage"},"image":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage"},"thumbnailUrl":"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png","datePublished":"2010-07-12T05:46:00+00:00","dateModified":"2012-04-05T09:30:20+00:00","author":{"@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965"},"breadcrumb":{"@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#primaryimage","url":"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png","contentUrl":"http:\/\/4.bp.blogspot.com\/_uG8kGclhLWg\/TDsPvCQu8VI\/AAAAAAAAAAM\/fxTwkjxkOnE\/s400\/efront_html5_theme.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.efrontlearning.com\/blog\/2010\/07\/cssbuilding-advanced-efront-theme-using.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/www.efrontlearning.com\/blog"},{"@type":"ListItem","position":2,"name":"eLearning","item":"https:\/\/www.efrontlearning.com\/blog\/category\/elearning"},{"@type":"ListItem","position":3,"name":"Building an advanced eFront theme using CSS3 elements"}]},{"@type":"WebSite","@id":"https:\/\/www.efrontlearning.com\/blog\/#website","url":"https:\/\/www.efrontlearning.com\/blog\/","name":"eFront Blog","description":"eLearning tips, news and resources","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.efrontlearning.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/ecfb4e4ec6c24004c3dd5aca55bf8965","name":"Athanasios Papagelis","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.efrontlearning.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/86ee6b7fb7e6ddcf020458bdc1fd195c3a44ce3f6de7eff6ef6766f8b8731948?s=96&d=mm&r=g","caption":"Athanasios Papagelis"},"url":"https:\/\/www.efrontlearning.com\/blog\/author\/athanasios-papagelis"}]}},"_links":{"self":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/46","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/comments?post=46"}],"version-history":[{"count":4,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions"}],"predecessor-version":[{"id":335,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/posts\/46\/revisions\/335"}],"wp:attachment":[{"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/media?parent=46"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/categories?post=46"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.efrontlearning.com\/blog\/wp-json\/wp\/v2\/tags?post=46"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}