Planet Venus, skonfigurowana dzięki uprzejmości m.in. roziego, jakkolwiek funkcjonalnie mocno zbliżona do joggera, to jednak nie do końca to samo, głównie przez niedostatki warstwy graficznej. Dlatego też, po rozmowie z d4rky’m i wyrażonym w niej przezeń ostrożnym przypuszczeniu, że raczej chyba być może całkiem prawdopodobne, że nie pójdę za to do kryminału, zdecydowałem mimo wszystko z drżącą duszą o udostępnieniu stworzonego niedawno duetu do Venus: pliku szablonu oraz CSS, mających choć w części zabrać Was w krainę nostalgii i w jakiejś części nawiązać do ostatniego layoutu głównej strony joggera. Moja lokalna wersja PlanetJogger [oryginalne pliki roziego] po zastosowaniu „skórki” wygląda aktualnie tak:
Zalety [w porównaniu do istniejącego szablonu]:
- subiektywnie przyjaźniejszy, a obiektywnie bardziej przypominający joggera układ,
- niezerowa skalowalność, usuwająca na małych viewportach niepotrzebne i upierdliwe marginesy,
- możliwość relatywnie łatwej ingerencji w długość wpisu na stronie głównej [więcej o tym poniżej],
- możliwość dalszego upodobnienia do joggera – oczywiście z zastrzeżeniem poszanowania praw autorskich, w kwestii których prawdę mówiąc zdaję się na łaskę i niełaskę PT Community i projektantów oryginału.
Technikalia:
- całość testowana tylko lokalnie w lokalnym środowisku, tj. Chromium 14.04 @ Linux, i nigdzie indziej,
- na różne viewporty skaluje się… jakoś; nie bardzo wiem, jak, ale chyba niezgorzej,
- oryginalna grafika dociągana jest póki co z oryginalnego serwera [raptem bodajże tylko obrazek z logo…],
- nie do przejścia wydaje się niestety pasek z komentarzami pod każdym wpisem, a przynajmniej chwilowo poza moimi możliwościami – javascriptowe ograniczenie długości wpisu,
- inne elementy orginalnego interfejsu byłyby być może portowalne z sensem, ale do tego potrzebna byłaby ingerencja w kod planety, a na to nie mam niestety czasu; pomniejsze pierdółki dałoby się jeszcze przenieść, ale raczej tylko jako atrapy, do czego prawdę mówiąc niespecjalnie się palę.
Całość prezentowanej skórki składa się z dwóch plików, do wykorzystania na dowolnej licencji na dowolnej instalacji Planet Venus – z zastrzeżeniem pracy roziego oraz ewentualnych obostrzeń dot. pracy autorów oryginalnego layoutu.
Jeśli mamy dostęp do własnej instalacji planety, poniższy plik tmpl należy wgrać w miejsce standardowego szablonu generowania strony głównej, a CSS do katalogu, w którym tworzony jest wynikowy index.html. I już; po następnym wygenerowaniu treści przez planetę całość powinna zadziałać, a zmiany być już widoczne. Ten wariant nie wymaga żadnych zmian w przeglądarce po stronie klienta.
Wariantem, wymagającym niestety pewnej znajomości CSS w sytuacji, w której nikt nie udostępni nam zmodyfikowanej wersji planety, jest stworzenie na bazie podanego własnego pliku CSS i użycie go z wykorzystaniem Stylish we własnej przeglądarce. Tym wariantem bawiłem się wcześniej, ale udostępnia on mniej opcji z tego względu, że uzyskanie wyglądu strony, jak na screenie staje się łatwiejsze, jeśli zmodyfikujemy generowany index.html; bez dostępu do oryginalnego html nie można np. prosto wygenerować górnego paska na stronie, ciężko wygenerować prawidłowy układ „tytuł wpisu na górze – autor poniżej”, etc. Do tej wersji modyfikacji nie posiadam gotowych plików; jeśli ktoś byłby zainteresowany, spróbuję takowe stworzyć i również je udostępnię. Mam jednak nadzieję, że któryś z publicznych właścicieli planet zechce skorzystać z poniższych – oczywiście po testach.
Aktualnie widzę tylko jedną sensowną możliwość dostosowania poniższych ustawień do własnego systemu; maksymalną wysokość wpisu można zmienić poprzez regulację max-width w poniższym CSS. Jeśli usunąć z CSS zarówno max-width, jak i overflow, wówczas pod każdym wpisem pojawia się błękitny pasek, w oryginalnej wersji zawierający link do komentarzy; moim zdaniem ograniczenie długości wpisów na głównej jest jednak ważniejsze, niż „kolejne oczko kompatybilności UI”.
Obydwa pliki pisane „na kolanie”; wszelkie uwagi mile widziane.
Szablon generowanej strony index.html.tmpl
<!DOCTYPE HTML>
<html lang=pl>
<head>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta name="robots" content="noindex, follow, noarchive" />
<meta http-equiv=refresh content=1200 />
<title><TMPL_VAR name></title>
<link rel=alternate type=application/atom+xml href=/planetjogger/atom.xml title=Feed>
<style type=text/css media=screen>
html{background:#FFF}
html,a{color:#333333}
body{font:normal medium 'Gill Sans',Optima,Verdana,sans-serif;margin:40px auto 1em auto;width:70%;line-height:180%}
#footer{clear:both;text-align:center;font-size:small;background:#a2d1e0;color:#81a8b4}
h1,.feedflare{display:none}
.horizontal,.simple li{margin:0;padding:0;list-style:none;display:inline}
.simple li:before{content:"+ "}
.simple > li:first-child:before{content:""}
.author{text-decoration:none;margin-left:2em;font-size:small;background:#e8f4f8;color:#81a8b4;}}
ul{list-style:none;margin-left:0;padding-left:0}
li{clear:both}
.content{margin:1em 40px}
img{max-width:100%;height:auto;width:auto\9;border:0}
</style>
<link rel="stylesheet" type="text/css" href="jogger-like.css" />
</head>
<body>
<h1><TMPL_VAR name></h1>
<div class=top_bar></div>
<ul>
<TMPL_LOOP Items>
<li<TMPL_IF channel_language> lang="<TMPL_VAR channel_language>"</TMPL_IF>>
<h2 class=entry_head><TMPL_IF title> <a<TMPL_IF link> class=entry_title href="<TMPL_VAR link ESCAPE="HTML">"</TMPL_IF><TMPL_IF title_language> lang="<TMPL_VAR title_language>"</TMPL_IF>><TMPL_VAR title></a>
<a class=author href="<TMPL_VAR channel_link ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">"><TMPL_VAR channel_name ESCAPE="HTML"></a></h2>
</TMPL_IF>
<TMPL_IF content>
<div class="content"><TMPL_VAR content></div>
<div class=fake_comments></div>
</TMPL_IF></li>
</TMPL_LOOP></ul>
<hr>
<div id=footer>
Planeta agreguje wpisy z następujących blogów, których autorzy pisali kiedyś na Jogger.pl:
<ul class="simple horizontal">
<TMPL_LOOP Channels>
<li><a href="<TMPL_VAR link ESCAPE="HTML">" title="<TMPL_VAR title ESCAPE="HTML">"><TMPL_VAR name></a></li>
</TMPL_LOOP></ul>
Kod i konfiguracja: <a href="https://github.com/rozie/PlanetJogger">repozytorium GitHub</a>. Kontakt: <a href="https://zakr.es/">znajdziesz na głównej</a>.</div>
</body>
</html>
jogger-like.css
body {font-family: "Lucida Grande", "Lucida Sans Unicode", "Droid Sans", "Tahoma", sans-serif;}
body ul {padding-left: 0;}
body ul li {list-style-type: none;
margin-bottom: 20px;
border: 1px solid #a2d1e0;
border-left: none;
max-height: 30em;
overflow: hidden;}
body ul li a {text-decoration: none;}
.entry_head {font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 1.86em;}
.top_bar {height: 140px;
width: 100%;
background-color: #a2d1e0;
border-top-width: 9px;
border-top-style: solid;
border-top-color: #ee4e4e;
background-image: url(http://jogger.pl/t/s/i/joggerpl-logo.png);
background-repeat: no-repeat;
background-position: 40px 0;}
a.author {margin-left: 0; padding: 5px;}
.content {margin-left: 0;}
.fake_comments {height: 28px;
background-color: #e8f4f8;}
socjolocja 