Under review

Materialized theme for Ubooquity

8 years ago • updated by 2 years ago • 48

Here is my new theme for Ubooquity that I call "Materialized".

It is meant to mimic the material design look of Google, but with some small adjustments to fit my taste and sticking to the limits of theming the underlying code from the Ubooquity server itself.

I have made this mainly for my own use and it is using alot of hacky CSS to make it work and look the way I like it on my computers and my Android tablet. I was inspired by the "material-custom" theme that you may have seen before and kept some of the colors, but other than that this theme is lightyears ahead and most of the code and styling has changed.

This is meant for the 2.0.2 beta version of Ubooquity!
I have only tested it in the latest desktop versions of Firefox, Chrome and Safari and mobile versions of Firefox and Chrome on Android 7. I am not officially supporting any MS-browsers or old versions of the ones mentioned above.

The theme is 99% vectorized and only have two forced bitmap-images because of how Ubooquity works. If you know a little bit about CSS you can also customize the colors and effects of the theme by adjusting the file '/css/custom.css' to suit your needs.

See this as a kind of "beta" as I will probably do adjustments to the code even after this initial release. I already know it is not super great on phones yet, but that is probably my next step, and could use some javascript (see the next paragraph...)

If you have any experience with javascript please let me know. I know CSS, PHP and bash but have no knowhow of javascript at all and I have a few things I was hoping to be able to go around using javascript because I can not do so via CSS alone.

Download here: http://www.svalas.net/materialized-1.0.zip

Vote

Replies 48
Oldest first
- Newest first
- Oldest first

8 years ago

Damn! Out of nowhere, a new theme that looks super slick! And, it looks like your screenshots may all be from a mobile device, and you fixed the centering issue for the Read & Download buttons??!

8 years ago

The screenshots are all from my 10.1" Samsung Tab A6 that I mainly use for reading my comics so that is what I'm designing for.
Happy to hear the positive comments :)

8 years ago

I do have one issue. Can you square out the Publishers page in the Comics? Actually, I organize my books in a similar fashion, so probably there too.

I pulled all of my folder images from Comixology, so they're all stretched now.

.thumb {
display: block;
width: 240px;

height: 240px;

}

.thumb img {
display: block;
width: 240px;
height: 240px;
box-shadow: 0 1px 0 rgba(0,0,0,0.12);
}

I changed both of these in the comics.css file, to square it out.

There's no pic of your Publisher page up there, so not sure how you organize and what you were seeing.

8 years ago

There is really not any specific "publishers page", that is something the editor of the Comixology theme hacked in for his theme.

With your edit all cover images will be square.

As of now I can not set different dimensions on the cards. Also I use multiple levels unlike what the Comixology theme use and my folder pictures are not square.

I might add something in the future in the custom settings though.

8 years ago

I insptected the Default theme to see how it handles this actually. Had to set it to the below:

Looks like HTML maintains the images aspect ratio, so only allowing a square image's width to 160px, keeps it from stretching.

-- Add "max-" to the width & height, and set its max to the same as the cell size.

.thumb {
display: block;
max-width: 160px;
max-height: 230px;
text-align: center;
}

.thumb img {
display: block;
max-width: 160px;
max-height: 230px;
box-shadow: 0 1px 0 rgba(0,0,0,0.12);

}

And I went with the Default theme's cell size, to allow more to fit on the screen at a time.

-- Determine the full cell size

.cell { position:relative; float: left; width: 160px; margin: 10px 10px 20px 10px; background-color: #fafafa; border-radius: 2px;

}

If you added any custom setting, I think the cell width is all you'd need to change.

The "Publisher Page" isn't really hacked in, it's just my main landing page since that's how I organize my comics.

\\comics\Publisher\Series\issues

8 years ago

Well, doing it like that you will get varying heights of the cards depending on size of the covers/folderimages, and that would go against the material design idea of uniformity.

Also changing the width to 160px would make the titles very much unreadable to me.

I will add an option in custom.css to make ALL folders square, but I'm not changing any widths or heights as that would compromise the readability of the theme.

8 years ago

I just released an updated version 1.0.2 where I have added settings to make all folders square and another setting to also have square icons on the homepage.

You can find the settings in /css/custom.css at the bottom.

http://www.svalas.net/materialized-1.0.2.zip

8 years ago

Very quick and nice turn around. Great job! :D

8 years ago

looks nice!

Under review

8 years ago

Very nice indeed !

I have updated the theme list on Ubooquity website to include it.

8 years ago

Yes I like very much !!

But there is something I don't like... Some of my cover don't look nice because they are stretched.

Some time ago I used the material theme to make something more like what I wanted (and specially to correct the bad stretched cover...). I am not good about html and css, but I made some search on the net and I could correct this.

Look the cover for "Mickey (L'age d'or de)":

With your theme, it is ugly because it is stretched. I could correct this, there is some grey space around the cover, but I prefer that to the stretched cover....

8 years ago

Well I have seen it is possible to make the cover fit with custom.css. Very good !!

But there is something else. I don't know if you make it specially or not, but only the folder can become square, not the comics or books.

In this picture in one of your post, we can see it. Is it possible to have only square cover ?

8 years ago

I think the more important question, is why would you want the comics squared?

And how would you have them squared? Cropped? But cropped to where? The titles in your example are all at the top, but that isn't always the case.

I don't think there's a uniform way to do what you're asking.

8 years ago

Updated theme: materialized-1.0.5.zip

Please guys, no need to frankenstein a solution with CSS from other themes or edits of your own. Just tell me about your requests and I will see if I can add a solution to the "custom.css" file.

StudioNeuneu: There are now two different options to solve your problem in the "custom.css" file. One that will give you proportional covers and consistent cards, and one that give you proportional covers with inconsistent cards. Just uncomment the one that you feel is right for you.

There is also options now to make all covers+folders square. By default they are cropped from the top, but there is also an option to have centered images. I would not recommend the latter though as it looks terrible.

Enjoy!