Skip to content

Commit

Permalink
Updated setup wizard styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@andrerom
andrerom committed May 16, 2012
1 parent 22c0f07 commit 74a77bf
Show file tree
Hide file tree
Showing 4 changed files with 238 additions and 97 deletions.
Binary file added design/standard/images/setup/2/ez-ecosystem-virtuous-circle.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added design/standard/images/setup/2/ez-publish-ce-40x460-png-24.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
205 changes: 205 additions & 0 deletions design/standard/stylesheets/setup2.css
View file
@@ -0,0 +1,205 @@
/*
* Styles specific for the setup wizard for Etna
*
* Uses some html5 and css3 features, but with safe defaults to be able to be also work on older browsers.
*/

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}

#debug {
max-width: 890px;
overflow-x: scroll;
}

body {
text-align: center;
/* Photo attributed (under CC for commercial use) to gnuckx, source: http://www.flickr.com/photos/gnuckx/5350361507/ */
background: #fff url('../images/setup/2/ez-ecosystem-virtuous-circle.png') no-repeat right top;
}


/* Layout */
section#page {
width: 782px;
margin: 20px auto 20px auto;
text-align: left;
font-family: Verdana, sans-serif;
border-radius: 10px;
background-color: #f0f0f0;
background-color: rgba(245,245,245,0.85);
}

header {
background: transparent url('../images/setup/2/ez-publish-ce-40x460-png-24.png') no-repeat 24px 20px;
height: 60px;
}

article {
width: 64%;
padding: 10px 2% 2% 2%;
float: left;
overflow-x: scroll;
}

aside.helptext {
width: 26%;
margin-top: 30px;
margin-bottom: 30px;
padding: 0 2% 2% 2%;
float: right;
height: 100%;
background-color: #aaa;
background-color: rgba(100,100,100,0.8);
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}


/* Addapt a bit, from a 800x600 server screen resulution to more normal desktop sizes */
@media all and (min-height: 800px) {
section#page {
margin-top: 80px;
}
}

@media all and (min-height: 1100px) {
section#page {
margin-top: 140px;
}
}


@media all and (min-width: 1000px) {
section#page {
width: 978px;
}
article {
width: 68%;
}
aside.helptext {
width: 23%;
}
}

@media all and (min-width: 1250px) {
section#page {
width: 1200px;
}
article {
width: 72%;
}
aside.helptext {
width: 20%;
}
}


/* Content */
section#content {
width: 100%;
overflow: auto;
}


aside.progressbar p {
text-align: right;
padding-right: 5px;
margin-bottom: -19px;
}

aside.progressbar div {
height: 25px;
background-color: #ccc;
background-image: -o-linear-gradient(bottom, rgb(168,168,168) 0%, rgb(255,255,255) 4%, rgb(184,184,184) 49%, rgb(255,255,255) 96%, rgb(168,168,168) 100%);
background-image: -moz-linear-gradient(bottom, rgb(168,168,168) 0%, rgb(255,255,255) 4%, rgb(184,184,184) 49%, rgb(255,255,255) 96%, rgb(168,168,168) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(168,168,168) 0%, rgb(255,255,255) 4%, rgb(184,184,184) 49%, rgb(255,255,255) 96%, rgb(168,168,168) 100%);
background-image: -ms-linear-gradient(bottom, rgb(168,168,168) 0%, rgb(255,255,255) 4%, rgb(184,184,184) 49%, rgb(255,255,255) 96%, rgb(168,168,168) 100%);
background-image: linear-gradient(bottom, rgb(168,168,168) 0%, rgb(255,255,255) 4%, rgb(184,184,184) 49%, rgb(255,255,255) 96%, rgb(168,168,168) 100%);
}

