AnHeC (I'm too fucking busy and vice versa)

 Since I have some free time, I may as well do a next tutorial. This one will be about boolkikes 'reading challenge'.  

How to get a widget and post it on your page?

Scroll down a bit to set your reading challenge!

...

...

...

Are you done? Ok, now let's get a widget for your page.

to create a widget:

Scroll down to:

Copy your code:

Go to:

Scroll down and post the code in a designated window.

Save.

If you have a light background, you’re fine. If you went for a dark one, you may need to fiddle some more (widget is transparent with a dark font) Very cute. Unless you have a dark background. Then it sits there mocking you.

See what I mean? See? That evil stare. It just sits there and snickers every time you scroll down. And it won't obey any normal rules of 'the code', because it's a widget. And they have an insane sense of superiority and just won't listen. They thrive on ignoring you. They do. I swear.

Now I’ll show you two solutions (well, one solution and its extension, but 'two' sounds better)

ONE!!!

We need a lighter background. We can either set a one-color background or use a picture (so far so obvious)

add simple backround:

Click on:

Find the widget code:

Now we want to add code (I found the frame size by trial and error). Btw. I was doing it on timline’s page, that’s why there’s this fun code around it.

Add this:

            background-color: lightgray;

            width: 202px;

            height: 198px

*Remember to separate commands with “  ;  ”:

Wouldn’t it be cool to get some of that transparent effect back?

Add ‘opacity: 0.4 ‘ to the mix. (0.4 =40% visibility. I think.) Don’t forget to add semicolon at the end of a previous command and mind quotation marks!

I want mine a bit more solid, so: opacity: 0.6

It’s a floating see-through widget, bitches! (I use profanities. A lot. Deal with it)

You can alternatively add a fixed image as background:

TWO!!!

Ok, I lied, widgets can be negotiated with. But they want special treatment. In other words - you have to modify a widget code you posted in that designated window.

So copy that code and post it in some text editor (you can't work in such a small space).

I'll rearrange the code to make it easier to understand:

So what do I want to do ? Rounded edges! (If you know how to change the font colour - be my guest, make it work and send me the news! But I don't fix what's not broken.) I'm kind off fond of that see-through background.

Oh, and by the way, look! Now we know the exact size of that window!

Ok, enough is enough. Make borders thicker (I already did, previously they were only 1px):

it would give you:

So now we  fiddle with html code we wrote before to make it fit nicely. You already know in which window  html resides:

 Just turn 202 into 204:

Aaaand this is what you get:

Why only three rounded corners? Because even though I know how to make four, it would be waaaaay more complicated (there probably is an easier way than the one I have in mind. Don't look at me like that, that's all I've got!)

And that's how it would look with a solid picture as background:

As always save and watch closely all "<>" and " ; " separating commands and quotation marks. If something doesn't work usually one of those is to blame.