YouShow

This is my first post in the YouShow series. I will not have time to keep up the the class, but I make stuff online (but I break more). I originally wrote the post on my front stage blog but the comments are so meta and the writing so stream of thought I felt it needed its own place.

This blog title is in reference to embodied nature of writing. My process is so hard to document. I could get transfixed on an idea walking the dog, playing with kids or sitting in my porcelain office.

My ideas are usually well past my skill level so writing then turns to a mixture of caffeine, cursing, and throwing things.

Since we want #walkmyworld participants to create content we also want them to  to understand the rights of makers. I decided to make a  a tutorial (mainly because I needed to learn about CC and ontainers to overlay images.)

The director’s cut:

I I do not know how to write HTML/CSS. I just steal code from elsewhere. Then I tweak it for awhile. Throw something. Walk away and posts pleas for help all over the web. That is my workflow.

This make began with me trying to learn how to add an image on top of an image in CSS. That may have even been my search terms in Google. That brought mehere.

I scrolled through the CSS and saw the multiple image overlays and thought, “That would be cool to display all of the images of CC licenses.” I figured I could do it….So I copy pasted all the code. (I still don’t know why some selectors have the same name .multiPic followed by .text1). I just new I could change the background url.

It worked. So I decided let me find one image for each of the Creative Commons licenses and add an overlay for the license and the attribution.

Then things started going wrong. I didn’t want the image url in the background of CSS. I wanted CSS that would allow me to drop in images and switch the license. Being hidden in a style sheet did me no good.

So I posted this message on discourse.webmaker.org hoping someone would respond.

(Note: I need to learn how to post code in spaces that  take markdown. I tried blockquote but it still formatted).

Then  fourtonfish responded. He defined some key terminology for me, gave me some resources (I ignored the tutorials…for now…but he inspired me to keep hacking away. Using my growing understanding I found some tutorial (couldn’t find it in my history..I tried so many)  that got me to make one div  container and put the other three divs inside of it.

It worked! I now know enough about overlays and containers to play.

…..well except the hover. So I posted another message to @fourtunfish on discourse.webmaker.org. He called me out for ignoring the tutorials and then fixed my code.

I went in and added the correct code and I did it. Just had to search for the images and copy the code a few times. I then went back into the code to add my comments. I am trying hard to use clear instructions. (I am also

I tried to add the CSS to my wordpress stylesheet. I was able to save it to the stylesheet but when I tried the html code on a page or a post the images did not overlay. That is my next task. Luckily my Wordpress theme comes with great support and Bryan Hadaway of CyberChimps is helping me try to solve the issue.

I really want the tool to work. I like to put the license in a caption or right on the photo.

 Next Episode Teaser: fourtonfish also forked my original code to show me how simple animations can be in CSS. He sent me some tutorials that will take me to   and now I want to learn how to animate stuff: