CSS styles modifications inside nickel

[pipcat]

This is a tool writen in python that allows to change all css styles located inside nickel file. There are two scripts, one to extract and one to patch.

- First step is to run python extract.py to get all css found in nickel.
- For each css stream a .css file is created (45 .css files for firmware 3.19.5761).
- Browse .css files to find out interesting things that could be changed.
- Modify .css files and run python patch.py to put them inside nickel.

Notes:
- Extracted .css files are easy to view and modify with any text/css editor.
- Css code inside nickel is detected on compressed and non-compressed streams. (24 and 21 for fw 3.19.5761)
- When you modify a .css file your code cannot be longer than original code. To allow some extra chars to add some css properties or change a font name, etc, if your code is longer it will be minified. That gives you additional characters, the number depends of css code (if longer and with comments, more to gain).
- When running patch.py if your code is too long an error message will be show, and you need to shorten maybe removing code related to other devices.
---------------------
New improved version v04: https://www.mobileread.com/forums/sho...2&postcount=22

[pipcat]

Info about extracted streams in firmware 3.19.5761:

- zlib-18.css : the longer css (41,7 kb). (entities)
- zlib-19.css : (generic classes)
- zlib-20.css : font sizes only for qApp_deviceIsAlyssum (Glo Hd).
- zlib-24.css : (smaller other recent book tiles, SmallRecentBookTile)
- zlib-26.css : related to Beta features (to enable/disable games).
- zlib-36.css : (biggest most recent book tile, RecentBookTile)
- ...
- nozlib-5.css : #InlineDictionaryView
- ...

[DNSB]

Originally Posted by pipcat

Info about extracted streams in firmware 3.19.5761:

- zlib-18.css : the longer css (41,7 kb). (entities)
- zlib-19.css : (generic classes)
- zlib-20.css : font sizes only for qApp_deviceIsAlyssum.
- zlib-26.css : related to Beta features (to enable/disable games).
- ...
- nozlib-5.css : #InlineDictionaryView
- ...

AFAIR, Alyssum was the code name for the Kobo Glo HD.

[jackie_w]

Well this is an ambitious little project!

For anyone interested, I was able to slightly increase the size of the Home screen Recent Book cover thumbnails by editing

• zlib-36.css (biggest most recent book tile, RecentBookTile)
• zlib-24.css (smaller other recent book tiles, SmallRecentBookTile)

[pipcat]

Thx jackie_w ;-) Could you post or send me your changes in zlib-24/36 to include them in modified-samples folder ?

[jackie_w]

Originally Posted by pipcat

Thx jackie_w ;-) Could you post or send me your changes in zlib-24/36 to include them in modified-samples folder ?

It's done simply by reducing the value of all occurrences of qproperty-coverBorder. I've changed all mine to a value of 1 rather than the default 4 or 6. You could reduce them all to zero but I found that covers with a light background tended to merge into the light-grey of the tile background.

I can't easily test this but you can probably also apply the same coverBorder tweak to:

• nozlib-14.css (PhoenixSmallRecentBookTile)
• zlib-38.css (PocketRecentlyReadTile)

BTW Several firmwares ago, this coverBorder tweak used to be one of GeoffR's/Metazoa patches until the code 'disappeared' from libnickel.so.1.0.0. Now, at last, we know where it went, so thanks for digging it up again

[pipcat]

In a similar way than with nickel, I wrote a script to extract css streams from libnickel, libadobe, etc. I attach script and extracted .css files. Because there are many streams in libnickel, there is no one .css file for each one but one for file with all streams. For instance there is no python patch, but they can be done with metazoa pack. The goal is to have a look to all css styles together. There are still some other css in utf-16 strings that are not detected with this script.

Extraction for firmware 3.19.5761:
634 css streams in libnickel.so.1.0.0
0 css streams in librmsdk.so.1.0.0
1 css streams in libadobe.so
21 css streams in libsudoku.so
3 css streams in librushhour.so

[pipcat]

Updated extractor and patcher for nickel css streams.
Now, all css streams are in one single file, simpler to manage.

A Kobo Glo Hd device accomplish condition IsAlyssum and also IsDragon. Do you know wich conditions are done on other devices? You can test it with attached patcher...

Readme:

Spoiler:

