Modify Default Kobo Header/Book Title Font in Reading Mode

[timd.mackey]

Hi everyone, I've figured out how to modify my footer style using either the Metazoa "Custom reading footer style" or directly modifying the css from my nickel file, but I'd like to also modify my header to match. Does anyone know a way to do this? I've tried modifying various lines of css in my nickel file, but I haven't been able to make anything work.

Ideally, these are the attributes that I'd like to change so that my header matches my footer:

font-family
color
text-transform

Thanks for any help!

[jackie_w]

Originally Posted by timd.mackey

Hi everyone, I've figured out how to modify my footer style using either the Metazoa "Custom reading footer style" or directly modifying the css from my nickel file, but I'd like to also modify my header to match. Does anyone know a way to do this? I've tried modifying various lines of css in my nickel file, but I haven't been able to make anything work.

Ideally, these are the attributes that I'd like to change so that my header matches my footer:

font-family
color
text-transform

It depends on which firmware version you're using and where you want your header text modifications to be seen:

• main GUI header, e.g. Home screen, My Books list
• the book title in the header whilst reading a kepub

In firmware 4.5.9587, the nickel CSS stream you need to change is the one containing #StatusBarView. The variable whose CSS you need to modify is #message.

Making changes to font-family, color and text-transform will apply the changes you want to the main GUI header.

Your mods to color and text-transform carry through to the kepub book title header. Unfortunately the font-family mod does not. The kepub header seems to always use the same font-family you have selected from the font menu for the current book. I may be wrong but I assume the kepub reading app is applying some kind of override.

A few firmwares ago, when the old-style tiled Home screen was still the default, you could change the header text appearance by modifying the CSS for the nickel variable called SmallTouchLabel. In those days I was able to modify its font-family and color CSS and have it appear in both main GUI and kepub header. I never tried text-transform.

P.S. If your experiments can improve upon what I've said I'll be interested to hear about them

[timd.mackey]

Thanks for your suggestions, jackie_w—I made some changes to the rules that you referenced, and I realized I may not have been clear about what I'm trying to change (or I'm doing something wrong!)

Editing the css for #message appears to change the text used in the overlay status bar (which alternates between showing the time, the percetage read, and the book title). I'm actually trying to change the Book Title that shows at the top of the epub/kepub page when the overlay is not active (Pocket articles as well, assuming those are controlled by the same styling).

So far I've just been using trial and error, changing css rules, restarting my kobo and seeing what's changed. Is there an easier way to go about this, or is there a stylesheet reference that I can find on the forum? I've been using pipcat's css extractor to edit the nickel file: https://www.mobileread.com/forums/sh...9&postcount=15.

[timd.mackey]

Now I'm just confused—using the metazoa patch method works for modifying the footer, but using the nickel css extraction route, none of the changes I make seem to be having any effect...I think I'm going to go to bed and try to figure out what I'm doing wrong later.

[vjjustin]

Originally Posted by timd.mackey

So far I've just been using trial and error, changing css rules, restarting my kobo and seeing what's changed. Is there an easier way to go about this

I haven't tried this, but jackie_w has replied to me in another thread about an alternative method (option 2 - pipcat) where it is supposedly more easy while experimenting. Browse that thread and you might find something helpful.
https://www.mobileread.com/forums/sh...9&postcount=21

[jackie_w]

Originally Posted by timd.mackey

I made some changes to the rules that you referenced, and I realized I may not have been clear about what I'm trying to change (or I'm doing something wrong!)

Editing the css for #message appears to change the text used in the overlay status bar (which alternates between showing the time, the percetage read, and the book title). I'm actually trying to change the Book Title that shows at the top of the epub/kepub page when the overlay is not active (Pocket articles as well, assuming those are controlled by the same styling).

Yes, I believe I understood what you're trying to do. However, I'll re-phrase what I already tried to say in my previous post ...

If you change 3 CSS attributes (color/text-transform/font-family) in #message, all 3 changes will display in the status header top-left text (Time/%-read/My Books, Home etc). However, when reading a kepub, only 2 of these CSS changes (color/text-transform) will show in the kepub book title header. Unfortunately, any change you make to font-family seems to get overridden - presumably by the kepub reading app itself - because the font used is always that which you have chosen, from the Aa font icon pop-up, to read the kepub. It's easy to confirm this by watching the kepub book title header as you change fonts on the Kobo. I don't know of any way around this in the current firmware 4.5.9587. I used to be able to get it to work as you want it in a fairly recent firmware (before the new-style Home Screen was introduced) by editing a different nickel CSS stream but that method doesn't seem to work anymore. The method I posted is the closest I can find at present. I'm happy to be proved wrong, though.

As for epub and Pocket header text ... epubs don't have a book title header and I don't use Pocket so can't comment about that.

Originally Posted by timd.mackey

So far I've just been using trial and error, changing css rules, restarting my kobo and seeing what's changed. Is there an easier way to go about this.

