Categories
General

How to change the photo border

Paul asked how to change the border around images. I’m not sure whether he wanted to know for flickpress or Photopress, but it doesn’t really matter. Photopress adds a custom CSS class to images it inserts, but most likely you’d want to change the appearance of all images in your posts, no matter which tool inserted them.

You’ll need to edit your theme’s style file, which you should be able to do as an admin at Appearance -> Editor. It should bring up the Stylesheet, but if not it’ll be in the list on the right side. You need to add something like this:

a img {
padding: 2px;
border: 2px solid #ccc;
}

a:hover img {
padding: 2px;
border: 2px solid #c33;
}

The “hover” part will make the border change on mouseover – if you don’t want that then leave it out. The “padding” part adds a gap between the image and the border. This only adds borders for linked images. If you want borders for all images, whether they’re linked or not, do something like this:

img {
padding: 2px;
border: 2px solid #ccc;
}

You probably just want this to affect images in posts, not the images in your header or sidebar. It depends on your theme, but most themes wrap each post in a “div” element with the class “post” – this will restrict the change to images in that class:

.post img {
padding: 2px;
border: 2px solid #ccc;
}

If in doubt, view the source of your site to see what you might be able to use – there’s often a “div” with the id “content” that wraps the whole content area.

Categories
General

Image overlay for YouTube embed

If you want a specific preview image for your YouTube video, you’re pretty much out of luck. When you upload a video, YouTube chooses 3 frames from your video based on an algorithm that might or might not be random. There are tips around for trying to game their algorithm, but that might be a little unethical and it’s unreliable since they’ve changed the algorithm over time. I think at youtube.com they’re welcome to do whatever they want, but when I’m displaying an embedded video on my own site I should be able to present the video with my choice of preview image – they’re my users and if I want to Rickroll them I should be able to!

So, I found this idea for placing an image over an embedded video, but it failed with a JavaScript error. This answer at stackoverflow got the code working correctly.

The method uses two “div” containers, one containing the replacement preview image and one containing the video embed code. The video is hidden using inline CSS and a bit of JavaScript toggles the image hidden and the video visible when the image is clicked. The image should be the same size of the video and should probably have some sort of “play” symbol so users know to click it. Here’s the code for the containers:

<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'"><img src="vidthumb.jpg" style="cursor:pointer" /></div><div id="thevideo" style="display:none">

(put the YouTube embed stuff here)

</div>

A nice addition would be some way to give users with JavaScript disabled a plain link to the video at YouTube.

Categories
General

Fall color

Here are a few of the leaves I’ve photographed this Fall. There are still a few leaves left on the trees so I may capture a couple more, but it’s nearly the end of the season. The rest are on the ground now, waiting for me to gather them up with the rake and leaf blower.

Floating starsHanging on

Wet dogwood leavesHibiscus leaf

Red maple and cloverDogwoodJapanese maple

Wet maple leafPapery leafCurvy points

Categories
General

Cheese crisps

Baked cheese

We usually just buy packaged parmesan crisps, but that feels lazy because they’re so easy to make. I don’t think the homemade crisps come out any cheaper than the packaged ones though, so I only recommend making your own if you can’t find the packaged ones. The packaged ones also seem to work better for actual dip delivery, but if that’s your goal pork rinds work way better.

Set your oven to 350 F. A higher temperature will work fine, but will be less forgiving of inattention – a good way to test your smoke detector. You will need a non-stick baking surface, such as a silicone baking mat. Grate a bunch of parmesan-type cheese or use pre-grated. Make little piles of about a tablespoon each of grated cheese, leaving room between them for meltage. Bake at least 10 minutes then start paying attention. They should be completely melted and bubbly. For maximum crispiness bake until they turn golden brown…but don’t let them burn! It’s easiest to move them to a cooling rack if you let them cool in the pan a little bit first. Try not to burn your mouth or eat them all at once.

Categories
General

It must be Fall

Japanese maple

I love the crazy colors this Japanese maple produces – right now its leaves run the gamut from ordinary green through arterial red.