Category: Geek (page 9 of 36)

July 4, 2012

Or center embedded tweets with just CSS

After my earlier post on “Centering embedded tweets in WordPress” I’d gotten a reply from Ipstenu and Otto on Twitter.

@jan_dembowski You can override it with CSS and !important. I did on a bbPress.

— ipstenu ((Mika 実佳)) (@Ipstenu) July 4, 2012

Customizing how tweets are displayed is not a new problem. 😉

This got me taking a second look at the CSS of an embedded tweet. With Firebug you can inspect just about any items properties and I found the rule quickly.

I’m still picking up CSS knowledge all the time and I always forget about !important.

That tag lets you override rules even when it the normal CSS should get precedence. Which is why when I tried this in CSS previously it didn’t work for me, the rule I added was missing that tag. Read more

July 4, 2012

Centering embedded tweets in WordPress

Update: While the below solution is fun and works, it’s a little heavy handed code-wise. It’s easier to modify the presentation of the tweet using CSS which I explain in the next post.

A better solution is probably documented somewhere, but this worked for me and more importantly I had fun.

I was reading a blog post and noticed that the embedded tweets there were centered neatly and were not the same width as my own embedded tweets. The ones that I had inserted were left justified and had a 550px width.

I’d never liked the styling of my tweets, but all I was doing was pasting the tweet URL into the editor. I wasn’t pasting in the code from Twitter, WordPress was retrieving it for me via oEmbed.

I looked at the source of that page and noticed that the other blog post had added an additional CSS class to the tweet called tw-align-center and the hard-coded width=”550″ was removed.

That’s not surprising because when you visit Twitter’s page on embedding tweets, you can see the options for alignment. But how to do it in WordPress?

April 13, 2012

No, they are not miniature grenades

Think I’ll have a problem at the airport?

I like film photography and use up a lot of film. I also needed a new key chain as my old one was made out of leather and was falling apart.

Light bulb! I take my film to the local Costco and Lily is on friendly terms with the people behind the counter. So I asked them if they could spare the old used 135 film cartridges.

Boy, could they. I got about a dozen and picked out some different color ones. I got some 1″ key rings from Home Depot, Dad has a drill press in his work room and in a few minutes I had new key chains.

March 5, 2012

Get Your Tin Foil Hats Right Here!

Update: Sometimes I DO over think a problem and a solution. Which is odd because SSL is also one of my (supposedly!) strong points. Skip to the comments below for something that Andrew Nacin pointed out. 😀

——————————–

Part of my professional life is to think about topics like data leakage. That’s when you do something and, without realizing it, you transmit information that you hadn’t intended to.

For example, my company may have an internal web page with this URL:

And on that page is a link to a NY Times DealBook blog posting as a reference. One of the readers in my company clicks on that link without hesitation. Why wouldn’t they click? That’s what the link is there for.

When Dealbook processes their web access logs, they’ll see a URL as the HTTP referer (I’m spelling it correctly after this) that the company or person who clicked that link may not want them to see.

How to prevent sensitive referrers from being sent from your WordPress blog?

Install and configure YOURLS (svn revision 703). Get that working with a short domain, it’s easy to do.
Install and activate my short Force Javascript Redirection YOURLS plugin. [download id=”1″]The useful bit is only one line.
Install my WordPress Convert Links to Yourls plugin but don’t activate it yet.[download id=”3″]
Modify two lines in that WordPress plugin for your configuration. Sorry, I’m not up to making an options page (yet).
Active that WordPress plugin.

And poof! the Tin Foil Hat is in place. Any links in your post content or comment text will have their links sent to your very own link shortner and the remote site will only see the short link as the referrer.

Read on to see how it works. Read more

March 3, 2012

“I was the voice of the Flash for 10 years”

Tim Daly’s always good, but add Nathan Fillion and it’s just plain GENIUS.

The show is well produced and my favorite part is take 2 with Michael Rosenbaum.

February 12, 2012

Old content! Now in 3D!

The guys over at Wired re-published their old review of The Phantom Menace but with a difference. Using CSS and duplicating the content they were able to apply a 3D effect.

It’s readable if you have the glasses. And of course, I do have 3D glasses.

Naturally, I tried to do the same just for giggles. I was able to duplicate the content in both red and blue, but the entire container div uses “position: relative” so the height needed to be set manually.

That can be read as: I haven’t figured out the CSS to dynamically overlay text content on top of each other without the comment box sitting on top of the text. I can’t do it the same way as they do at Wired.

Google to the rescue! To get the effect I wanted, I’m using CSS to color the paragraph fonts a shade of blue while making the offset text-shadow red. For links I reverse that so they look different. It’s not a lot of CSS and if you apply it you better have your glasses ready. It’s easy to do but probably doesn’t work right with old browsers.

Forget old browsers. I opted for this simpler method and put the solution into a plugin.

The plugin inserts the necessary CSS into the head and when a post is tagged “Phantom 3D” the_content gets wrapped in a div with the CSS class “redblue-text”.

Here’s the “Now in 3D!” part

Download, install, and activate a copy of my plugin. It’s a zip archive with one file in it.
Find an old post on your blog and edit it just by adding the tag “Phantom 3D” to the post. The spelling and case are important, the P and D have to be capitalized in the tag or this wont work.
Poof! You’ve just brought new life to an old subject.

For purposes of readability I have not put that tag on this post. Not everyone has 3D classes by their PC.