aside.progressbar div span {
display: block;
height: 25px;
background-color: rgb(255,102,10);
background-image: -o-linear-gradient(bottom, rgb(255,102,10) 0%, rgb(255,193,10) 4%, rgb(255,81,10) 49%, rgb(255,193,10) 96%, rgb(255,108,10) 100%);
background-image: -moz-linear-gradient(bottom, rgb(255,102,10) 0%, rgb(255,193,10) 4%, rgb(255,81,10) 49%, rgb(255,193,10) 96%, rgb(255,108,10) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(255,102,10) 0%, rgb(255,193,10) 4%, rgb(255,81,10) 49%, rgb(255,193,10) 96%, rgb(255,108,10) 100%);
background-image: -ms-linear-gradient(bottom, rgb(255,102,10) 0%, rgb(255,193,10) 4%, rgb(255,81,10) 49%, rgb(255,193,10) 96%, rgb(255,108,10) 100%);
background-image: linear-gradient(bottom, rgb(255,102,10) 0%, rgb(255,193,10) 4%, rgb(255,81,10) 49%, rgb(255,193,10) 96%, rgb(255,108,10) 100%);
}

footer {
text-align: center;
font-size: 90%;
padding-bottom: 10px;
}


/* setup.css override */
h1, h2, h3, h4, h5, h6, th.label, legend {
margin: 1em 0 0.2em 0;
font-weight: normal;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}

fieldset {
margin-top: 1em;
}

a, a:link, a:link.setup_final, div.setup_help a:link,
a:visited, a:visited.setup_final, div.setup_help a:visited {
color: #ff8c0f;
}

div.setup_summary_empty {
color: #afafaf;
}

