// Internet Duct Tape

Presenting: Livejournal Theme for WordPress

Posted in CSS and Web Design, Technology, WordPress by engtech on April 01, 2008

WordPress Tips and Tricks

You know the story. You’ve been using LiveJournal since 1999. It’s your home. You’re familiar with it. You’re on the list of notable LiveJournal users. But times they be a changin’. You’re friends are all leaving LiveJournal for WordPress because it’s a better C-M-S (whatever that is). You’ve switched to WordPress, but everything looks strange and confusing.

Don’t worry, as usual engtech has your back.

(more…)

Tagged with: ,

Blog Action Day: Save Paper when Readers Print Your Blog

Posted in CSS and Web Design, Technology by engtech on October 15, 2007

Bloggin Tips and Tricks

Today is Blog Action Day with a focus on the environment and I’m going to teach a quick CSS trick for how to save paper by reducing what gets printed when someone prints an article from your blog.

It’s dead simple to do, and I’m always surprised that more blogs don’t do it.

@media print {
/* If printing the page, get rid of the sidebar and comments */
.somethingclass { display: none; }
}

The @media print style is only applied to your blog when someone is printing it out. Use it to apply display:none; to your header, your sidebar, your footer and maybe even your comments. Here’s a sample of a print style sheet for the Sandbox WordPress blog theme:

@media print {
/* If printing the page, get rid of the sidebar and comments */
div#wrapper { width: 100%; }
div#wrapper * { width: auto; }
div#header { margin: 0; padding: 0; display:none !important; }
div#footer { margin: 0; padding: 0; display:none !important; }
div.sidebar { margin: 0; padding: 0; display:none !important; }
div.container { margin: 0; padding: 0; }
.navigation { display: none; }
#blog-title { display: none; }
.comments { display: none; }
}

Blog Page Without Print Stylesheet

Blog Page With Print Stylesheet

My Print Stylesheet

My print stylesheet is customized for my blog and settings (and let’s face it, my CSS is a mess).

@media print {
#wrapper {
width:100%;
}

#wrapper * {
width:auto;
}

iframe,#wpcombar,#footer,#globalnav,
#menu,.sidebar,.navigation,.comments,
#respond,.entry-meta,#blog-title,
#blog-description,#header,
.idt-menu,.idt-header {
display:none !important;
margin:0;
padding:0;
}

.container {
margin:0;
padding:0;
}

body.loggedin #wrapper {
border-top:0 !important;
}
}
  • making the content take up the entire width of the page
  • turning off iframes so the “digg this” button doesn’t show
  • turning off the “logged into wordpress.com” bar at the top of the page
  • remove header, footer, sidebar, and misc elements like the category image I use
  • remove comments

By setting up a special print stylesheet for your blog design you can save your readers 1-2 sheets of paper for every article they print out.

Presenting: Black and Blue and Read All Over

Posted in CSS and Web Design, Request for Comments, Technology by engtech on July 18, 2007

I’ve been tweaking my blog theme furiously in preparation for the Sandbox CSS Design contest. Again I have to say that I have the utmost respect for web designers. Making a good blog design that looks nice is hard work. But I feel that I’ve gotten a lot better since I touched CSS for the first time, and the recent incarnation of IDT has many improvements over the existing style.

  • Top header bar uses a much better technique for the buttons
  • Global style reset so it should look the same between all browsers
  • Support for asides (not that I use them often)
  • Support for pretty-printing
  • Georgia headings and Verdana text (thanks to these tips)
  • Styling on the navigation links between posts
  • Still readable in 640 width and 800 width
  • General reduction in hacks

So please step out of your web browser and let me know about any pages that are looking wonky. Please cut-and-paste the link to whatever page looks wrong and mention the web browser you are using.

In general site news I’ve gone back to having a front welcome page, instead of having the latest post on the front page. I feel it gives people a better introduction to the site. I desperately need to weed my categories, but that’s a job for another week.

CSS Tip: Building 3D Buttons with CSS for the Sandbox Theme

Posted in CSS and Web Design, Technology by engtech on June 26, 2007