But I do have an old post titled Adding Slimstats to WordPress from 2007 and that’s a good candidate.

The info in that post is horribly outdated (I mean come on, I recommended editing wp-config.php) and totally unnecessary these days. As indicated today in the comments, there are just better ways to implement Slimstat in WordPress that are supportable.

But we all know that by adding 3D everything is improved. I’ve made that post new and exciting not by updating the content but by simply applying a special effect.

If that’s good enough for George Lucas, then it’s good enough for me. 😀

February 8, 2012

The best support topics are the ones where I have to stretch

I spend time browsing the WordPress support forums to help out. The majority of requests are from new users who have a problem with a setting, they changed something they shouldn’t have, or an update broke their site.

It’s a very popular software platform and while mundane requests aren’t exciting, when you provide good answers you’re helping someone out. That’s a very cool thing. The answers provided there give someone an assist so that they can get out of a hole they put themselves in.

But the most satisfying topic is when someone is asking how to do something and I have to figure it out to support them. Especially when it involves something that I’m not too good at.

I’m a huge fan of child themes and I use them here on this blog. So when someone asked about modifying the Coraline theme, I was curious enough to ask for clarification. When the person explained by example and I saw that it was related to CSS, I got to work.

Using my test installation, I created a child theme for Coraline. I already had a copy of that theme and I started with what I already knew of CSS. I was close to getting it working but ended up searching via Google for the rest.

Armed with some new CSS information, I was able to get the my test install working satisfactorily and posted the solution. Total time spent was a little over 45 minutes.

Does that seem like a lot of time helping a stranger? It’s not.

I knew that what they were asking for was doable, but I’m horrible at CSS. It’s a creative thing for me and I’m just not good at it. But by helping that person out I was able to learn something new and stretch my own skills a little.

That’s how I learn, doing things that are outside of my experience. My little contribution is not earth shattering but it might help someone out and being able to pickup additional CSS is a bonus.

There are many really talented web designers that fully comprehend CSS and my own level of expertise will not match that. But by my accepting that forum topic as a challenge, I understand a little bit more than I did the night before.

Here’s the reply to my small effort.

You’re a genius, seriously. Thank you!

Concise, I like it. That’s not a bad result at all.

January 22, 2012

Force logout Mac users

Yet another one of those write this down Jan, it will come up again posts. There’s almost certainly a better way to force log out absent users on a Mac but heck, this works for me.

To kill off all the processes of a user named joe who’s left logged in but used the user switcher, open up the Terminal app and run these commands.

sudo su -
ps aux | grep ^joe | awk '{ print $2; }' | xargs -I{} kill -9 {}

In my kitchen is the community iMac and I have set up accounts for my whole family. Sometimes people come over and forget to log out but used fast user switching to go to the login screen or a different user.

That’s not too bad, but some software combinations I’m running often take up lots of CPU needlessly. Yes, Firefox and Adobe Flash I mean you. The whole iMac becomes slow and unresponsive.

That makes for a sad Mac. More importantly at 5:30 AM it makes for a sad me. As long as you know Joe’s user id then this will zap all of his processes and log him out as a result.

If some of those processes are stubbornly cling to life then rinse and repeat.

January 1, 2012

Using WP-PageNavi with the Elemin theme

Update: Added a conditional to ensure that wp_pagenavi() runs once.

The Elemin theme has it’s own built-in page navigation after the posts. It’s attractive, but not quite as flexible as the WP-PageNavi plugin. With this plugin you can put a page counter, link to the start and end pages, etc. It’s a cool add-on and I’ve gotten comfortable using it on my WordPress blog.

Adding support for that plugin to Elemin can be done simply by creating an includes directory for the child theme, and copying the elemin/includes/pagination.php file into the child theme includes directory. You then modify the copy with the wp_pagenavi() code and due to the magic of get_template_part() the child theme will pick that up.

Modifying a copy of a parent theme file isn’t too bad and that file is very small. But that’s not a very interesting solution. What’s more fun is to add support via hooking into the loop.

I’ve made many modifications to my child theme and not once have I had to copy and/or modify one of the parent theme files. For me, that’s the whole point of this exercise: creating a child theme that only uses functions.php and CSS.

So far using that method for this child theme I’ve been able to do the following:

Add a random header image
Made some CSS changes including a page background
Added a fix for Internet Explorer 8 issues
Created a front page view that shows the full content and then the excerpts and without using a front-page.php template

I’m having a great time doing it too. WordPress is very extensible and I’m picking up more and more PHP knowledge as a result of playing with my WordPress blog.

Here’s how I added support for WP-PageNavi to the Elemin theme. Read more

December 24, 2011

It’s not my fault, the wife uses Internet Explorer 8

For my home PCs I typically run the latest and greatest web browsers. I even run Internet Explorer 9 which is even not that bad™. Lately I’ve been vacillating between Firefox and Chrome.

At my wife’s work they’re now using Internet Explorer 8. That’s an improvement, they’ve been on version 6 for years.

This blog’s theme uses CSS border radius effectively and it doesn’t render correctly on version 8. You get square blocks where you wanted round corners. The next version it works fine, version 8 and below not so much.

There is a work around but it’s ugly. Add conditional CSS to your head for any version of IE less than 9 and reference PIE.htc from CSS3 PIE.

This is easily done by adding some code to my theme’s functions.php file.
Read more