Tool to patch css styles inside nickel
======================================

- Copy your nickel file from your firmware to this folder.

- Execute python extract.py to extract all css streams to nickel-extracted.css
	With firmware 3.19.5761 there are 39 css streams (25 compressed, 14 .css non-compressed).

- Edit nickel-extracted.css, change what you want and save as nickel-modified.css
	Each css stream starts with a header like /* found: n (zlib/nozlib) pos: hex */
	Don't modify streams headers lines! Add your comments/changes in next lines.

	Your nickel-modified.css can contain only your modified streams or the whole streams.
	You can change streams order to organize them to your needs.

	Note that replaced css code could not be larger than original one.
	If your code is larger it will be minified to try to suit.
	Remove code related to other devices if you still need to shorten.

- Execute python patch.py to create a nickel-modif with your patches.
	Check messages to verify modifications are well done.

- Execute ./publish.sh to create KoboRoot.tgz, and copy to folder .kobo/ in your device.
	For windows it should be a publish.bat (if you can do, please post it to include ;-)


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

nickel-modified-myglohd.css is an example with some customizations for a Kobo Glo Hd.
- /* [MOD]: Enabled games in Beta features */
- /* [MOD]: Increased dictionary view */
- /* [MOD]: Removed cover border in small thumbnails (recent and new books) */
- /* [MOD]: Removed cover border in most recent book thumbnail */

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Info about streams in firmware 3.19.5761:
https://www.mobileread.com/forums/showpost.php?p=3328586&postcount=2

/* found: 1 (zlib) pos: 49ebf4 */    : the longer stream (41,7 kb). (entities)
/* found: 2 (zlib) pos: 49fbf7 */    : (generic classes)
/* found: 3 (zlib) pos: 4a002b */    : font sizes only for qApp_deviceIsAlyssum (Glo Hd).
/* found: 9 (zlib) pos: 4a0b96 */    : (smaller other recent book tiles, SmallRecentBookTile)
/* found: 12 (zlib) pos: 4a1388 */   : related to Beta features (to enable/disable games).
/* found: 16 (nozlib) pos: 4a192a */ : #InlineDictionaryView (to increase frame size)
/* found: 28 (zlib) pos: 4a3061 */   : (biggest most recent book tile, RecentBookTile)
/* found: 31 (zlib) pos: 4a39b1 */   : (PocketRecentlyReadTile)
/* found: 39 (nozlib) pos: 4a47b9 */ : (PhoenixSmallRecentBookTile)
... 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Notes:

Some css code are applyed depending of your devices type. For example:
- Glo Hd : qApp_deviceIsDragon="true", qApp_deviceIsAlyssum="true"

If you have another device, and you want to know wich conditions are done:
- a) in your nickel-modified.css, locate /* found: 12 (zlib) pos: 4a1388 */ and replace content with:
- b) or create an empty nickel-modified.css, add a first line with /* found: 12 (zlib) pos: 4a1388 */ and add content:
#spacerWidget,
#description {
  padding-right: 12px;
  padding-top: 12px;
}
#boggleContainer,
#solitaireContainer,
#rushHourContainer,
#browserContainer,
#sudokuContainer,
#sketchPadContainer {
  qproperty-bottomMargin: 10;
}
#boggleDescription,
#solitaireDescription,
#rushHourDescription,
#browserDescription,
#sudokuDescription,
#scribbleDescription {
  padding-top: 12px;
  padding-bottom: 12px;
}
/* To test which conditions are set on a device:  */
#boggleContainer[qApp_deviceIsTrilogy="true"] { qproperty-visible: false; }
#solitaireContainer[qApp_deviceIsPhoenix="true"] { qproperty-visible: false; }
#rushHourContainer[qApp_deviceIsDragon="true"] { qproperty-visible: false; }
#browserContainer[qApp_deviceIsAlyssum="true"] { qproperty-visible: false; }
#sudokuContainer[qApp_deviceIsPika="true"] { qproperty-visible: false; }
#sketchPadContainer[qApp_deviceIsTrilogy="true"] { qproperty-visible: false; }

- After patching your device, go to Beta Features, and check wich games you can't see.
If you can't see a game, his condition qApp_deviceIs... is accomplished.
If you post your device conditions, i will update this information.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Changes log:

v01:
- https://www.mobileread.com/forums/showpost.php?p=3327984&postcount=229

v02:
- https://www.mobileread.com/forums/showthread.php?t=274813
- Extract and patch also non-compressed css code.
- Added jmin to minify css code.
	https://pypi.python.org/pypi/jsmin

v03:
- Manage all css streams in one single file.
- Unified code for extracting and patching in a function.

[jackie_w]

@pipcat,

Thanks for your continued investigations.

Although modifying nickel this way is probably not for the technically faint-hearted the biggest problem will be that most Windows users will not have Python installed on their PC and so will not be able to run extract.py or patch.py. What they may not know is that if they do have calibre installed on the PC, it's possible to use the Python bundled inside calibre to run .py files.

This is a simple Windows .bat file to run extract.py via calibre's Python. It should be placed in the same directory as extract.py:

echo off
set STARTDIR=%~dp0
calibre-debug "%STARTDIR%extract.py"
PAUSE

patch.py can be run via a similar .bat file replacing the red bit with patch.py

[pipcat]

Interesting tip for windows users with Calibre, thx.
"technically faint-hearted"... I didn't know this expression, it's funny ;-)
I understand that no all windows users wants to install python, but executing a python script and edit a css file is not a high technical requirement. Ok, it's not for everybody, but it's not so difficult, at least for a developer's corner ;-D
And is it not easier to edit a css file (normally nice colored by editors) than to edit a typical patch file ?

[jackie_w]

A lot of users will be a bit hesitant when it comes to things like .bat, commandline and running scripts. But, yes, all degrees of difficulty are OK in a Developers Corner.

Editing CSS files is not particularly difficult but understanding exactly what each of those widgets and CSS streams do is not yet fully understood - at least by me. So editing something can be a bit try-it-and-hope-for-the-best.

Please don't think I'm trying to criticise because I don't mean to Uncovering things is a good start to a better understanding.

BTW, I discovered the widget called #bookCoverListTile in nickel, is the Homescreen tile labeled 'Library' for newly added books (shows one full & two partial cover thumbnails). I'm not sure there's any great point in tweaking it but I'm just sharing that it's possible.

[pipcat]

Hi jackie_w, I didn't think you criticise ;-) I really appreciate your comments very much! I'm sorry because I can't explain myself very well in english, and I can't express my feelings correctly ;-( Forums like this are good places to discuss/debate, that's nice!

Personally, I'm more hesitant to execute an .exe file without having its source code than to run a python script. And I agree with you that the difficulty of css is to understand where and when they are used, and we need to try-and-hope. But that's also the same (and really worst) when looking around disassembled code.

Anyway, this tool helps to investigate and try css customizations, at least for non-faint-hearted ;-). If some css changes are useful they can be packed for everybody in bad-eyes pack for example.

Let's continue to find interesting things in css:
- When I removed coverBorder (setting to 0) for SmallRecentBookTile and #RecentBookTile I missed another coverBorder to remove it from 'Library'. With your tip for #bookCoverListTile I found it. In this case there is no coverBorder and adding it does nothing, but setting qproperty-itemPadding to 0 (instead of 6) removes the borders. (located in /* found: 15 (zlib) pos: 4a17bd */)

[tshering]

Originally Posted by pipcat

Anyway, this tool helps to investigate and try css customizations, at least for non-faint-hearted ;-). If some css changes are useful they can be packed for everybody in bad-eyes pack for example.

In order to make packaging as bad-eyes pack easier, I published the css blocks in the bad-eyes format here. Maybe I should also explain how to run the bad-eyes patchit.exe in test mode.

[pipcat]

Originally Posted by tshering

In order to make packaging as bad-eyes pack easier, I published the css blocks in the bad-eyes format here. Maybe I should also explain how to run the bad-eyes patchit.exe in test mode.

I updated extract script to create also all the streams in bad-eyes format. I attach them. Tshering, is it ok ? If so, I will add the same in patch process, generating newpart with customized values.
Two questions about your patchit.exe :
Is it ok if newpart is shorter than oldpart ? (if you change four byte size value when non-compressed values, it should be ok).
If there are 5 oldpart in a patch, is it ok if only 3 newpart ? (or we need 5 newpart lines, last two emptys ?)

