From 24e370825db3ad367b158fad8062a65b51c37764 Mon Sep 17 00:00:00 2001 From: Dieter Hametner Date: Tue, 12 Jun 2007 21:31:32 +0000 Subject: - New theme orange-blue (see ChangeLog for more info). - Some minor style fixes. --- css/styles.css | 78 ++------ doc/ChangeLog | 15 ++ doc/css-themeing.txt | 34 ++-- images/button_blue.png | Bin 342 -> 406 bytes images/button_green.png | Bin 413 -> 452 bytes images/button_red.png | Bin 412 -> 463 bytes images/button_yellow.png | Bin 329 -> 411 bytes pages/recordings.ecpp | 10 +- themes/orange-blue/css/theme.css | 323 +++++++++++++++++++++++++++++++ themes/orange-blue/img/bg_box_h.png | Bin 0 -> 124 bytes themes/orange-blue/img/bg_box_l.png | Bin 0 -> 138 bytes themes/orange-blue/img/bg_box_r.png | Bin 0 -> 141 bytes themes/orange-blue/img/bg_header_h.png | Bin 0 -> 133 bytes themes/orange-blue/img/bg_header_l.png | Bin 0 -> 182 bytes themes/orange-blue/img/bg_header_r.png | Bin 0 -> 187 bytes themes/orange-blue/img/bg_line.png | Bin 0 -> 80 bytes themes/orange-blue/img/bg_line_top.png | Bin 0 -> 86 bytes themes/orange-blue/img/bg_tools.png | Bin 0 -> 160 bytes themes/orange-blue/img/logo.png | Bin 0 -> 13981 bytes themes/orange-blue/img/menu_line_bg.png | Bin 0 -> 126 bytes themes/orange-blue/img/remotecontrol.jpg | Bin 0 -> 16641 bytes themes/orange-blue/img/tv.jpg | Bin 0 -> 34467 bytes themes/orange-blue/img/zap.png | Bin 0 -> 873 bytes 23 files changed, 377 insertions(+), 83 deletions(-) create mode 100644 themes/orange-blue/css/theme.css create mode 100644 themes/orange-blue/img/bg_box_h.png create mode 100644 themes/orange-blue/img/bg_box_l.png create mode 100644 themes/orange-blue/img/bg_box_r.png create mode 100644 themes/orange-blue/img/bg_header_h.png create mode 100644 themes/orange-blue/img/bg_header_l.png create mode 100644 themes/orange-blue/img/bg_header_r.png create mode 100644 themes/orange-blue/img/bg_line.png create mode 100644 themes/orange-blue/img/bg_line_top.png create mode 100644 themes/orange-blue/img/bg_tools.png create mode 100644 themes/orange-blue/img/logo.png create mode 100644 themes/orange-blue/img/menu_line_bg.png create mode 100644 themes/orange-blue/img/remotecontrol.jpg create mode 100644 themes/orange-blue/img/tv.jpg create mode 100644 themes/orange-blue/img/zap.png diff --git a/css/styles.css b/css/styles.css index e29b3a8..69e0fa7 100644 --- a/css/styles.css +++ b/css/styles.css @@ -333,68 +333,10 @@ div#infobox div.st_controls div#infobox_channel_buttons { padding-left: 5px; } -/* ####################### - # Head Box - ####################### -*/ - -/* NOT USED -div.head_box_l { - background-image: url(bg_header_l.png); - background-position: top left; - background-repeat: no-repeat; - margin: 0; - margin-bottom: 2ex; - padding: 0; -} -*/ - -/* NOT USED -div.head_box_m { - background-image: url(bg_header_h.png); - background-repeat: repeat-x; - margin: 3px; - padding: 0; -} +/* ################################# + # Buttons + ################################# */ - -/* NOT USED -div.head_box_r { - background-image: url(bg_header_r.png); - background-position: top right; - background-repeat: no-repeat; - margin: -3px; - padding: 0; - padding-left: 0.5em; -} -*/ - -/* NOT USED: -table.head_box_text { - color: #ffffff; - font-weight: bold; - padding: 0; - margin: 0; - height: 30px; -} -*/ - -/* NOT USED: -button.smallbutton { - width: 51px; - height: 17px; - background-color: inherit; - background-image: url(button_blue.png); - background-repeat: no-repeat; - color: #FFFFFF; - font-size: 11px; - border: 0px; - vertical-align: middle; - text-align: center; - cursor: pointer; -} -*/ - button.green { width: 100px; height: 20px; @@ -440,6 +382,11 @@ button.blue { padding-bottom: 3px; } + +/* ################################ + # general table cell classes + ################################ +*/ table td.buttonpanel { text-align: right; } @@ -572,6 +519,14 @@ div.description { margin: 5px; } +div.title { + margin: 5px; +} + +div.short { + margin: 5px; +} + div.info { text-align: right; padding: 5px; @@ -941,7 +896,6 @@ table.formular tr td.label { } table.formular tr.head td { - background: white; color: white; font-weight: bold; margin: 0; diff --git a/doc/ChangeLog b/doc/ChangeLog index 97ea096..2576af5 100644 --- a/doc/ChangeLog +++ b/doc/ChangeLog @@ -1,3 +1,18 @@ +2007-06-12 Dieter Hametner + + Added orange-blue theme as an example of a theme with dark + background and light foreground colors. This theme also + demonstrates the use of exchanged images (logo.png, tv.jpg and + remotecontrol.jpg) + + * styles.css: some minor style fixes, that became visible while + creating the orange-blue theme. + +2007-06-11 Dieter Hametner + + Fixed style layout of the tables. Added class 'bottomrow' to the + rows that are followed by empty spacer rows. + 2007-06-06 Dieter Hametner Use GetConfigDir instead of USRDIR define. diff --git a/doc/css-themeing.txt b/doc/css-themeing.txt index 3148838..7b9137d 100644 --- a/doc/css-themeing.txt +++ b/doc/css-themeing.txt @@ -58,11 +58,11 @@ Location of the resources in the file system -------------------------------------------- All themable content must be present in the directory specified by -USRDIR. The default USRDIR is /usr/share/vdr-plugin-live. This can be -changed at compile time by setting the USRDIR variable -(i.E. USRDIR=/tmp/live make). - -That means all themes must reside in USRDIR/themes. +'GetConfigDir'. GetConfigDir returns at runtime the position in the +filesystem where the plugins configuration file is stored. The +location is build from the vdr config path appended with the plugins +name (i.E. /var/lib/vdr/plugins/live). The themes are located in the +'themes' subdirectory of the above path. Structure of a theme package @@ -89,25 +89,25 @@ Selecting a theme in live In the live setup page, the user can select the desired theme. When the settings are saved the selected themes become active. Live detects the available themes dynamicaly by scanning the 'themes' directory in -USERDIR for available themes and creates the select box from this -information. +plugins config directory for available themes and creates the select +box from this information. So the installation of a new theme is easyly done by unpacking a -theme-archive in USRDIR/themes. This assumes the theme-archive follows -the structure of a theme package as described above. +theme-archive in the themes directory. This assumes the theme-archive +follows the structure of a theme package as described above. Security provisions ------------------- Live will map every url starting with themes//css or -themes//img to exactly these directories under USRDIR. That -means any path components after 'img' or 'css' are discarded. Only the -basename of the url is appended to these directories. This is to -prevent possible malicous requests to other locations in the -filesystem by adding '..' to the request path. The downside of this -is, that no additional directories below 'img' and 'css' are possible -for the theme designer. +themes//img to exactly these directories under the location +of the themes directory. That means any path components after 'img' or +'css' are discarded. Only the basename of the url is appended to these +directories. This is to prevent possible malicous requests to other +locations in the filesystem by adding '..' to the request path. The +downside of this is, that no additional directories below 'img' and +'css' are possible for the theme designer. User Contribution @@ -116,5 +116,5 @@ User Contribution If you created a nice new look, you can provide it to us. We will try to include it into the live distribution. -If you need special html support for your styling needs don't hesitate +If you need special html support for your styling needs, don't hesitate to submit a suggestion. diff --git a/images/button_blue.png b/images/button_blue.png index 722c9de..f18eb4e 100644 Binary files a/images/button_blue.png and b/images/button_blue.png differ diff --git a/images/button_green.png b/images/button_green.png index 45074cf..23b40bd 100644 Binary files a/images/button_green.png and b/images/button_green.png differ diff --git a/images/button_red.png b/images/button_red.png index cfe76b3..5492ec7 100644 Binary files a/images/button_red.png and b/images/button_red.png differ diff --git a/images/button_yellow.png b/images/button_yellow.png index 18fcae3..02c00cf 100644 Binary files a/images/button_yellow.png and b/images/button_yellow.png differ diff --git a/pages/recordings.ecpp b/pages/recordings.ecpp index 6695925..21d1f14 100644 --- a/pages/recordings.ecpp +++ b/pages/recordings.ecpp @@ -43,18 +43,20 @@ EpgEvents epgEvents;
<$ tr("List of recordings") $>
% if (Recordings.Count() == 0) { - <$ tr("No recordings found") $> + <$ tr("No recordings found") $> % } else {
    <& recordings.recordings_item &>
- % }
+% if (Recordings.Count() > 0) { + +% } <%include>page_exit.eh diff --git a/themes/orange-blue/css/theme.css b/themes/orange-blue/css/theme.css new file mode 100644 index 0000000..a9fa79b --- /dev/null +++ b/themes/orange-blue/css/theme.css @@ -0,0 +1,323 @@ +/* ###################### + # Globals + ###################### +*/ +body { + background-color: #081966; + color: white; +} + +table { + background-color: #263480; +} + +input { + border: 1px solid #081966; + background: #DDDDFF; +} + +select { + border: 1px solid #081966; + background: #DDDDFF; +} + +/* ###################### + # Tooltip style for hints + ###################### +*/ + +div.domTThint { + border: 1px solid #FCB840; + background-color: #EEEEFF; + color: black; +} + + +/* ############################## + # Tooltip style for epg infos + ############################## +*/ + +.domTTepg div.epg_content { + border-left: 1px solid #fffddd; + border-right: 1px solid #fffddd; + border-bottom: 1px solid #fffddd; + background: #263480 url(../img/bg_tools.png) top left repeat-y; +} + +/* ####################### + # Menue + ####################### +*/ + +div.menu { + background: #FCBC40 url(../img/menu_line_bg.png) repeat-x; + border-top: 1px solid #FFFDDD; + border-bottom: 1px solid #FFFDDD; + color: #122DBA; +} + +div.menu a { + color: black; +} + +a#login { + color: red; +} + +div.menu a.active { + color: #122DBA; +} + +div.pagemenu { + background: #FFFFFF url(../img/bg_line.png) top repeat-x; +} + +div.pagemenu div { + background: #FFFFFF url(../img/bg_line_top.png) bottom repeat-x; +} + +div.pagemenu div div { + background: #122DBA; + border-top: 1px solid #C0C0FF; + border-bottom: 1px solid #C0C0FF; +} + +div.pagemenu a { + color: #FCBC40; +} + +div.pagemenu a.active { + color: #FFFDDD; +} + +div.pagemenu span { + color: #FCBC40; +} + +div.pagemenu span.sep { + color: #FCBC40; +} + +/* ####################### + # Info Box (near logo) + ####################### +*/ + +div#infobox { + border: 1px solid #FCBC40; +} + +div#infobox div.st_header { + background: #122DBA; + border-bottom: 1px solid #C0C0FF; +} + +div#infobox div.st_content { + background: #081966 url(../img/bg_line_top.png) top left repeat-x; +} + +div#infobox div.st_controls div.st_update { + border-right: 1px solid #FCBC40; +} + +/* ################################ + # general table cell classes + ################################ +*/ + +table td.bottomrow { + border-bottom: 1px solid #FFFDDD !important; +} + +table td.leftcol { + border-left: 1px solid #FFFDDD; +} + +table td.rightcol { + border-right: 1px solid #FFFDDD; +} + + +/* ################ + # Event + ################ +*/ + +div.station div { + background: url(../img/bg_box_l.png) top left no-repeat; +} + +div.station div div { + background: url(../img/bg_box_r.png) top right no-repeat; +} + +div.station div div div { + background: url(../img/bg_box_h.png) repeat-x; +} + +div.station div div div a { + color: #000000; +} + +td div.station a { + color: #FCBC40; +} + +div.content { + background: #263480 url(../img/bg_tools.png) top left repeat-y; + border-left: 1px solid #FFFDDD; + border-right: 1px solid #FFFDDD; + border-bottom: 1px solid #FFFDDD; +} + +div.__progress { + border: 1px solid #C0C0FF; +} + +div.__progress div.__elapsed { + background-color: #FCB840; +} + + +/* ############# + # Timers + ############# +*/ + +table.listing tr td { + /* background: url(../img/bg_line.png) bottom repeat-x; */ + background: transparent; + border-bottom: 1px solid #FCBC40; +} + +table.listing tr.description td { + background: #122DBA; +} + +table.listing tr td.current { + color: #FCBC40; +} + +table.listing tr.spacer td { + background-color: #081966; +} + +table.listing a { + color: #FCBC40; +} + + +/* + ############################## + # Blue Background Thingy + ############################## +*/ + +div.boxheader { + background: url(../img/bg_box_l.png) top left no-repeat; +} + +div.boxheader div { + background: url(../img/bg_box_r.png) top right no-repeat; +} + +div.boxheader div div { + background: url(../img/bg_box_h.png) repeat-x; + color: black; +} + +/* + ############################## + # Recordings + ############################## +*/ + +div.recordings { + border: 1px solid #FFFDDD; + background-color: #263480; +} + +div.recording_item { + /* background: url(../img/bg_line.png) bottom repeat-x; */ + background: transparent; + border-bottom: 1px solid #FCBC40; +} + + +/* + ############################## + # Remote Control Keypad + ############################## +*/ + +div.screenshot { + background-image: url(../img/tv.jpg); +} + + +/* + ############################## + # Dotted Frame + ############################## +*/ + +div.dotted { + border: 1px dotted #bbbbbb; + padding: 3px; + margin: 2px; + float: left; + background-color: #122dBA; +} + + +/* + ############################## + # Edit Tables + ############################## +*/ + +table.formular tr td { + /* background: url(../img/bg_line.png) bottom repeat-x; */ + background: transparent; + border-bottom: 1px solid #FCBC40; +} + +table.dependent { + background-color: #263480; +} + + +/* ############################## + # About box + ############################## +*/ + +div.about_box a { + color: #FCBC40; +} + +.about_box div.about_content { + border-left: 1px solid #FFFDDD; + border-right: 1px solid #FFFDDD; + border-bottom: 1px solid #FFFDDD; +} + +.about_box div.about_content div { + background-color: #081966; + padding-bottom: 6px; +} + +.about_box div.about_content div.about_head { + background: #081966 url(../img/bg_line.png) top repeat-x; +} + +.about_box div.about_content div.about_head div { + background: #FFFFFF url(../img/bg_line_top.png) bottom repeat-x; +} + +.about_box div.about_content div.about_head div div { + background: #122DBA; + border-top: 1px solid #FCBC40; + border-bottom: 1px solid #FCBC40; +} diff --git a/themes/orange-blue/img/bg_box_h.png b/themes/orange-blue/img/bg_box_h.png new file mode 100644 index 0000000..5278328 Binary files /dev/null and b/themes/orange-blue/img/bg_box_h.png differ diff --git a/themes/orange-blue/img/bg_box_l.png b/themes/orange-blue/img/bg_box_l.png new file mode 100644 index 0000000..18e61bc Binary files /dev/null and b/themes/orange-blue/img/bg_box_l.png differ diff --git a/themes/orange-blue/img/bg_box_r.png b/themes/orange-blue/img/bg_box_r.png new file mode 100644 index 0000000..dedf3f6 Binary files /dev/null and b/themes/orange-blue/img/bg_box_r.png differ diff --git a/themes/orange-blue/img/bg_header_h.png b/themes/orange-blue/img/bg_header_h.png new file mode 100644 index 0000000..0683ec4 Binary files /dev/null and b/themes/orange-blue/img/bg_header_h.png differ diff --git a/themes/orange-blue/img/bg_header_l.png b/themes/orange-blue/img/bg_header_l.png new file mode 100644 index 0000000..8f19326 Binary files /dev/null and b/themes/orange-blue/img/bg_header_l.png differ diff --git a/themes/orange-blue/img/bg_header_r.png b/themes/orange-blue/img/bg_header_r.png new file mode 100644 index 0000000..985a2cf Binary files /dev/null and b/themes/orange-blue/img/bg_header_r.png differ diff --git a/themes/orange-blue/img/bg_line.png b/themes/orange-blue/img/bg_line.png new file mode 100644 index 0000000..1bfa8c4 Binary files /dev/null and b/themes/orange-blue/img/bg_line.png differ diff --git a/themes/orange-blue/img/bg_line_top.png b/themes/orange-blue/img/bg_line_top.png new file mode 100644 index 0000000..2fcde11 Binary files /dev/null and b/themes/orange-blue/img/bg_line_top.png differ diff --git a/themes/orange-blue/img/bg_tools.png b/themes/orange-blue/img/bg_tools.png new file mode 100644 index 0000000..871947a Binary files /dev/null and b/themes/orange-blue/img/bg_tools.png differ diff --git a/themes/orange-blue/img/logo.png b/themes/orange-blue/img/logo.png new file mode 100644 index 0000000..5a27635 Binary files /dev/null and b/themes/orange-blue/img/logo.png differ diff --git a/themes/orange-blue/img/menu_line_bg.png b/themes/orange-blue/img/menu_line_bg.png new file mode 100644 index 0000000..0346cdb Binary files /dev/null and b/themes/orange-blue/img/menu_line_bg.png differ diff --git a/themes/orange-blue/img/remotecontrol.jpg b/themes/orange-blue/img/remotecontrol.jpg new file mode 100644 index 0000000..89447c8 Binary files /dev/null and b/themes/orange-blue/img/remotecontrol.jpg differ diff --git a/themes/orange-blue/img/tv.jpg b/themes/orange-blue/img/tv.jpg new file mode 100644 index 0000000..5d4dab8 Binary files /dev/null and b/themes/orange-blue/img/tv.jpg differ diff --git a/themes/orange-blue/img/zap.png b/themes/orange-blue/img/zap.png new file mode 100644 index 0000000..d5d8628 Binary files /dev/null and b/themes/orange-blue/img/zap.png differ -- cgit v1.2.3