Yes, it’s another post on CSS design with Sandbox. Feel free to skip.

One of the nice/painful things about designing for the Sandbox WordPress theme is that it forces you to use CSS to do the things you want to do. There’s no sneaking in there to tweak the underlying structure to get more convenient selectors, it’s CSS or nothing.

An often requested tip is how to do 3d buttons for the menu bar at the top of the page. It’s done using the common “sliding door” technique where one image is the front plus middle, and another image forms the end. I’ll be using the images and technique from the Dark Liquidcard 2.0 theme by Jori Avlis in this example, along with the Sandboxed example blog.

Image Is Everything

The starting point is to create two graphics for your 3d buttons. One image will have the left-and-middle portion and the other will have only the right portion. If you want the button to look different when it is highlighted (or when that page is selected), then put the highlighted version in the same image file right underneath it! That way the entire image is downloaded once and there isn’t a delay the first time a user hovers over the button.

3d menu button for blog theme

3d menu button for blog theme

In these images the button is 46 pixels high.

Getting Started

Here is what the menu looks like without any CSS:

sandbox theme menu unstyled

We’ll start off by applying some basic styles: turn off the list style, remove any padding that might get in the way.

div#menu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 46px;
}

sandbox theme menu unstyled

Adding the 3d Buttons

Now we’ll add the 3d buttons as background images. We’ll start with the left-and-middle button first. It will attach to the list element (LI). You will have to adjust the padding so that the text is centered properly with respect to the image. Float left will change the orientation of the list. (Note: I changed the text color to white so that it would show up against the image)

div#menu ul li {
	float: left;
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/left.png)
		no-repeat left top;
	padding: 10px 0px 12px 10px;
}

add 3d button to menu using css in wordpress theme

Now add the right button. It will attach to the link anchor within the list element (LI A). Again, take care with the padding so that the text is centered properly.

 div#menu ul li a {
	background: url(http://i115.photobucket.com/albums/n296/engtechwp/website/right.png)
		no-repeat top right;
	padding: 10px 25px 12px 10px;
}

add 3d button to menu using css in wordpress theme

Adding a Hover Effect

Now we want to show the hover effect. This is done by shifting the background image down 46 pixels. We’ll also disable the underline effect by turning off text-decoration.

div#menu li:hover {
  background-position: 0% -46px;
}

div#menu li a:hover {
	text-decoration: none;
}

div#menu li:hover a {
	background-position: 100% -46px;
}

add 3d button to menu with hover effect using css in wordpress theme

Download the CSS File

You can download the code for this CSS example

WordPress CSS Tip: Design for Sandbox Theme in a sandbox

Posted in CSS and Web Design, Technology, WordPress by engtech on June 22, 2007

In case you missed the last post, there is a CSS design contest using the Sandbox theme for WordPress. That post will explain what the heck it is all about.

I’ll be the first to admit that I only know the tip of the iceberg when it comes to CSS design, but one ‘workhack’ that easily applies to any kind of programming activity is rapid development. The concept is simple: reduce the time between action and result to the shortest amount of time possible so you can get more done. My number one tip for doing a fast CSS design is to do it all on your own machine instead of doing it live on the Internet (or wordpress.com). It will save you lots of time and headaches.

I’ve taken the sample blog and example CSS template provided by Scott Wallick and made a very easy to use downloadable archive. It contains nothing but the HTML files, image files and CSS from the sample blog. It can get you redesigning Sandbox in less than a minute.

Getting Started

  1. Download the Sandboxed zip file
  2. Unzip it
  3. Open index.html in your web browser
  4. Edit style.css
  5. Refresh your web browser
  6. Repeat #4 to #5

I find it easier to work on HTML files saved on my computer than creating a dummy blog on a fresh WordPress installation. If you feel the same way then downloading this archive is right for you.

Pick The Right Tools

There are several requirements for any tool that makes designing CSS easier:

  1. editing with syntax highlighting plus auto-completion
  2. showing you what CSS selectors are available on the page you are editing
  3. inspecting why a design looks the way it does