input.button, button, input.defaultbutton, input.button-disabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
vertical-align: middle;
cursor: pointer;
font-size: 0.9em;
font-weight: normal;
width: auto;
overflow: visible;
padding: 0.27em 0.7em;
color: #fff;
background-color: #ff770f;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff8c0f), to(#ff660f));
background-image: -moz-linear-gradient(top, #ff8c0f, #ff660f);
background-image: -ms-linear-gradient(top, #ff8c0f, #ff660f);
background-image: -o-linear-gradient(top, #ff8c0f, #ff660f);
background-image: linear-gradient(top, #ff8c0f, #ff660f);
background-clip: padding-box;
border: 1px solid #ccccc3;
border-radius: 3px;
}

input.defaultbutton {
font-weight: bold;
padding: 0.5em 1.1em;
}

input.button-disabled, input.button[disabled="disabled"] {
cursor: default;
color: #999;
background: #e0e0e0;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#ddd));
background-image: -moz-linear-gradient(top, #eee, #ddd);
background-image: -ms-linear-gradient(top, #eee, #ddd);
background-image: -o-linear-gradient(top, #eee, #ddd);
background-image: linear-gradient(top, #eee, #ddd);
}
130 changes: 33 additions & 97 deletions design/standard/templates/setup_pagelayout.tpl
View file
@@ -1,74 +1,48 @@
{* DO NOT EDIT THIS FILE! Use an override template instead. *} {* DO NOT EDIT THIS FILE! Use an override template instead. *}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{$site.http_equiv.Content-language|wash}"> <html lang="{$site.http_equiv.Content-language|wash}">

<head> <head>
<!--[if lt IE 9]>
<script type="text/javascript">
// Make sure IE 6-8 is able to style html5 tags
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('meter');
</script>
<![endif]-->
<link rel="stylesheet" type="text/css" href={"stylesheets/core.css"|ezdesign} /> <link rel="stylesheet" type="text/css" href={"stylesheets/core.css"|ezdesign} />
<link rel="stylesheet" type="text/css" href={"stylesheets/debug.css"|ezdesign} /> <link rel="stylesheet" type="text/css" href={"stylesheets/debug.css"|ezdesign} />
<link rel="stylesheet" type="text/css" href={"stylesheets/setup.css"|ezdesign} /> <link rel="stylesheet" type="text/css" href={"stylesheets/setup.css"|ezdesign} />
<link rel="stylesheet" type="text/css" href={"stylesheets/setup2.css"|ezdesign} />

{include uri="design:page_head.tpl" enable_link=false()}


{include uri="design:page_head.tpl" enable_link=false()}
<link rel="Shortcut icon" href={"favicon.ico"|ezimage} type="image/x-icon" /> <link rel="Shortcut icon" href={"favicon.ico"|ezimage} type="image/x-icon" />


</head> </head>


<body style="background-color: #638ecf; margin: 0px; padding: 0px; background-image:url('{"setup/eZ_setup_bg_image.png"|ezimage(no)}'); background-repeat: repeat-x;"> <body>

<table class="layout" width="780" cellpadding="0" cellspacing="0" border="0">
<tr>

{* Top image START *}

<td class="setup_noborder" colspan="2" width="780">
<img src={"/design/standard/images/setup/eZ_setup_top.png"|ezroot} width="780" height="70" alt=""/>
</td>

{* Top image END *}

</tr>
<tr>

{* Left bar START *}

<td class="setup_noborder" width="20" background={"/design/standard/images/setup/eZ_setup_left_bar.png"|ezroot} style="background-repeat: no-repeat;">
</td>

{* Left bar END *}

<td class="setup_noborder">
<table class="layout" width="760" cellpadding="0" cellspacing="0" border="0">

{* Top view area START *}

<tr>
<td class="setup_noborder" width="11">
<img src={"/design/standard/images/setup/eZ_setup_top_left_corner.png"|ezroot} alt="" width="11" /></td>

<td class="setup_noborder_white" width="539">
</td>


<td class="setup_noborder_blue" width="199"> <section id="page">
</td>


<td class="setup_noborder" width="11"> <header>
<img src={"/design/standard/images/setup/eZ_setup_top_right_corner.png"|ezroot} alt="" width="11" /></td> </header>
</tr>


{* Top view area END *}

{* Main view area START *}

<tr height="421">
<td class="setup_main_area" width="550" colspan="2">


<section id="content">
<article>
{* Debug errors and warnings are displayed here *} {* Debug errors and warnings are displayed here *}
{include uri="design:page_warning.tpl"} {include uri="design:page_warning.tpl"}


{* Main stuff goes here *} {* Main stuff goes here *}
{$module_result.content} {$module_result.content}
</td> </article>


<td class="setup_noborder_blue" width="210" colspan="2"> <aside class="helptext">
<div class="setup_help"> <div class="setup_help">
{* Setup help *} {* Setup help *}
<h1 class="setup_help_summary">{"Help"|i18n("design/standard/setup")}</h1> <h1 class="setup_help_summary">{"Help"|i18n("design/standard/setup")}</h1>
Expand All @@ -79,58 +53,20 @@
<h1 class="setup_help_summary">{"Summary"|i18n("design/standard/setup")}</h1> <h1 class="setup_help_summary">{"Summary"|i18n("design/standard/setup")}</h1>
{$module_result.summary} {$module_result.summary}
</div> </div>
</td> </aside>
</tr> </section>

{* Main view area END *}

{* Bottom view area START *}

<tr>
<td class="setup_noborder" width="11">
<img src={"/design/standard/images/setup/eZ_setup_bottom_left_corner.png"|ezroot} alt="" width="11" /></td>

<td class="setup_noborder_white" width="539">
</td>

<td class="setup_noborder_blue" width="199">
</td>

<td class="setup_noborder" width="11">
<img src={"/design/standard/images/setup/eZ_setup_bottom_right_corner.png"|ezroot} alt="" width="11" /></td>
</tr>

{* Bottom view area END *}

</table>
</td>
</tr>

<tr height="6">
<td class="setup_noborder" colspan="2">
<img src{"1x1.gif"|ezimage} height="6" /></td>
</tr>

{* Progress bar START *}

<tr>
<td class="setup_noborder" width="20">
</td>


<td class="setup_noborder">
{include uri="design:setup/progress_bar.tpl" progress=$module_result.progress}
</td>
</tr>


{* Progress bar END *} <aside class="progressbar">
<p>{"&percent% completed"|i18n("design/standard/setup",,hash('&percent',$module_result.progress))}</p>
<div><span style="width: {$module_result.progress|wash}%;"></span></div>
</aside>


<tr> <footer>
<td colspan="2"> <p><a href="http://ez.no">eZ Publish&trade;</a> copyright &copy; 1999-2012 <a href="http://ez.no">eZ Systems AS</a></p>
{include uri="design:setup/page_copyright.tpl"} </footer>
</td>
</tr>


</table> </section>


<!--DEBUG_REPORT--> <!--DEBUG_REPORT-->


Expand Down

0 comments on commit 74a77bf

Please sign in to comment.