Moesring

BlogThingyness

Friday, 1. May 2009, 12:17:17

Moesring's thoughts of the new design

When Moesring first saw that BlogThingy was getting a new design, Moesring had one thought: Moesring thinks it would look better with a partially transparent background.

In a nutshell, this is what Moesring thought would look even better.

BlogThingy's front page with a 20% transparent background

The big problem would be, of course, how to achieve the transparency. This example is a white background that is 20% transparent/80% opaque. Opacity via CSS is by far the easiest solution to the problem. Unfortunately, it is almost universally slow and doesn't work for some browsers.

Really wanting to see how a partially-transparent background would look, Moesring set about overcoming this problem the same way he did it for the Powerpuff theme - doing all the transparency calculations by hand.

There is a formula for calculating a colour after applying transparency. The formula is shown below. It assumes that the background is opaque and the foreground is partially transparent. α is the percentage opacity of the foreground represented as a decimal number. For example, 0.5 = 50% opacity (50% transparency), 0.25 = 25% opacity (75% transparency) and so on.

NewColour = (1-α)*BackgroundColour + α*ForegroundColour

α is the opacity between 0 and 1 where 1 = totally opaque and 0 = totally transparent.

Long story short, to use that formula to calculate every single colour on the question mark by hand would take a few years to do. Moesring knew his drawing package of choice (GIMP) would be able to do the calculations for him, but hadn't figured out which buttons needed to be clicked until now.

What you actually see in the image at the top of the page are two background images: the one at the edges and the one in the middle. The one in the middle was created by getting GIMP to do the transparency and then saving the result.

Doing it this way means that there are two background pictures (which all browsers are fine with) and no opacity (which most browsers struggle to do quickly and some can't do at all).

Anyway, Moesring made a few pictures based on different transparency values and background colours. (160KB - 180KB apiece)

	White background	Blue background
50% transparency	http://files.myopera.com/Moesring/BT/View-50.jpg	http://files.myopera.com/Moesring/BT/View-BBlue50.jpg
20% transparency	http://files.myopera.com/Moesring/BT/View-20.jpg	http://files.myopera.com/Moesring/BT/View-BBlue20.jpg

Of course, there is still work to be done with them. Even so, this was more to demonstrate that there are solutions to these problems. It also allows Moesring to see if anyone agrees that it would look even better.

PlagiarisedHidden themes?

Comments

Kimmie # 1. May 2009, 12:40

GIMP

Santa Furie # 1. May 2009, 12:46

You're not the only one who had that idea. However, I'm going to apply it via a faded version of the background image on a #wrap4. Quick, cheap and easy.

Works with all browsers without any slowdown as well.

Of course, to apply the fading and keep the image integrity I'll need to do it via a PC else I come up with a more gray image than anything else. Sometimes it works, sometimes it doesn't. This is one of the times it wouldn't.

Santa Furie # 1. May 2009, 12:49

The problem I'm having at the moment is with another theme. I'm attempting to apply full transparency to everything, including the banner and menu but it's just not happening. I'm probably being dense and missing something simple, but I'll get it.

In case you haven't guessed, the image I'm using is absolutely beautiful.

Kitty # 2. May 2009, 07:04

Whatever you do, transparency or not, please don't make it load slower. I'd hate to see it happen on that page too.

Functionality over looks please.

//edit: I just checked the pics - 50 % transparency is too much IMO - 20 % is much better. But again, not if it slows it down.

Moesring # 5. May 2009, 03:42

I'm attempting to apply full transparency to everything, including the banner and menu but it's just not happening.

Isn't 100% transparent the same as invisible?

In any case, did you eventually fix the problem?

: My way shouldn't make it any slower, and Mik's shouldn't either so there is nothing to worry about in terms of slowdown.

My way (which might be the same as Mik's way) is to use two backgrounds - Mik's original question mark outside the blog area and my modified question mark inside the blog area. There is actually no transparency at all - it is an illusion.

Using two different background images causes no slowdown - unless Firefox is particularly awful.

Santa Furie # 5. May 2009, 07:58

That's the way to do it.

.

Yeah, got it figured for now, I think. I'll be seeing it on PC later so I can see how well it works. Explored my menu code and found an instance where transparency was over ridden by a background colour which I soon got rid of. Then just hid the banner completely. I would have preferred to make the banner completely see through and retained the title, but it just wasn't working that way.

Here, sneak preview.

Moesring # 5. May 2009, 08:10

Those clouds look familiar.

I would have preferred to make the banner completely see through and retained the title

You mean something like this?

#top { background:none; }

When I wake up sometime this evening, I'll probably realise that you were actually after something completely different.

Santa Furie # 5. May 2009, 08:19

Tried it and it applied the blue background from Blue theme, even though I was using Silver as a base at the time. Maybe it's just a phone thing. Opera was playing silly buggers a lot that day.

Kept clicking a post on my watchlist and being taken to my own frontpage.

Santa Furie # 5. May 2009, 08:27

Should look familiar. That's my favouritest photo. Once the structure is done I'll be releasing a few transparent themes for the community using images I've got or images I find that need the treatment, including something a little dear to my savage heart. I've also got a skin for Dark Professional coming up today (although I've yet to have an idea that can top how the Naruto one ended up looking) and the final work on Blogthingy.

Projects keep me sane in a world gone mad and obsessed with reality TV "stars" yet they sue doctors and firemen for bruising them slightly while saving their lives. Each project I take part in keeps me and my rifle away from the clock tower...

Moesring # 5. May 2009, 08:46

Tried it and it applied the blue background from Blue theme

I hope it was just a one-off issue - or maybe due to being on a phone - because I was having a quick go at removing all traces of background from the Silver theme in my latest top-secretest invention that I've been building for the past two days.

Turns out you can remove all traces of background in 4 lines (the same lines work for just about all the My Opera themes):

#wrap1[id] { background:none; }
#wrap2[id] { background:none; }
#wrap4 { background:none; }
#top { background:none; }

Alternatively, you can condense those into one line if you prefer.

ɥʇɐǝp ɟo ssǝɔuıɹd # 6. May 2009, 14:46

ugh! I've been waiting for 5 mins and the 20% transparency file won't show.*refresh*refresh* I think I have to re-install Opera. That's why I've been using IE lately. I've been encountering problems with Opera. Also, it crashes too often.

or maybe it's just my PC.

But... i think the 50% transparency is just right... but I'm not really one to judge since I haven't seen the other one yet.