[pipcat]

Updated patch-nickel-css scripts, with an option to generate bad-eyes format. Instead of executing python patch.py we can run python patch_badeyes.py and get a .txt with our customizations for bad-eyes pack.

Tshering, these are two examples, zlib and not, with myglohd.css modifications. newpart are some lines shorter than oldpart. Is that ok for patchit.exe ?

Spoiler:

<patch>
name=4A192E (found 16, nozlib)
enabled=true
action=replace_string
position=autodetect
oldpart=#InlineDictionaryView {\n\tmin-width: 500px;\n\tmax-width: 500px;\n\tmin-height: 220px;\n\tmax-height: 220px;\n}\n
oldpart=#InlineDictionaryView[qApp_deviceIsPhoenix="true"] {\n\tmin-width: 650px;\n\tmax-width: 650px;\n\tmin-height: 280px;\n\tmax-height: 280px;\n}\n
oldpart=#InlineDictionaryView[qApp_deviceIsDragon="true"] {\n\tmin-width: 980px;\n\tmax-width: 980px;\n\tmin-height: 350px;\n\tmax-height: 350px;\n}\n
newpart=/* [MOD]: Increased dictionary view */\n#InlineDictionaryView {\n\tmin-width: 980px;\n\tmax-width: 980px;\n\tmin-height: 400px;\n\tmax-height: 400px;\n}\n
combineparts
</patch>

Spoiler:

<patch>
name=4A3061 (found 28, zlib)
enabled=true
action=replace_zlib
position=autodetect
oldpart=#RecentBookTile[qApp_deviceIsTrilogy="true"] {\n qproperty-percentFontSize: 20;\n qproperty-progressFontSize: 20;\n qproperty-topMargin: 15;\n qproperty-coverBorder: 4;\n}\n
oldpart=#RecentBookTile[qApp_deviceIsPhoenix="true"] {\n qproperty-percentFontSize: 28;\n qproperty-progressFontSize: 22;\n qproperty-topMargin: 15;\n qproperty-coverBorder: 4;\n}\n
oldpart=#RecentBookTile[qApp_deviceIsDragon="true"] {\n qproperty-percentFontSize: 36;\n qproperty-progressFontSize: 26;\n qproperty-topMargin: 20;\n qproperty-coverBorder: 6;\n}\n
oldpart=#RecentBookTile[qApp_deviceIsAlyssum="true"] {\n qproperty-percentFontSize: 39;\n qproperty-progressFontSize: 30;\n qproperty-topMargin: 20;\n qproperty-coverBorder: 6;\n}\n
oldpart=#recentBookTileInfo {\n background-color: transparent;\n}\n
oldpart=#recentBookTileInfo[qApp_deviceIsTrilogy="true"] {\n qproperty-topMargin: 15;\n qproperty-bottomMargin: 15;\n}\n
oldpart=#recentBookTileInfo[qApp_deviceIsPhoenix="true"] {\n qproperty-topMargin: 15;\n qproperty-bottomMargin: 15;\n}\n
oldpart=#recentBookTileInfo[qApp_deviceIsDragon="true"] {\n qproperty-topMargin: 10;\n qproperty-bottomMargin: 15;\n}\n
oldpart=#annotation {\n min-height: 75px;\n max-height: 75px;\n}\n
oldpart=#annotation[qApp_deviceIsTrilogy="true"] {\n min-height: 52px;\n max-height: 52px;\n}\n
oldpart=QLabel {\n background-color: transparent;\n}\n
oldpart=QLabel[qApp_deviceIsTrilogy="true"] {\n font-size: 18px;\n}\n
newpart=/* [MOD]: Removed cover border in most recent book thumbnail */\n#RecentBookTile {\n qproperty-percentFontSize: 39;\n qproperty-progressFontSize: 30;\n qproperty-topMargin: 20;\n qproperty-coverBorder: 0;\n}\n\n
newpart=#recentBookTileInfo {\n background-color: transparent;\n qproperty-topMargin: 10;\n qproperty-bottomMargin: 15;\n}\n\n
newpart=#annotation {\n min-height: 75px;\n max-height: 75px;\n}\n\n
newpart=QLabel {\n background-color: transparent;\n}\n
combineparts
</patch>