No, trial & error and shared experiences from like-minded tinkerers is all there is. Welcome to the club

[JSWolf]

Can modifying the kepub header be made into a patch?

[jackie_w]

Originally Posted by timd.mackey

Now I'm just confused—using the metazoa patch method works for modifying the footer, but using the nickel css extraction route, none of the changes I make seem to be having any effect...I think I'm going to go to bed and try to figure out what I'm doing wrong later.

You haven't really given enough details to figure out what's going wrong, specifically how many/which patches you have enabled in the GeoffR/Metazoa nickel.patch file. As I'm sure you're beginning to realise developing patches for the nickel file is not for the faint-hearted!

There are a couple of general things to say:

• Patching the nickel code to change the header and footer have little, if anything, in common with each other. Whilst it may appear logical that they ought to be similar, they just ... aren't.
  
• If you're going to patch the nickel file you really need to apply all nickel patches via the same method - all via GeoffR/Metazoa-style patches or all via pipcat-style patches. You can't easily mix-and-match because you'll end up overwriting one set of nickel patches with the other.

If you read the linked thread vjjustin pointed you at it may clarify a few things.

In case it helps this is an outline of what I do for my own nickel patches (14 of them).

Some of them are already conveniently packaged in the GeoffR/Metazoa standard nickel.patch file. However some of them aren't and it's not practical for me to use GeoffR's makepatch utility to create them. Consequently, I do all nickel patches via the pipcat-method. This requires me to:

• Completely exclude the nickel file from the KoboRoot.tgz file produced by the GeoffR/Metazoa-method. This is easily done by removing the nickel.patch file from the 4.5.9587_source directory before running 4.5.9587.bat. N.B. It's not enough to simply disable all the patches in nickel.patch.
• Transfer all nickel CSS changes which I had originally enabled in nickel.patch into pipcat-style changes. This is easy for the `Custom reading footer style` patch (ReadingFooter) where the changes are human-readable. It's not so easy if some of your enabled patches are the hex-code variety e.g. `Custom Header menubar - reduce height by 33%`. This happens to be one developed by me so I already know what CSS changes to make for the pipcat-method.
  
  I should probably also point out that the `Custom Header menubar - reduce height by 33%`patch is modifying the same #StatusBarView CSS stream as the one containing #message - as per your original query. Therefore if this is one of your enabled nickel patches you'll need to combine all the CSS changes into one.

[jackie_w]

Originally Posted by JSWolf

Can modifying the kepub header be made into a patch?

It depends. What modifications did you have in mind?

nickel patches are more difficult to share because the CSS to be modified is often compressed. This requires all changes to be hard-coded then converted into a hex-code GeoffR-style patch, i.e. one-size-fits-all - no ability to allow user customisation.

As a fictitious example, if the same compressed CSS stream could be patched to change 2 different style attributes - font-size, font-family. How many different combos of those 2 values would it take to keep everyone happy. You'd need a different patch created for each combo. Too many to be practical IMHO.

Using the pipcat-method for nickel patching is easier for users to apply the exact combo of values they want. Unfortunately there's quite a learning curve and is probably not suited to the casual user. Not to mention the amount of repetitive re-jigging involved every time a new firmware is released.

[Mrs_Often]

Originally Posted by JSWolf

Can modifying the kepub header be made into a patch?

Originally Posted by jackie_w

It depends. What modifications did you have in mind?

nickel patches are more difficult to share because the CSS to be modified is often compressed. This requires all changes to be hard-coded then converted into a hex-code GeoffR-style patch, i.e. one-size-fits-all - no ability to allow user customisation.

As a fictitious example, if the same compressed CSS stream could be patched to change 2 different style attributes - font-size, font-family. How many different combos of those 2 values would it take to keep everyone happy. You'd need a different patch created for each combo. Too many to be practical IMHO.

Using the pipcat-method for nickel patching is easier for users to apply the exact combo of values they want. Unfortunately there's quite a learning curve and is probably not suited to the casual user. Not to mention the amount of repetitive re-jigging involved every time a new firmware is released.

How about now, with geek1011's improved patching system... would it be feasible?

[jackie_w]

Originally Posted by Mrs_Often

How about now, with geek1011's improved patching system... would it be feasible?

To the best of my knowledge, what I wrote in post #2 still applies ... including the P.S. at the end

It's possible to use geek1011's kobopatch to edit the #message variable but the caveats re: font-family from post #2 still apply.

[Mrs_Often]

Shame, thank you!

Being able to modify the contents / style of the header would only be a silly luxury though (for me anyway). The only thing that I would really like to be able to do is change the height of the book title header whilst reading a kepub, but without messing with the height of the GUI header. But if I understood your post #2 correctly these two aren't separable, right?

[jackie_w]

Originally Posted by Mrs_Often

But if I understood your post #2 correctly these two aren't separable, right?

As far as I can tell, that's correct.