Skip to main content
Topic: Blueotter css theme for Otter browser (Read 4145 times)

Blueotter css theme for Otter browser

https://github.com/mariokamenjak/blueotter
Hello guys, I have made a custom CSS theme for Otter browser. To use it, you just download the zip, unzip it and point otter to the CSS file from:
Tools>Preferences>Advanced>Appearance>Style sheet.
It works best with GTK+ or Fusion as widget styles.
Here is how it looks, be prepared for lots of light blue:



And although the original CSS from which I made this was completely uncommented, I have managed to mak some comments, so if you want to make your own custom CSS, it will be easier if you just modify my own.
Blueotter is a modification of the Darcula theme for QtCreator:
https://dndsanctuary.eu/index.php?topic=1694.0

Re: Blueotter css theme for Otter browser

Reply #1
True road you go to one. Installed, I liked, but there was a problem too fine print on the menu and I would like to change the color. :cheers:

Re: Blueotter css theme for Otter browser

Reply #2
You have to change the color manually in the .css file. When I started working on it there were no comments though, so I made it a bit easier by making at least some comments.(although even my comments could be better and more detailed)

It is GPL v3 licensed so I encourage everyone to download and modify it. If you can improve the comments and further research what does what in the css that would be great.


True road you go to one. Installed, I liked, but there was a problem too fine print on the menu and I would like to change the color. :cheers:

Have you tried changing your widget style? Although IDK how windows widget styles will function since I don't have a Windows box ATM.

Re: Blueotter css theme for Otter browser

Reply #3
I'm not a programmer. I tried to go to in the .css file., For me it is a dark forest, but the fact that the menu font is smaller, even very small, without the possibility to increase it by setting

Re: Blueotter css theme for Otter browser

Reply #4
Aha, well I never changed that to be honest.(At least I don't think I did that) I just used Otters default.
Can you post a screenshot of how it looks on your machine?
Or do you want me to just increase the default font size(my css skills are rusty, but I am pretty sure this can be done)?

Re: Blueotter css theme for Otter browser

Reply #5

Aha, well I never changed that to be honest.(At least I don't think I did that) I just used Otters default.
Can you post a screenshot of how it looks on your machine?
Or do you want me to just increase the default font size(my css skills are rusty, but I am pretty sure this can be done)?

Look at the screenshots, it is clear that the font has decreased

Re: Blueotter css theme for Otter browser

Reply #6
You know what, we are both right.
You are right because the font size really did change.
I was right because I did not change it myself, it was changed by the original css theme which I modified.

Anyways I have fixed it. Just download from the same link again.
Perhaps i should make versions with different font sizes. Maybe even different colors(although that would be a lot more work).

Re: Blueotter css theme for Otter browser

Reply #7
Changed font on all 17 pixels in blueotter (.css). Immediately effect appeared. :yes: How to change the color? ???

Re: Blueotter css theme for Otter browser

Reply #8
background-color changes the background color of an element of the interface. color changes the color of the font.
You should use hexadecimal values for the colors but you can just use words like 'red'.
The problem is that there are lots of 'background-color' and 'color' to change. It took me an hour or two.

Re: Blueotter css theme for Otter browser

Reply #9
This is helpful.  Thanks bluedragon77!

Do you know what the CSS element is for the address bar?  I want to increase the font size a bit.

Re: Blueotter css theme for Otter browser

Reply #10
Honestly no.
The document was not properly commented so I am lost as well. I suggest you just put font-size:x into elemnts and then go reapply the css in otters preferences until you get whatever result you want.