I heartily recommend the combination of the Firefox web browser with the Firebug extension. The learning curve for Firebug is a bit steep, but it will save you a lot of time in the long run because it is chock full of goodies as can be seen on this page.

Testing in Multiple Browsers

One of the hardest things I find in web design is getting something to look the same in multiple browsers. Having multiple browsers on hand to check out your changes locally is a must if cross-browser compatibility is important to you. Here are the top browsers to consider. Market share numbers are from w3counter (thanks Daniel).

  1. Internet Explorer 6 – 50% market share
    • Click on that link to get the completely standalone version of IE6 that you can run side by side with IE7
  2. Internet Explorer 7 – 17% market share
  3. Firefox 2 – 15% market share (and 9% market share for FF 1.5)
  4. Safari 2 – 2% market share
    • Finally available for Windows users
  5. Opera 9 – less than 1% market share

The market share should give you an idea of which browsers to spend the most time designing in. I find Firefox the easiest to work with. Jalaj gives a few other suggestions.

One highly recommended technique is “reseting” CSS properties at the beginning of the file to remove slight differences between browsers.

Some people like doing a Global white space reset by zeroing both margin and padding for all elements at the top of their stylesheets. Eric Meyer’s Global Reset, Christian Montoya’s initial CSS file, Mike Rundle’s initial CSS file, Ping Mag’s initial CSS file. [Roger Johansson]

More explanation of Christian Montoya’s initial CSS

Know What Size to Design For

It is important to test your design in different screen resolutions. Market share numbers are from w3counter. Something else to keep in mind is that those big old CRT monitors and those funky new LCD monitors display colours differently.

  1. 1024×768 50.43%
  2. 1280×1024 17.03%
  3. 800×600 8.89%
  4. 1280×800 8.38%

I recommend the Window Resizer extension for Firefox for rapidly switching resolutions. Firebug may be able to do it as well, I am by no means an expert.

Advanced Design Considerations

There’s a lot out there to learn about CSS design, here are some highly recommended links with more information. If you have any other suggestions, drop them in the comments.

Win Cash Prizes for your CSS Design for Sandbox

Posted in Contests, CSS and Web Design, Technology, WordPress, WordPress.com Tips by engtech on June 20, 2007

Web pages (ie: what you are looking at right now) are composed of many things. If you think of web pages as a house, HTML is the foundation and structure while CSS is the aluminum siding, brickwork and paint. HTML stands for Hypertext Markup Language and CSS stands for Cascading Style Sheets. A passing knowledge of both of them is essential if you want to run your own website.

HTML Example

CSS Example

The whole idea behind HTML and CSS is that you use HTML to format your web page (or blog post) with things like headers, bold, lists and tables. Then you use CSS to style those elements so that they look the way you want them to. The whole idea behind it all is that you can build the structure with HTML once, and then change the look of it whenever you want to using CSS.

WordPress, Sandbox and CSS

If you want to change the way your WordPress blog looks there are two ways to do it. The first way is to change your theme. This changes the underlying HTML formating structure. The second way is to leave the theme alone and change your CSS. If you are running a blog hosted on WordPress.com, then the only way to customize your theme is to buy the CSS editing upgrade, choose a base theme, and then use CSS to redesign it. The preferred WordPress theme for CSS designing is Sandbox because it gives you so many things to play with.

Internet Duct Tape is hosted on WordPress.com using the Sandbox theme and a custom CSS design by yours truly. If I can find the time, I will be participating in the contest.

Win Prizes for Your Sandbox Theme

The creator of Sandbox is running a theme design competition with monetary prizes. The pot is getting pretty big right now, and the top six designs can win between $50 to $750 US. Even if you’ve never tried your hand at designing CSS before, this is the perfect time to give it a shot.

Scott has put together sample blog content for designing CSS for Sandbox and he also has a template file with all of the Sandbox CSS selectors.

Free Sandbox Designs

There are several free Sandbox designs available:

People Are Talking About It

More coverage about the competition can be found at

