diff options
author | Yorhel <git@yorhel.nl> | 2008-12-21 11:26:56 +0100 |
---|---|---|
committer | Yorhel <git@yorhel.nl> | 2008-12-21 11:26:56 +0100 |
commit | 7ad6213b615f925684bd5afd52f064c7e29653fa (patch) | |
tree | 5d8fd58812ede4d574c7970e4d414009792e16a9 | |
parent | 4b89163955f33bfb49b774de48a701daebec374f (diff) |
Basic skin generator + example skin for testing
How it works:
Create new directory in static/s/
Create a 'conf' file (see the test skin for a template)
Run skingen.pl, which will generate a style.css and boxbg.png
This process will probably be automated using a simple web interface
or something...
There's no skin selector yet, so Util/LayoutHTML.pm has to be modified
to view the generated skin.
-rw-r--r-- | .gitignore | 2 | ||||
-rw-r--r-- | lib/VNDB/Util/LayoutHTML.pm | 1 | ||||
-rw-r--r-- | static/f/style.css | 10 | ||||
-rw-r--r-- | static/s/test/conf | 18 | ||||
-rwxr-xr-x | util/skingen.pl | 264 |
5 files changed, 289 insertions, 6 deletions
@@ -1,5 +1,7 @@ /data/config.pl /data/log/ +/static/s/*/style.css +/static/s/*/boxbg.png /static/cv/ /static/rg/ /static/sf/ diff --git a/lib/VNDB/Util/LayoutHTML.pm b/lib/VNDB/Util/LayoutHTML.pm index e5ced8f6..0c125b35 100644 --- a/lib/VNDB/Util/LayoutHTML.pm +++ b/lib/VNDB/Util/LayoutHTML.pm @@ -19,6 +19,7 @@ sub htmlHeader { # %options->{ title, js, noindex, search } title $o{title}; Link rel => 'shortcut icon', href => '/favicon.ico', type => 'image/x-icon'; Link rel => 'stylesheet', href => $self->{url_static}.'/f/style.css', type => 'text/css', media => 'all'; + Link rel => 'stylesheet', href => $self->{url_static}.'/s/test/style.css', type => 'text/css', media => 'all'; if($o{js}) { script type => 'text/javascript', src => $self->{url_static}.'/f/forms.js'; end; } diff --git a/static/f/style.css b/static/f/style.css index 92062a76..cbb012f5 100644 --- a/static/f/style.css +++ b/static/f/style.css @@ -116,7 +116,7 @@ optgroup option { font-style: normal; } input.submit { - background-color: #123; + background: url(/f/boxbg.png) repeat; padding: 1px; } input.text, select { @@ -229,14 +229,14 @@ b.future { #menulist div.menubox { margin: 0 0 10px 0; border: 1px solid #258; - background: url(boxbg.png) repeat; + background: url(/f/boxbg.png) repeat; } #menulist div.menubox div { padding: 2px 7px; } #menulist h2 { border-bottom: 1px solid #258; - background-color: #234; + background: url(/f/boxbg.png) repeat; padding: 1px 3px; } #menulist h2, #menulist h2 a { @@ -549,7 +549,7 @@ div.vndetails table dd { margin-left: 90px; } .catlvl_0, .catlvl_1, .catlvl_2, .catlvl_3 { font-style: normal; } -.catlvl_1 { color: #444!important } +.catlvl_1 { color: #444 } .catlvl_2 { color: #777 } .catlvl_3 { color: #fff } div.vndetails td.relations dt { @@ -688,7 +688,6 @@ a.help { padding-left: 1px; } #maincontent #jt_box_categories li li a { - color: #ccc; text-decoration: none; display: block; width: 160px; @@ -961,7 +960,6 @@ div.revision div, div.revision table { border: 1px solid #258; margin: 0 auto; width: 90%; - /*background: url(/f/boxbg.png) repeat;*/ background-color: #13273a; clear: both; } diff --git a/static/s/test/conf b/static/s/test/conf new file mode 100644 index 00000000..d7e19420 --- /dev/null +++ b/static/s/test/conf @@ -0,0 +1,18 @@ +name test +fullname Testlayout +bodybg #000 // main background color +maintext #ddd // primary text color +alttitle #fff // alternative title + menu link color +link #7bd // primary link color +tabbg #012 // background color of inactive tabs +maintitle #123 // text color of the site title +footer #123 // text color of the footer +border #258 // primary border color +standout #e44 // color of 'stand-out' text +secbg #135 // secondary background color (used on input fields and table headers) +secborder #35A // secondary border color (used on input fields) +statok #0c0 // generic 'ok' text color (used for vnlist statuses & category browser) +statnok #c00 // generoc 'not ok' text color (used for above, and as border for NSFW screenshots) +boxbg #112233BC // RGBA, background color of the boxes. +imglefttop 0 // bg.jpg +imgrighttop 0 // bgright.jpg diff --git a/util/skingen.pl b/util/skingen.pl new file mode 100755 index 00000000..2c50ac76 --- /dev/null +++ b/util/skingen.pl @@ -0,0 +1,264 @@ +#!/usr/bin/perl + +use strict; +use warnings; +use Cwd 'abs_path'; +use Data::Dumper 'Dumper'; +use Image::Magick; + + +our $ROOT; +BEGIN { ($ROOT = abs_path $0) =~ s{/util/skingen\.pl$}{}; } + + +if(@ARGV) { + writeskin(readskin($_)) for (@ARGV); +} else { + /([^\/]+)$/ && writeskin(readskin($1)) for (glob($ROOT.'/static/s/*')); +} + + +sub readskin { # skin name + my $name = shift; + my %o; + open my $F, '<', $ROOT.'/static/s/'.$name.'/conf' or die $!; + while(<$F>) { + chomp; + s{[\t\s]*//.+$}{}; + next if !/^([a-z0-9]+)[\t\s]+(.+)$/; + $o{$1} = $2; + } + close $F; + return \%o; +} + + +sub writeskin { # $obj + my $o = shift; + open my $F, '>', $ROOT.'/static/s/'.$o->{name}.'/style.css' or die $!; + + # fix image locations + $o->{$_} && ($o->{$_} = '/s/'.$o->{name}.'/'.$o->{$_}) for (qw|imglefttop imgrighttop|); + + # get the right top image + if($o->{imgrighttop}) { + my $img = Image::Magick->new; + $img->Read($ROOT.'/static'.$o->{imgrighttop}); + $o->{_bgright} = sprintf 'background: url(%s) no-repeat; width: %dpx; height: %dpx', + $o->{imgrighttop}, $img->Get('width'), $img->Get('height'); + } else { + $o->{_bgright} = 'display: none'; + } + + # body background + if(!$o->{imglefttop}) { + $o->{_bodybg} = "background-image: none; background-color: $o->{bodybg}"; + } else { + $o->{_bodybg} = "background: $o->{bodybg} url($o->{imglefttop}) no-repeat"; + } + + # create boxbg.png + my $img = Image::Magick->new(size => '1x1'); + $img->Read('xc:'.$o->{boxbg}); + $img->Write(filename => $ROOT.'/static/s/'.$o->{name}.'/boxbg.png'); + $o->{_boxbg} = '/s/'.$o->{name}.'/boxbg.png'; + + # get the blend color + $img = Image::Magick->new(size => '1x1'); + $img->Read('xc:'.$o->{bodybg}, 'xc:'.$o->{boxbg}); + $img = $img->Flatten(); + $o->{_blendbg} = '#'.join '', map sprintf('%02x', $_*256), $img->GetPixel(x=>1,y=>1); + + my $d = join '', (<DATA>); + $d =~ s/\$$_\$/$o->{$_}/g for (keys %$o); + print $F $d; + close $F; +} + + +1; + + +__DATA__ +/* main background image and color */ +body { + $_bodybg$ +} + + +/* main text color */ +body, +#maincontent .releases td.tc5 a, +#maincontent #jt_box_categories li li a { + color: $maintext$; /* maintext */ +} + + +/* menu link and secondary title color */ +a, +#maincontent p.browseopts a, +#maincontent h2.alttitle, +#menulist h2, +#menulist h2 a, +#maincontent p.browseopts a { + color: $alttitle$; /* alttitle */ +} +a:hover { + border-bottom: 1px dotted $alttitle$; /* alttitle */ +} + + +/* main link color */ +#maincontent div.mainbox a { + color: $link$; /* link */ +} + + +/* transparent image (used in multiple layers, so has to be transparent) */ +div#iv_view, +#jt_box_visual_novels span.odd, +#jt_box_producers span.odd, +#ds_box tr.selected, +.releases tr.lang td, +#screenshots tr.rel td, +#menulist div.menubox, +#maincontent div.mainbox, +table tr.odd, +.docs ul.index, +input.submit, +#menulist h2 { + background: url($_boxbg$) repeat; /* Box BG */ +} + + +/* bg color of the tabs */ +#maincontent ul.maintabs li a { + background-color: $tabbg$; /* tabbg */ +} + +/* the color you get when blending the transparent image on the body bg */ +#maincontent ul.maintabs li.tabselected a, +#maincontent ul.maintabs li a:hover { + background-color: $_blendbg$; /* blendbg */ +} + + +/* the small image on the top-right (make sure to update the image size) */ +#bgright { + $_bgright$ +} + + +/* site title */ +#header h1, #header h1 a { + color: $maintitle$; /* maintitle */ +} + + +/* footer text color */ +#footer, #footer a { + color: $footer$; /* footer */ +} + + +/* darkened/grayed-out text color */ +#maincontent h1.boxtitle, +#maincontent h1.boxtitle a, +div.mainbox.discussions td.tags a, +div.thread i.edit, +div.thread i.lastmod, +div.thread i.deleted, +div.mainbox.history td.editsum, +#maincontent h1, +.docs dt b { + color: $border$!important; /* border */ +} + + +/* stand-out text color */ +b.future, p.locked { + color: $standout$; /* standout */ +} + + +/* primary border color (usually the same as above) */ +#maincontent div.mainbox, +#menulist div.menubox, +#menulist h2, +#maincontent ul.maintabs li a, +#maincontent ul.maintabs.bottom li a, +p.browseopts a, +div.thread td, +div.thread td.tc1, +div.vndescription h2, +#screenshots td.scr a:hover img, +#ds_box, +#scr_table td, +#advoptions, +.docs ul.index, +div.revision div, +div.revision table, +div.revision table td, +div#iv_view { + border-color: $border$; /* border */ +} + +/* same color is also used for the vote graph */ +.votegraph td div { + background-color: $border$; /* border */ +} + + + +/* secondary bg color */ +table thead td, input.text, input.submit, select, textarea { + background-color: $secbg$; /* secbg */ +} + +/* secondary border color */ +input.text, input.submit, select, textarea { + border: 1px solid $secborder$; /* secborder */ +} + + +/* status colors */ +b.done, ul#catselect li li.inc { color: $statok$ } /* statok */ +b.todo, ul#catselect li li.exc { color: $statnok$ } /* statnok */ +#screenshots td.scr div.nsfw img { border-color: $statnok$ } /* statnok */ + + + + + +/****** Not too sure what to do with these *******/ + + + +/* category levels - calculate from maintext? */ +.catlvl_1 { color: #444 } +.catlvl_2 { color: #777 } +.catlvl_3 { color: #fff } + + +/* bg color of the dropdown search and revision tables (use an other already existing color?) */ +#ds_box, div.revision div, div.revision table { + background-color: #13273a; +} + + +/* warning and notice boxes - the maintext color must be readable on these... */ +div.warning { + background-color: #534; + border: 1px solid #C00; +} +div.notice { + background-color: #354; + border: 1px solid #0C0; +} + + +/* diff colors - calculate from maintext? */ +.diff_add { background-color: #354; } +.diff_del { background-color: #534; } + + |