weblogs tools collection: “I thought it was a good time for a new theme competition—or rather a “designs” competition. It has been around two years since the last successful WordPress theme competition (participants of the competitions in 2006 will roll their eyes and would include me).”

wank: “I’m hoping this’ll be as successful as last year’s Style Contest, and that Automattic will be as generous with their support as Six Apart were with theirs. (Matt has already thrown in $500 prize money, which is a good start, but a little linkage wouldn’t hurt.) “

Adam: “Scott’s organizing a wordpress design competition, purely in CSS. which means it’s open to:
* wordpress.com users
* anyone who can use CSS, since PHP and javascript won’t be judged”

Small Potato: “Conveniently for Scott’s Sandbox theme and WordPress.com’s Custom CSS Upgrade service, WordPress.com users will not be left out of the competition because Sandbox will be added to WordPress.com’s collection of themes. By the way, you can enter as many designs as you want. Surely, that’s not because this competition wants to promote Sandbox even more, but because entering multiple designs will give you a better chance at winning.” (read the comments)

Binary Moon: “And what do you have to do for the money? All that’s required is for you to design a skin for the sandbox theme. You don’t need to do any php or html, it’s entirely css and image based.”

There’s more good discussion in a WordPress.com Support Forum thread

Design Tips: Website Speed Optimization for Dummies

Posted in CSS and Web Design, Technology by engtech on March 09, 2007

Website Optimization for Dummies… and by dummies, I mean me.

Jeff Atwood at Coding Horror has been doing a series on website speed optimization hacks after one of his posts when viral (to a ridiculous level) last week. Daniel at DailyBloggingTips is starting up a “speed up your site” series today with even more tips. Needless to say I’m feeling the peer pressure to fix some of my site speed problems.

If a website takes longer than 1-2 seconds to load then most people give up on it, so doing what you can to make your site faster (and your readers happier) is in your best interest.

(more…)

Three new themes and Bryan is leaving WordPress

Posted in Asides, CSS and Web Design, Technology by engtech on December 08, 2006

Bryan Velesco (Avalonstar) is parting ways with WordPress. While Bryan was with WordPress he had this to say about my Theme Review series:

Thanks for the review. These have really helped a lot in not only solidifying my knowledge of the template system, but getting rid of these damn bugs too. What you said about ChaoticSoul is really flattering, since I hold it so dear… I might have to fix the little annoyances that you and timethief are finding so it can be the best theme there is. ;)

Also, I’ll be trying to make my wordpress blog the place where I store all major theme updates that don’t fit onto the .com blog, so keep your eyes there too.

I don’t know any details (not officially announced yet), but we’ve known for a while that Matt Thomas is on board.

I wouldn’t be surprised if the recent spout of theme releases is related to Bryan leaving, and why there was a name error with the 281 theme by Paul Stamatiou and Neil Patel (plug: I subscribe to both of their blogs — they’re excellent).

UPDATE: Nope, not an error. This is Eli Foner’s extension of 281 called 2813.

Bryan has this to say about his departure:

Automattic and I are parting ways. Thinking about it now, I see the reason being a more fundamental one. The way I work just didn’t fit with their expectations. I could get into how the expectations for designers and programmers differ, or how using Trac to measure output might not be the best way to track my progress. Honestly, that would do nothing for the situation. It was an awesome four months working with some of the smartest minds in the business. I know they’ll get far.

I wish him luck with his future endevours, and I’ll be keeping my eye on his work (when looking for CSS ideas to steal).

5 Habits for Writing for the Web

Posted in CSS and Web Design, Technology by engtech on August 31, 2006

These are the steps I follow for painless web publishing. I’ve been writing on the Internet since 1994, and these habits have become second nature to me. I recently introduced a friend to writing on the web, and it was interesting watching him hit problems I never would have because of the habits I’ve formed.

This is a guide for the technical issues of avoiding formatting problems, not the specifics of writing good articles. The goal is to generate human readable HTML code. If a person can read your HTML code and understand it, then every web browsing software will be able to.

Follow

Get every new post delivered to your Inbox.

Join 281 other followers